# 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="/files/yUIF4bD57DGRvrMIoY6a" 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="/files/Rzxd6Ya74z2024AIY7qY" 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="/files/IVnL2Q7TKiz1jj4I5yvl" alt=""><figcaption></figcaption></figure> <figure><img src="/files/rSQkdQqaiXuE58dGzvlN" 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="/files/4u6q8Exiof2PsG492xhj" 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="/files/pQajSRPidpWKcltNY66O" 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="/files/KacAznb3jTHfFeZTezuw" 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="/files/3dGmAuheXcgkeIvtVNjz" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://blueskytechcos-organization.gitbook.io/umino-shopify/theme-sections/banner-with-text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.