> For the complete documentation index, see [llms.txt](https://uxsmart.gitbook.io/velare/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/offers-popup/theme-block-image-with-text.md).

# Theme block - Image with text

**Image with text** is the block that makes up one offer inside the [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md). It pairs a featured image with a heading, subheading, description, and a call to action button, so each offer explains itself and gives shoppers somewhere to click. Add one block per promotion you want to show: a featured collection, a seasonal campaign, a bundle, or a piece of your brand story.

Everything a shopper sees inside the offers popup, apart from the popup heading, comes from these blocks.

### Where to find it <a href="#where-to-find-it" id="where-to-find-it"></a>

{% hint style="success" %}
**Steps:**

1. Go to **Online Store > Themes > Customize**.
2. In the left sidebar, open the **Overlay** group and click **Offers popup**.
3. Add an **Image with text** block, or click an existing one to edit it.
4. Upload the image, write the text, then set the button label and link.
   {% endhint %}

*Result:* the block appears as one offer in the popup, following the column gap, image ratio, and alignment set on the section.

### General settings <a href="#general-settings" id="general-settings"></a>

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

| Settings         | Description                                                                                                                                               |
| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Color scheme** | The background and text colors this offer uses. The schemes come from **Theme settings > Colors**, so editing one there restyles every offer built on it. |
| **Image**        | The picture at the top of the offer, sharpest at ***360px x 200px***. Show the product or collection the offer is actually about.                         |

### Block settings <a href="#block-settings" id="block-settings"></a>

#### Heading, Subheading, Description <a href="#heading-subheading-description" id="heading-subheading-description"></a>

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

| Setting                              | Description                                                                                                                                                                                                                                             |
| ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Heading, Subheading, Description** | The three lines of wording in the offer: the big line shoppers read first, a short line above it for context, and a sentence below spelling out the deal.                                                                                               |
| **Width**                            | <p>How much horizontal room the wording is allowed to take inside the offer.</p><ul><li><strong>Fit</strong>: the text stays only as wide as the words themselves.</li><li><strong>Fill</strong>: the text spans the full width of the offer.</li></ul> |
| **Typography - Preset**              | The font, size, and weight of the wording, taken from the presets in **Theme settings > Typography**. Choose a smaller preset when several offers sit side by side.                                                                                     |
| **Background**                       | Puts a solid panel behind the wording. Turn it on when the text sits over a busy picture and becomes hard to read.                                                                                                                                      |
| **Background color**                 | <p>The color of that panel. Pick one with enough contrast against the wording, or the offer becomes harder to read than it was without it.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                           |
| **Corner radius**                    | <p>How rounded the corners of that panel look. Higher values give a softer shape, 0 leaves the corners square.</p><p><em>Note: only appears when <strong>Background</strong> is enabled.</em></p>                                                       |
| **Padding top/bottom**               | Breathing room above and below the wording. Increase it when the text presses against the picture or the button.                                                                                                                                        |

#### Button <a href="#button" id="button"></a>

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

| Setting                  | Description                                                                                                                                                                                                                                             |
| ------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Button label**         | The words shoppers click. Leave it empty and no button is shown at all, which leaves the offer with nothing to act on.                                                                                                                                  |
| **Button link**          | Where that click takes shoppers, usually the collection or page the offer is about.                                                                                                                                                                     |
| **Button type**          | <p>How much the button stands out from the offer around it.</p><ul><li><strong>Fill</strong>: a solid block of color, for the offer you most want clicked.</li><li><strong>Outline</strong>: a lighter bordered style, for supporting offers.</li></ul> |
| **Open link in new tab** | Loads the destination in a second browser tab, so the store stays open behind it. Useful when the offer points to a page outside your store.                                                                                                            |
| **Spacing bottom**       | Space left under the button. Increase it when the button sits too close to whatever follows it.                                                                                                                                                         |

### What changes on the storefront <a href="#what-changes" id="what-changes"></a>

* Each block becomes one offer card inside the popup that opens from the offer icon in the header.
* An empty **Button label** hides the button, which leaves the offer with nothing to click, so fill it in whenever the offer has a destination.
* Blocks share the section level image ratio, so images of different shapes are still displayed consistently.

### Related pages <a href="#related-pages" id="related-pages"></a>

* [Offers popup](/velare/customize-your-pages/overlay-group/offers-popup.md): the section this block belongs to
* [Colors](/velare/set-up-your-store/colors.md) and [Typography](/velare/set-up-your-store/typography.md): where the schemes and presets come from
* [Header](/velare/set-up-your-store/header-group/header.md): the **Show offer** setting that displays the icon


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://uxsmart.gitbook.io/velare/customize-your-pages/overlay-group/offers-popup/theme-block-image-with-text.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.