# 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:
.jpg?alt=media&token=b49db993-ff79-49eb-a620-30fa2afda44a)
