# Text with images

With modern, creative layouts, this section is ideal for highlighting specific products or services while enhancing the visual appeal of your promotions.

<figure><img src="/files/ikD9sWk398H2Qb1VRTP5" alt=""><figcaption></figcaption></figure>

### **1, How to add section in theme editor:**

{% stepper %}
{% step %}
In your theme editor (**Customize**), scroll to the bottom of the template and select **Add section**.
{% endstep %}

{% step %}
In the list, locate and select **Text with images** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

<figure><img src="/files/L1y0jUYGCZJrAwJqYEeq" alt=""><figcaption></figcaption></figure>

### 2, Section settings

* **General settings:**
  * **Desktop content alignment:** Align the section’s text content horizontally on the desktop: **Left, Center or Right.**
  * **Desktop content width:** Control the width of the text block. Content width automatically adjusts for mobile screens.
* **Text settings:**
  * **Subheading**: Add a subheading to introduce the section.
  * **Heading**: Enter the main title for the section.
  * **Heading size**: Customize the font size of the heading.
* **Image size**: Adjust the relative size of the image within the section from 50px to 150px.
* **Image style**: Define the shape of the image.&#x20;

{% tabs %}
{% tab title="Square" %}
Standard rectangular image.&#x20;
{% endtab %}

{% tab title="Slightly rounded" %}
Adds a soft border radius to the image.&#x20;

*<mark style="color:red;">(Screenshot)</mark>*
{% endtab %}

{% tab title="Circle" %}
Displays the image as a perfect circle.

*<mark style="color:red;">(Screenshot)</mark>*
{% endtab %}
{% endtabs %}

* **Image hover effect:** Choose an interaction effect when users hover over the image:&#x20;
  * **None**: No hover effect.&#x20;
  * **Zoom in**: Enlarges the image slightly on hover.&#x20;
  * **Show tooltip**: Adds a circular hover effect and displays a tooltip beside the image.
* **Mobile layout:**&#x20;
  * **Mobile content alignment**: Align the section’s content horizontally on mobile screens: Left, Center or Right.

### **3, Block settings:**

The **Text with images section** includes settings that are consistent across its **Image block** and **Product block**, allowing for a cohesive design while offering flexibility to customize each block. Below is a detailed explanation of these shared settings, along with their functionalities:

* **Common settings across blocks**
  * **Image position:** Adjust where the image or product appears inline within the Heading content (1 ➝ 30). Use the slider to define the exact word placement where the image will appear. For instance, if set to **3**, the image will appear after the third word in the text block. Use this setting to break up lengthy text or emphasize specific parts of your message. Ensure the positioning feels natural and enhances readability.
  * **Tooltip settings:** Tooltips provide additional context or information to images when users hover over them. This feature is available when the **Image hover effect** is set to "Show tooltip". **Tooltip settings include:**&#x20;
    * **Label:** Enter the text that will appear in the tooltip. Example: For a product image, the tooltip could display *"Click to learn more"* or *"See full details."* If the label field is left blank, the tooltip will not display.
    * **Tooltip background:** Select the background color for the tooltip. Choose a contrasting color to ensure the tooltip text is legible against the background.
    * **Tooltip label:** Pick the color of the text within the tooltip. You can use brand colors for consistency or neutral tones for readability.
* **Unique settings for the image block:**
  * Upload an image to display within the content.
  * Assign a clickable link to the image to redirect users to a specific page.
* **Unique settings for the product block**
  * Select a product from your store to feature within the content. The product image is automatically used as the inline image.
  * Upload a custom image to override the product’s default image.
  * Activate a **Quick view** feature, allowing users to see product details in a popup without leaving the current page.


---

# 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.byinspiredlabs.com/section/text-with-images.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.