# Mixed image cards
{% hint style="info" %}
This section is available on **Zest version 9.0.0 and later**. See our [changelog](https://docs.foxecom.com/zest-theme/changelog "mention")
{% endhint %}
Let your content shine with stunning visuals and text overlays. The **Mixed image cards** section in Zest allows you to combine multiple image-based blocks in a visually engaging layout—perfect for storytelling, seasonal promotions, or spotlighting product categories.
Use this section to:
* Create side-by-side content blocks
* Highlight seasonal campaigns, product lines, or brand messages
* Add flexible content with buttons, headings, and descriptions
## How to add a Mixed image cards **section** to your Shopify store
{% hint style="success" %}
**Steps:**
1. In the theme editor **(Customize)** > click **Add section**
2. Select **Mixed image cards**.
3. Make necessary changes.
4. **Save** the settings.
{% endhint %}
## How to edit a Mixed image cards **section**
### Section settings
Here you can add the heading, subheading and a description to the header of the section.
* **Image settings**: The **Vertical alignment** setting allows you to choose how an image is positioned within its container:
{% tabs %}
{% tab title="Top" %}
{% endtab %}
{% tab title="Middle" %}
{% endtab %}
{% tab title="Bottom" %}
{% endtab %}
{% endtabs %}
### Block settings
In the **Mixed image cards** section, you can 2 block types:
* **Image with text**: Displays an image with a heading, description, and button below the image.
* **Image card**: Shows text directly on top of the image with overlay options
{% tabs %}
{% tab title="Image with text block" %}
{% hint style="success" %}
In the block settings, **upload/select an image**, set the **Image ratio**, and enter the **content** for it.
{% endhint %}
{% endtab %}
{% tab title="Image card block" %}
{% hint style="success" %}
In the block settings:
* Select your desired **card layout** and **text color.** [#examples-of-image-cards-layouts](#examples-of-image-cards-layouts "mention")
* Upload/ select **an image**
* Set the **Image ratio** and **Image overlay opacity**
* Add the **content** that will display over the image.
* Adjust how much space the text takes on the image using the **Vertical content padding** settings.\
[#examples-of-vertical-content-padding-setting](#examples-of-vertical-content-padding-setting "mention")
{% endhint %}
{% endtab %}
{% endtabs %}
#### Examples of Image card's **layouts**:
{% tabs %}
{% tab title="Design 1" %}
{% endtab %}
{% tab title="Design 2" %}
{% endtab %}
{% tab title="Design 3" %}
{% endtab %}
{% tab title="Design 4" %}
{% endtab %}
{% tab title="Design 5" %}
{% endtab %}
{% tab title="Design 6" %}
{% endtab %}
{% tab title="Design 7" %}
{% endtab %}
{% tab title="Design 8" %}
{% endtab %}
{% endtabs %}
#### Examples of **Vertical content padding** setting:
---
# 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://docs.foxecom.com/zest-theme/theme-sections/mixed-image-cards.md?ask=
```
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.
.jpg?alt=media&token=b49db993-ff79-49eb-a620-30fa2afda44a)
