> For the complete documentation index, see [llms.txt](https://foxecom.gitbook.io/zest-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://foxecom.gitbook.io/zest-theme/theme-sections/mixed-image-cards.md).

# Mixed image cards

<figure><img src="/files/5B6PfwTNV3gODDrhmbQM" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
This section is available on **Zest version 9.0.0 and later**. See our [Changelog](/zest-theme/changelog.md)
{% 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 <a href="#how-to-add-a-highlight-text-with-image-section-to-your-shopify-store" id="how-to-add-a-highlight-text-with-image-section-to-your-shopify-store"></a>

{% 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 %}

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

## How to edit a Mixed image cards **section** <a href="#how-to-edit-a-highlight-text-with-image-section" id="how-to-edit-a-highlight-text-with-image-section"></a>

### 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" %}

<figure><img src="/files/00MiMx7ky05ipibyW7FV" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Middle" %}

<figure><img src="/files/0DjQvbAgEUA4mujecrTj" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Bottom" %}

<figure><img src="/files/6AvH9m3e0hAkj9XJPSM9" alt=""><figcaption></figcaption></figure>
{% 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" %}

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

{% 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" %}

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

{% 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" %}

<figure><img src="/files/gzNq4mQgFNjiij64rqK5" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 2" %}

<figure><img src="/files/1GcTWMp8M09v1NhjmHsD" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 3" %}

<figure><img src="/files/fO134zlxrA8kruhVEVik" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 4" %}

<figure><img src="/files/EKRDymjEC2dNEqJaOYgm" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 5" %}

<figure><img src="/files/daHknyL3KPgr1gJXHRqz" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 6" %}

<figure><img src="/files/A89FCbOqLSoCBtTY05Um" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 7" %}

<figure><img src="/files/aI7FRGj3rKqTJld2hWOA" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Design 8" %}

<figure><img src="/files/PzIuAZ5TB33sv6eTFmyZ" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

#### Examples of **Vertical content padding** setting:

<div><figure><img src="/files/5o6xepzzka2GBUXNHWkf" alt=""><figcaption></figcaption></figure> <figure><img src="/files/kRx9xxnwVPstwBJChW7U" alt=""><figcaption></figcaption></figure></div>