# Image with text block

On your product page, add a custom feature block to tell customers more about your product.

<figure><img src="https://475958657-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fyt3Wwaqhge0XvrXmVj7D%2Fuploads%2FcbwKJchhVBzhzRMRUED4%2Fimage-text-block.png?alt=media&#x26;token=52997ce0-eb3a-4a0d-a572-b20904e56c95" alt=""><figcaption></figcaption></figure>

## **Add image with text block**

***

Under **Product overview**, click **(+) Add block** and select **Image with text**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks. Click the block to start adding content.

{% 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/cornerstone/general/editing-themes/using-templates#create-and-assign-multiple-templates) or [insert dynamic content with metafields](https://help.fluorescent.co/cornerstone/general/adapting-your-theme/dynamic-content-with-metafields).
{% endhint %}

<details>

<summary><mark style="color:blue;">STEPS</mark></summary>

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 **Image with text**.
3. Click the new block 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.

</details>

## Settings reference

Click on the **Image with text** block to find the following settings.

<table><thead><tr><th width="207">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Column</mark></td><td>Display the block in either the <strong>Right column</strong> (in the product form) or the <strong>Left column</strong> (beneath the product media).</td></tr><tr><td><mark style="color:blue;">Add box</mark></td><td>Display the block within a block with a background color.</td></tr><tr><td><mark style="color:blue;">Vertical alignment</mark></td><td>Display the headings and buttons as <strong>Left</strong>, <strong>Center</strong>, or <strong>Right</strong> aligned.</td></tr></tbody></table>

#### Image

<table><thead><tr><th width="207">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Image</mark></td><td>Select or upload an image. There are no required image dimensions. We recommend a minimum width or height of 2500px.</td></tr><tr><td><mark style="color:blue;">Image size</mark></td><td>Set the pixel width of images for desktop screens: between 50 and 900 pixels.</td></tr><tr><td><mark style="color:blue;">Mobile image size</mark></td><td>Set the pixel width of images for mobile screens: between 50 and 700 pixels.</td></tr><tr><td><mark style="color:blue;">Image position</mark></td><td>Position the image to the Left, Center, or Right of the section. This setting applies if the image width is smaller than the width of the section.</td></tr></tbody></table>

#### Text

<table><thead><tr><th width="199">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Accent</mark></td><td>Add text to show a small heading above the main section heading.</td></tr><tr><td><mark style="color:blue;">Show accent divider</mark></td><td>Show a separator line under the accent heading.</td></tr><tr><td><mark style="color:blue;">Accent divider color</mark></td><td>Choose a custom color to override the accent color in the theme settings.</td></tr><tr><td><mark style="color:blue;">Heading</mark></td><td>Add text to show a main heading above the text.</td></tr><tr><td><mark style="color:blue;">Heading size</mark></td><td>Change the font size of the heading from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Text</mark></td><td>Add text to show a subheading below the main heading.</td></tr><tr><td><mark style="color:blue;">Text size</mark></td><td>Change the font size of the text from small (1) to large (8).</td></tr><tr><td><mark style="color:blue;">Link</mark></td><td>Select a page or paste a URL for a text link.</td></tr><tr><td><mark style="color:blue;">Link text</mark></td><td>Add text for the link label.</td></tr></tbody></table>

#### Collapsible row

<table><thead><tr><th width="188">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Display as collapsible row</mark></td><td>Show an expandable title that reveals the text when clicked.</td></tr><tr><td><mark style="color:blue;">Expand by default</mark></td><td>Display the collapsible row as open with the text already revealed.</td></tr></tbody></table>

<br>

***

> **Related links**
>
> [Product template](https://help.fluorescent.co/cornerstone/product-pages/product-template)\
> [Product page blocks](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks)\
> [Image block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/image-block)\
> [Text block](https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/text-block)