# Banner with text

{% embed url="<https://youtu.be/4KMgmpaaIFM>" %}

The image with text section provides an appealing and dynamic approach mixing media, message, and a call-to-action button. This is a great way to promote a product/collection or any exciting feature on your online store.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/62AjcAxi4I4hm6BCuxNW/image.png" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

1. In the theme editor (**Customize**), click **Add section**
2. Locate **Banner with text**
3. **Save**
   {% endhint %}

## Section settings

### **1.** General

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/P2ZvHvr1wLU7MeKa2YCV/banner-text.jpg" alt=""><figcaption></figcaption></figure>

**Layout:** You can choose among Container, Wrapped container, Full width for the banner layout.

**Add focal point:** This feature helps you select the most important part of an image for your store. It ensures that the focal points of the image always remain visible, even if a section crops the image to fit the layout.

<div><figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2FjYcM20dceNDbVusyWVpo%2FScreenshot%202023-12-19%20120220.png?alt=media&#x26;token=471137ca-13eb-468e-b20a-8563a3699223" alt=""><figcaption></figcaption></figure> <figure><img src="https://2521394731-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F5WlAIkq5Keo641r70Byr%2Fuploads%2F72U7oFwfcp8dT2NaJxcs%2FScreenshot%202023-12-19%20140615.png?alt=media&#x26;token=656cbb71-4fe3-4838-9160-6e24be350e41" alt=""><figcaption></figcaption></figure></div>

{% hint style="info" %}
Please follow this [link](https://help.shopify.com/en/manual/online-store/images/theme-images) for more information.
{% endhint %}

## 2. Content

**Content style:** set the header to stay on top or beside the image

**Text alignment:** You can align text to Left, Center or Right.

**Content align:** Align content vertically and horizontally

**Image style:** Style the border of the images to be squared or rounded.

**Content max-width:** set width for text

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/g5klc2cUFWMVSJFKEWqS/image.png" alt=""><figcaption></figcaption></figure>

### 3. Text beside image setting

**Position:** Setting for image or video to be on the right or left of the text.

**Width:** Setting width for image or video

**Column gap:** Setting space between text and content

**Hover effect:** This option allows you to set an effect when hovering for image with many selections (Warning: Hovering effect will resize your images).

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/qRp63HcjGS42dFuDwzXU/image.png" alt=""><figcaption></figcaption></figure>

### 4. Text overlay setting

Content has default height with Original setting. Switch to Custom setting in case you want to set it up on your own.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/WkEjV0mRlFrn7FvZoc4z/text-overlay.jpg" alt=""><figcaption></figcaption></figure>

### 5. Section padding

Section padding allows you to specify the space between the slideshow and the preceding or following sections, or both.

<figure><img src="https://content.gitbook.com/content/5WlAIkq5Keo641r70Byr/blobs/KW3kmx0vQAmOkTJEgyA5/image.png" alt=""><figcaption></figcaption></figure>