# Highlight text with image

![image](https://docs-assets.foxecom.app/sleek-theme/Group%204514_OoX1LfJK.png)

A Highlight text with image section combines text and images to create a visually appealing and engaging section on a webpage. 

This is often used to draw attention to important information or key points on the website.

In this article, we will show you how to add a Highlight text with image section.

## How to add a **Highlight Text with image section** to your Shopify store

<Hint type="success">

Steps

1. In the theme editor **(Customize)**,> click **Add section**
2. Select **Highlight text with image**.
3. Make necessary changes.
4. **Save** the settings.

</Hint>

## How to edit a **Highlight Text with image section**

### Section settings

#### General

Adjust the **Color scheme** for this section.

<Hint type="info">

In Shopify, the [Color scheme](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme) (a set of colors) of your store can be set within the [Theme settings](https://help.shopify.com/en/manual/online-store/themes/theme-structure/theme-settings). It helps group elements and their respective colors, making your store visually appealing and cohesive. You can apply the color schemes to different sections throughout your online store with a color scheme picker.&#x20;

</Hint>

![image](https://docs-assets.foxecom.app/sleek-theme/image_DVlTg3Qu.png)

#### Text

Use the provided text field to add a suitable **Heading**.

* Leave it blank if you do not want to display it

<Hint type="info">

**Note**: Use a specific placeholder format `[imgX]` where you want the image to appear. X is the image index. For example: `[img1]` will be replaced by the first image block.

</Hint>

You can also change the **Heading size** to:

* Heading xs
* Heading sm
* Heading md
* Heading lg
* Heading xl
* Heading 2xl
* Display md
* Display lg
* Display xl

And the **Text alignment** to Left/ Center/ Right to make the content look balanced on your website.

![image](https://docs-assets.foxecom.app/sleek-theme/image_2pAfvOOd.png)

### Block settings

You can add multiple **Image** blocks to **Highlight text with image** section.

![image](https://docs-assets.foxecom.app/sleek-theme/image_AR1BzU4M.png)

Add an **Image** that you prefer to display on the Highlight text with image section.

Provide that image with a link that directs customers to the target page specified in the **Image link** field.&#x20;

![image](https://docs-assets.foxecom.app/sleek-theme/image_zVYtigmS.png)

![image](https://docs-assets.foxecom.app/sleek-theme/image_pWJLZXoI.png)

Moreover, you can also adjust the width of the image on both mobile and desktop.

* **Image width**: 50px - 250px
* **Image width mobile**: 50px - 150px

![image](https://docs-assets.foxecom.app/sleek-theme/image_tFCBi218.png)