> For the complete documentation index, see [llms.txt](https://mpithemes.gitbook.io/unicorn-shopify-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-promotions/content-button-on-image.md).

# Content, Button on image

{% hint style="success" %}
**Tip:** To add a block, the "[<mark style="color:blue;">Featured promotions</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-promotions)" section is required. Press **"Add block"** and choose the one in **Theme Blocks**. The following block can be added numerous times.

Drag and drop the block to the desired placement in a section.
{% endhint %}

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

Once an image is selected, it can be linked to pages/ collections/ products. Choose the destination in the **"Link"** source selector.

### Media

**Image**

Press **"Select"** to upload the necessary image for both desktop and mobile. The recommended image ratio is two-to-one (width-to-height).

{% hint style="warning" %}
**Note!** The "Image" settings described below will only apply to the desktop mode.
{% endhint %}

Turn on the **"Enable"** option to display the related settings.

Adjust the transparency of an image color overlay using the **"Opacity"** scale, which ranges from 0 to 100%.

In the **"Type"** picker, select one of the options: "Background" or "Gradient".

By selecting the **"Background"** option, change the image overlay color by specifying it in the corresponding picker. By default, the color is set to transparent.

Press the **"Gradient"** option to display the related color picker. Then, apply an image overlay color using the gradient vector. Read details on how to use the option [here](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).

If you need to change the **"Image overlay background"**, select the color from the color picker. By default, the color is set to transparent. The option works with the enabled "Add overlay opacity", "Zoom in, add overlay opacity", or "Zoom out, add overlay opacity" in the **"**[<mark style="color:blue;">Animation</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-promotions#animation)**"** subsection.

Press **"Image overlay gradient"** to apply the gradient vector. Read details on how to use the option [<mark style="color:blue;">here</mark>](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#image).

Adjust the transparency of an image overlay using the **"Image overlay opacity"** scale from 0 to 100%.

### Button

Change the internal button text in the **"Label"** field. Leave the field blank to hide the button.

To redirect customers to the desired page, edit the **"Link"**. Use the link from the source selector, or paste the one if you use an external link.

Use the **"Style"** drop-down to change the button's appearance in the sections. The block includes three available styles that can be applied: "Primary", "Secondary", or "Link style". Each button style can be viewed on the following [help page](https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections#buttons).

Use the **"Color"** picker to change the button background color for the "Primary" style. For the "Secondary" style, colored text and a border will be added to the button. If you used the "Link style", the color will be applied to the text link.

### Mobile heading

Use the **"Heading"** placeholder to insert a block's title on mobile instead of the button title applied for the desktop, which will be displayed by default. The title is pre-designed to be placed on the top left of the banner on mobile view.

The title's font size can be changed to "Large", "Medium", or "Small" in the **"Heading size"** drop-down.

If you need to change a title color, use the **"Heading"** picker.

### Content box

The **"Position"** option helps to place the text box in a desired position: "Top", "Center", or "Bottom". Each of the options contains the settings, such as "Left", "Center", and Right". Select the desired option by operating the drop-down that best fits your needs.

Here is an example of how the block might be displayed in the section:

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


---

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

```
GET https://mpithemes.gitbook.io/unicorn-shopify-theme/dynamic-theme-sections/featured-promotions/content-button-on-image.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.