# Mixed image cards

![image](https://docs-assets.foxecom.app/zest-theme/Fox-BG%20Light%20(47)_5B6PfwTN.jpg)

<Hint type="info">

This section is available on **Zest version 9.0.0 and later**. See our [Changelog](/zest-theme/changelog)

</Hint>

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 type="success">

**Steps:**

1. In the theme editor **(Customize)** > click **Add section**
2. Select **Mixed image cards**.
3. Make necessary changes.
4. **Save** the settings.

</Hint>

![image](https://docs-assets.foxecom.app/zest-theme/image_KUxexlpa.png)

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

![image](https://docs-assets.foxecom.app/zest-theme/image_00MiMx7k.png)

</Tab>

<Tab title="Middle">

![image](https://docs-assets.foxecom.app/zest-theme/image_0DjQvbAg.png)

</Tab>

<Tab title="Bottom">

![image](https://docs-assets.foxecom.app/zest-theme/image_6AvH9m3e.png)

</Tab>
</Tabs>

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

![image](https://docs-assets.foxecom.app/zest-theme/image_KSVe8Txv.png)

<Hint type="success">

In the block settings, **upload/select an image**, set the **Image ratio**, and enter the **content** for it.

</Hint>

</Tab>

<Tab title="Image card block">

![image](https://docs-assets.foxecom.app/zest-theme/image_Uojt3f2e.png)

<Hint type="success">

In the block settings:

* Select your desired **card layout** and **text color.** [Examples of Image card's layouts:](#examples-of-image-card-s-layouts)
* 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)

</Hint>

</Tab>
</Tabs>

#### Examples of Image card's **layouts**:

<Tabs>
<Tab title="Design 1">

![image](https://docs-assets.foxecom.app/zest-theme/image_gzNq4mQg.png)

</Tab>

<Tab title="Design 2">

![image](https://docs-assets.foxecom.app/zest-theme/image_1GcTWMp8.png)

</Tab>

<Tab title="Design 3">

![image](https://docs-assets.foxecom.app/zest-theme/image_fO134zlx.png)

</Tab>

<Tab title="Design 4">

![image](https://docs-assets.foxecom.app/zest-theme/image_EKRDymjE.png)

</Tab>

<Tab title="Design 5">

![image](https://docs-assets.foxecom.app/zest-theme/image_daHknyL3.png)

</Tab>

<Tab title="Design 6">

![image](https://docs-assets.foxecom.app/zest-theme/image_A89FCbOq.png)

</Tab>

<Tab title="Design 7">

![image](https://docs-assets.foxecom.app/zest-theme/image_aI7FRGj3.png)

</Tab>

<Tab title="Design 8">

![image](https://docs-assets.foxecom.app/zest-theme/image_PzIuAZ5T.png)

</Tab>
</Tabs>

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

<div>![image](https://docs-assets.foxecom.app/zest-theme/image_5o6xepzz.png) ![image](https://docs-assets.foxecom.app/zest-theme/image_kRx9xxnw.png)</div>