# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.fluorescent.co/cornerstone/product-pages/product-page-blocks/image-with-text-block.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.