# Image with text

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://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FlXsYyZ1wKkInSUxUf3le%2Fimage.png?alt=media&#x26;token=6b54bbb5-8599-445e-b9e5-0fc0408e6127" alt=""><figcaption></figcaption></figure>

{% hint style="success" %}
Steps

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

## Section settings

### General and Layout settings

Select the Color scheme you want to use for your section.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FITlb5Lj1ESEdWdN5mwcK%2Fimage.png?alt=media&#x26;token=c486d239-c7ab-40ab-a116-6a52202391f0" alt=""><figcaption></figcaption></figure>

You can also **enable boxed layout** for the section, and select the **Boxed color scheme**.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FGo3EZBg8tN3gmUgSD5Ni%2Fimage.png?alt=media&#x26;token=a4981e4e-3bca-4cd1-bb7e-e90960582dea" alt=""><figcaption></figcaption></figure>

## Section header

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2Fjfyym6aR2MGWP8Ahv2yU%2Fimage.png?alt=media&#x26;token=42eb5e5d-8d74-4f93-a725-3d162042aa88" alt=""><figcaption></figcaption></figure>

Give your section a heading and a subheading, or simply leave them blank.

* Text alignment: Left/Center/Right;
* Mobile text alignment: Left/Center;
* Show header divider or not;
* Heading size: H2/H3/H4/H5.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FscspsVd02AXiEUDJFMLF%2Fimage.png?alt=media&#x26;token=c00075e9-bab8-4472-b1e5-67d2a71cd7b3" alt=""><figcaption></figcaption></figure>

### Grid settings

Adjust the gap between the image and content by adjusting the **Column gap** for desktop and moble view separately.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FHYoQ8DiInV7Msp7H2IpC%2Fimage.png?alt=media&#x26;token=4f59f8e4-86aa-4d53-a620-707040252f51" alt=""><figcaption></figcaption></figure>

### Image settings

Select/Upload an image and insert the image link if needed.

You can also decide where to place your image by selecting **Image alignment** as Left or Right.

Set your preferred **Image container width**.

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FvyeOfYAkVEjCn0gvdOVI%2Fimage.png?alt=media&#x26;token=93265237-2073-4bee-8bf0-597b70cf4d8a" alt=""><figcaption></figcaption></figure>

## Block settings

Add a Heading, Description, Subtext, and a Button to your section. You can reorder each block to change its position.&#x20;

<figure><img src="https://720269760-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FSnkJrgCgnPuM88XGWwwm%2Fuploads%2FF6IkJ0W7qydOHb7YlfDT%2Fimage.png?alt=media&#x26;token=2976fb9f-97b3-4692-b93d-2944890b470a" alt=""><figcaption></figcaption></figure>