# Image with text

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FMAy87HCQvBp913wjmE5A%2F2025-04-04_00-31-16.jpg?alt=media&#x26;token=2fb51e9c-a562-46b3-9a7a-9b6a0d00ca68" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
**Steps:**&#x20;

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

## General Settings

<div><figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FBJJNxEmhWV8y4lILxCji%2F2025-04-04_00-31-49.jpg?alt=media&#x26;token=c62d86ef-8173-448e-94c3-4e1fc0c48dde" alt=""><figcaption></figcaption></figure> <figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FiNNhV4CW4BqFcSp2MHUY%2F2025-04-04_00-32-22.jpg?alt=media&#x26;token=d4653a8a-bb8a-4bd9-8543-0b8373c6ab65" alt=""><figcaption></figcaption></figure></div>

* **Width** - With of this section 3 options : Boxed / Wide / Full
* **First Image -** 1340 **x 1340 .jpg recommended.**
* **First media size**
* **Use video instead of image**&#x20;
* **Show second image**
* **Second image 1340 x 1340 .jpg recommended.**
* **Position second image**
* **Second image size**
* **Media width  -** Image column width

### Video

* **Video URL** - Accepts Vimeo or YouTube links
* **Shopify-hosted video** - Overrides the Video URL setting.
* **Poster image** - 1340 x 1340 .jpg recommended. If image blank, Shopify-hosted video will use the preview image.
* **Autoplay** - Video will be muted
* **Display video controls**&#x20;

### Layout

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/O0Eh17ZEtQgZCbAgMqEV/img-layout.jpg" alt=""><figcaption></figcaption></figure>

* Desktop image placement - Left / Right (Image first is the default mobile layout.)
* Column gap&#x20;
* Vertical alignment - Top / Middle / Bottom
* Content alignment - Left / Center / Right

### Colors

<figure><img src="https://2841038207-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIGTidUfSjAqopf8pRRmN%2Fuploads%2FDcnLlTL8rj2IJ4MzAhAl%2F2025-04-04_00-33-33.jpg?alt=media&#x26;token=2bec5eb4-f2ec-42c8-8d32-f198daf4fb89" alt=""><figcaption></figcaption></figure>

* **Background**
* **Text color**
* **Background text column**

### Section padding

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/n2xL6bjz1tYl76g1pebr/padding-c.jpg" alt="" width="280"><figcaption></figcaption></figure>

* **Top padding**
* **Bottom padding**

## **Block settings**

{% hint style="success" %}
Steps:

1. Locate **Image with text**
2. **Add Block. >** Select block you want
3. Make necessary changes. > **Save.**
   {% endhint %}

<figure><img src="https://content.gitbook.com/content/IGTidUfSjAqopf8pRRmN/blobs/8noUn8KNB9ElXrDS2qEE/imw.jpg" alt=""><figcaption></figcaption></figure>