# Image with text

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FoZ4GQJjZoDGWboV8AiGQ%2FFrame%2043827.png?alt=media&#x26;token=50127cda-b0b9-4263-b81e-97bbe6568628" 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.

## How to add an Image with Text section

{% hint style="success" %}
Steps

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

## How to edit an Image with Text section

### Section settings

#### General

Adjust the **Color scheme** and **Container color scheme** for this section.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F09LZ94C2WXPLssmSBGzc%2Fimage.png?alt=media&#x26;token=012b44bf-00fe-4e92-8ad2-b478da1f78b7" alt=""><figcaption></figcaption></figure>

Add an **Image** or image link (Connect dynamic source) that you prefer for your Image with text section.

You can also adjust the **Image height** to Adapt to image/ Large/ Extra medium/ Medium/ Small/ Extra small and **Desktop image placement** to Image first/ Image second. (Note: **Image first** is the default mobile layout)

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FzmaTnxMdJjdj3cx08p55%2Fimage.png?alt=media&#x26;token=db9910ee-dc95-4bc6-b3b7-7b965f7d230e" alt=""><figcaption></figcaption></figure>

Furthermore, you can change the **Desktop content position** to Top/ Middle/ Bottom and **Desktop content alignment** to Left/ Center/ Right to achieve a balanced appearance within the section.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FtRSHempwTAXtUP4Gy4ck%2Fimage.png?alt=media&#x26;token=28731e96-78e6-4634-be7c-ba484946dfa0" alt=""><figcaption></figcaption></figure>

#### Mobile layout

The Image with text section enables you to adjust the **Mobile content alignment** (Left/ Center/ Right).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FqLDE7H7ZM6asouLiezb2%2Fimage.png?alt=media&#x26;token=020cbaab-be28-493e-8b20-8aa8ad6d59cb" alt=""><figcaption></figcaption></figure>

### Blocks settings

Add heading/ subheading/ text/ button to Image with text section. You can add up to 4 blocks in one Image with text section.

You can drag and drop to reorder the blocks within the section.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FcgUgMwCfSPjI4RbLd31S%2Fimage.png?alt=media&#x26;token=981bc2d1-99e8-4cd3-ad83-4ba31d6a27c9" alt=""><figcaption></figcaption></figure>

#### 1. Heading

You can add a **Heading** and choose a **Heading size** (Heading display 1/ Heading display 2/ Heading display 3/ Heading 1).

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FqZILzpN3RKszF4EY4jQD%2Fimage.png?alt=media&#x26;token=de3d5019-a702-4281-9087-f0c74cf17426" alt=""><figcaption></figcaption></figure>

#### 2. Subheading

Add a **Subheading** to your Image with text.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2F8Hn4lQ6t8shqwBdJBuWJ%2Fimage.png?alt=media&#x26;token=d689581c-fbe1-4489-a3be-309e9ec9fc34" alt=""><figcaption></figcaption></figure>

#### **3. Text**

You can add a text description next to the image to illustrate this section.

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2FDtUDttEUXnDceB7ZNmak%2Fimage.png?alt=media&#x26;token=57f98406-f9ab-453d-bb73-b8671ee66f86" alt=""><figcaption></figcaption></figure>

#### **4. Button**

You can also display a call-to-action button to redirect customers to your desired pages. Add a **Button label** and **Button link** for one or both, then choose a **Button style** (Primary button/ Secondary button/ Underline button)**.**

<figure><img src="https://3064615700-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F3yE7VVjvl0MgK6awOPKB%2Fuploads%2Fsmkb8FdG4aR1figM8Sq9%2Fimage.png?alt=media&#x26;token=9f17238b-fc0f-4bb2-b65a-77a5aa41ba11" alt=""><figcaption></figcaption></figure>
