# Media with text

This section allows you to highlight key messages alongside visual content, creating an engaging and informative section on your store pages.

<figure><img src="/files/W0Ik2pArMrGbXd0ODxnZ" 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 **Media with text** section. The section will now be added to your page, ready for customization.
{% endstep %}
{% endstepper %}

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

### **2, Section settings:**

The section settings allow you to configure the media

* **First mage:** Upload or select the first image displayed in the section.
* **Second image:** Optionally upload a second image, shown as a decorative element on the first image.
* **Video:** Upload a video directly to the store’s files for use instead of images. Great for showcasing products or behind-the-scenes footage.
* **Media height:** Adjust the vertical space the media occupies:
  * **Adapt to first media size:** Retains original image/video height.
  * **Small / Medium / Large:** Predefined fixed heights for consistent layout.
  * **Adapt to content height:** Auto-adjusts media height to match content block height (If content height is smaller than min-height, media height equals min-height).
* **Desktop media width:** Adjusts the horizontal width of the media block relative to the section: *Small, Medium, Large*

{% hint style="info" %}
**Note:** Media is automatically optimized for mobile — ensures performance and responsiveness on smaller screens.
{% endhint %}

* **Desktop media placement:** Determines whether media appears on the left or right of the content on desktop.
* **Desktop content position:** Aligns the vertical position of the text content relative to the media block: Top, Middle or Bottom.
* **Desktop content alignment:** Aligns text horizontally within the content area: Left, Center or Right.
* **Add space between media and text:** If enabled, a visible gap is added between the media and the text block—improving clarity and layout balance.
* **Mobile content alignment**: Sets the alignment of the text block on mobile devices: Left, Center or Right.

### **3, Block settings**

The Media with text section offers several blocks to customize content presentation, each with specific settings.

* **Heading block:** Add a heading for the Image with text section. Choose a font from the theme’s default font or options in the Shopify font library. Select from **Small**, **Medium**, **Large**, **Extra large**, or **Extra extra large** for heading size. Emphasize keywords in the heading with: Change the color of highlighted text, **or** Underline selected phrases for emphasis.
* **Text block:** Add a description to support the heading. Typically used for providing more context or details.
* **Caption block:** Add a caption for additional context or emphasis. Choose from **Subtitle** or **Uppercase** for caption style.
* **Collapsible content block:** Add a Q\&A format block with collapsible content. Select an icon to appear beside each question. When clicked, the question expands to reveal the answer.
* **Image block:** Select an additional image to display within the section. Adjust the image size from **30px** to **200px**.
* **Countdown timer block:** Add a countdown timer to create urgency for special promotions.
  * Set a specific date and time for the timer to count down to.&#x20;
  * **Enable "Hide when countdown reaches zero**: Once the countdown ends, the timer will automatically disappear
  * Choose whether or not to add a border around the timer.
* **Button block:** Enter a label for the button. If left blank, the button won’t display. Assign a URL link to the button. Choose from available button styles: **Solid, Outline, Text.** And use the provided options to customize the button color.
* **Icon block:** Create a block with text and an icon. The text appears to the left of the icon.
* **Feature columns block:** Each block consists of settings for two features displayed side-by-side. The layout is a **50-50 split** to fit both feature columns. Each feature includes:
  * **Icon** next to/above the heading. Toggle icon visibility on or off based on preference.
  * **Description** below the heading.
* **Divider block:** is used to visually separate content within the section, creating a clear structure and improving content readability. You can adjust the **line opacity** (0–100%) to control its visibility, set the **width** (10–100%) to define how long the divider appears, and align it **left, center, or right** within the section. Additionally, under **Block spacing**, the **bottom padding** (0–50px) lets you control the space between the divider and the block below it.


---

# 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/media-with-text.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.