# Text with image
{% hint style="info" %}
This feature was added in v5.0.0 on April 12, 2022. See our [changelog](https://help.fluorescent.co/lorenza/readme/changelog) and [theme update guide](https://help.fluorescent.co/lorenza/readme/theme-updates) to learn more.
{% endhint %}
Add a custom feature block to tell customers more about your product.
## **Set up block**
Add the **Text with image feature** and choose which side of the product page to display it.
{% hint style="warning" %}
Editing a template changes all pages that use that template. To edit specific pages, you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [use metafields and dynamic sources](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}
STEPS
In your theme editor (**Customize**):
1. Choose the **Products** template you want to edit.
2. Under the **Product overview** section, click **(+) Add block** and select **Text image with feature**.
3. Click the new block ("Feature") to open the settings.
4. Choose which column to display the feature. Either **Left** or **Right**.
> Choose **Left** for a larger block below the product media.
## **Add feature image**
Add an **Image** to use as the background container of the feature content. Change the **Feature height** to match the content or expand to the height of the uploaded image.
STEPS
In your theme editor (**Customize**):
1. Click on the section to open the settings.
2. Click **Select image** to upload or choose an image to use as the background container of the feature.
3. Select the **Feature height** to make the feature match the **Content height** (the height of the **Heading** and **Text**) or the **Image height**.
4. (*Optional*). If you selected **Image height**, select an **Image aspect ratio** to change the shape of the image and feature. Either **Square**, **Landscape**, or **Portrait**.
> The default **Natural** setting will display the original orientation of the image.
5. (*Optional*). Select a **Media fit** to make the image **Cover** the entire block or to **Contain** the image within a rectangular color container.
> If you select **Contain**, you can change the \[background color]\(contrast colors).
6. If you set the **Media fit** to **Cover**, change the **Image focal point** to choose what part of the image should remain centered when cropped.
> This option lets you choose what part of the image should always remain visible.
7. Click **Save**.
## **Add text content**
Add a **Heading** and **Text**, and adjust their alignment and width.
STEPS
In your theme editor (**Customize**):
1. Click on the **Text with image feature** to open the settings.
2. Change the **Heading** text.
> We recommend a short title with 2 - 3 words.
> To show different headings on different product pages,you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
3. Change the **Text** content to tell customers more about your product or store.
> To show different text on different product pages,you can [create new templates](https://help.fluorescent.co/lorenza/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/lorenza/general/adapting-your-theme/dynamic-content-with-metafields).
4. Select the **Text position** of the **Heading** and **Text** within the block.
5. (*Optional*). Use the **Max width of heading** to control the line breaks of the **Heading** when viewed on a full-width desktop screen.
6. (*Optional*). Use the **Max width of text** to control the line breaks of the **Text** when viewed on a full-width desktop screen.
7. Click **Save**.
## **Add button**
You can add a button to link to a page with more information.
STEPS
In your theme editor (**Customize**):
1. Click on the **Text with image feature** block to open the settings.
2. Select or enter a URL for the **Button link**.
3. (*Optional*.) Change the **Button label** text.
> The most effective button labels ask customers to do something (e.g. Get started, Join us, Shop now). To learn more, read ["What is a Call to Action?"](https://www.thebalancesmb.com/call-to-action-1794380).
4. Click **Save**.
## **Change block colors**
Change the color of every block element, including the **Background**, **Text**, **Button text**, **Button background**.
To enable an image **Overlay** color, use the **Overlay opacity** slider to change the color from transparent (**`0`**) to complete opaque (**`100`**).
Click the **Overlay gradient** option to add a color overlay that fades across a range of hues. You can choose the style, angle, position, and opacity of the gradient. See Shopify's [color gradient guide](https://help.shopify.com/en/manual/online-store/themes/theme-structure/color-scheme#gradients) to learn more.\\
***
> **Related links**
>
> [Product template](https://help.fluorescent.co/lorenza/product-pages/product-template)\
> [Text block](https://help.fluorescent.co/lorenza/product-pages/product-page-blocks/text-block)\
> [Text with video block](https://help.fluorescent.co/lorenza/product-pages/product-page-blocks/text-with-video)