> For the complete documentation index, see [llms.txt](https://nextsky-2.gitbook.io/milano-shopify/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://nextsky-2.gitbook.io/milano-shopify/theme-sections/image-with-text-overlay.md).

# Image with text overlay

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FWZMMpjpsydeNSVP6fItG%2Fimage.png?alt=media&amp;token=b53af687-c135-46c1-a1b0-0ab3f38d73c2" alt=""><figcaption></figcaption></figure>

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.

{% hint style="success" %}
Steps

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

## General settings

**Section width:** You can choose between Fluid Container, Stretch width, Full width for the layout or just leave it with the default layout of the video.

**Color scheme:** You are allowed to change text color, background color, etc. with preset color.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FSzv3mSZIIYlXhHXw4L5Z%2Fimage.png?alt=media&amp;token=cf9b0bc8-ab2f-4462-aa15-7369a1b5327d" alt=""><figcaption></figcaption></figure>

## Image <a href="#image" id="image"></a>

**Image**: Select or upload an image for the banner on both desktop and mobile views.

**Overlay opacity**: Adjust the opacity level of the image overlay.

**Height**: Choose to automatically adapt the image height or set a custom height.<br>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fk9Pwbti5tbhMACrOyhwE%2Fimage.png?alt=media&amp;token=2727aca4-e3e0-4241-9423-cf9f0f858ce3" alt=""><figcaption></figcaption></figure>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FufhnmHbC1AEJFRkPDpuc%2Fimage.png?alt=media&amp;token=ed9ea036-120d-46dd-bb7b-d26e03dcd26e" alt=""><figcaption></figcaption></figure>

## Content settings

**Content alignment:** Options to align text left, center, or right are available.

**Content position:** Vertically and horizontally align the content for optimal positioning.

**Content width:** Define the width of the content box for a tailored fit.

**Content padding**: Configure the padding for the content box.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F4xf3r0nxIAWu674bjZXe%2Fimage.png?alt=media&amp;token=eab9b914-b1ba-4c5e-bbe6-e7fd72f906e4" alt=""><figcaption></figcaption></figure>

## Content box

You can set a background color and adjust the opacity for the it.

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FyWCHPuBifXo1gexXI6hh%2Fimage.png?alt=media&amp;token=a77e64c4-342e-4123-8754-8c6738a452c9" alt=""><figcaption></figcaption></figure>

## Mobile options and Section padding

**Content Placement**: Choose to display content below the image or maintain the same layout as on desktop.

**Content alignment**: Set the alignment for content on mobile devices.

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

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2F1lZZWoeJP7J0gsO4O2NR%2Fimage.png?alt=media&amp;token=c425ef01-85c5-4e5c-b1c4-d692cd16a9c8" alt=""><figcaption></figcaption></figure>

## Block settings

Each block includes settings for content such as font size, font weight, text transformation, and spacing.

### Heading

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2Fmd0DN1Hx3yGwC2gWIZyL%2Fimage.png?alt=media&amp;token=27ad8b8c-cc5c-4eaf-9f3c-e6832f358ec7" alt=""><figcaption></figcaption></figure>

### Subheading

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FEHTlyWFQx24jE3hfUy88%2Fimage.png?alt=media&amp;token=59b0ca52-20b2-42a5-8396-d913396c752d" alt=""><figcaption></figcaption></figure>

### Description

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FzggZV4DozJMGhebsWoyo%2Fimage.png?alt=media&amp;token=ccaf95f2-9c37-4e84-8e83-f0aa77f28864" alt=""><figcaption></figcaption></figure>

### Timer <a href="#timer" id="timer"></a>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FUkvhk1XisPUu4x0gQ8CA%2Fimage.png?alt=media&amp;token=7d3f7ff1-08b5-4676-9e63-4e23908c920b" alt=""><figcaption></figcaption></figure>

### Button <a href="#button" id="button"></a>

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FeZuWydukReUAVQXTXx5N%2Fimage.png?alt=media&amp;token=07a021ab-c3bf-467a-8106-7e93c3e6c33c" alt=""><figcaption></figcaption></figure>

### Spacing

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

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FhLDJ8B1zcizzo2hYt17G%2Fimage.png?alt=media&amp;token=13a417e8-faff-48d3-bc9c-4ef804b1de9e" alt=""><figcaption></figcaption></figure>

### Image

<figure><img src="https://1163507529-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAGMtjb3mOlhr9pzqKwM0%2Fuploads%2FJgNqaac05brESqmfuyGY%2Fimage.png?alt=media&amp;token=171b8d70-08aa-454c-acc1-b9df40f8bef3" alt=""><figcaption></figcaption></figure>