> 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/layered-images.md).

# Layered images

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

{% hint style="info" %}
This section is available on ✨ **Zest version 9.0.0 onwards**. See our [Changelog](/zest-theme/changelog.md)
{% endhint %}

Enhance your website with the **Layered Images** section, a visually engaging feature that creates a smooth, overlapping transition as users scroll. This effect adds movement, depth, and storytelling power to your brand’s imagery, making your website feel more immersive and high-end.

{% hint style="info" %}
Instead of images staying fixed in their place, this section allows them to **collapse into each other**, creating a seamless transition. As the user scrolls, one image subtly layers over the previous one, maintaining a smooth and immersive browsing experience. This effect is perfect for:

* Telling a brand story through images
* Showcasing multiple product shots in an elegant way
* Creating a visually engaging landing page
  {% endhint %}

## How to add a Layered images **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 **Layered images**.
3. Make necessary changes.
4. **Save** the settings.
   {% endhint %}

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

## How to edit a Layered images **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 <a href="#section-settings" id="section-settings"></a>

#### Image settings

Select the **Image ratio** for the layered images and control how your text and other design elements are arranged around the images by using the **Vertical alignment** setting.

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

### Block settings

In the **Layered images** section, you can add up to 5 blocks.

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

You can choose a featured **Image** for the layered image.

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

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

Use the provided text fields to add a suitable **Heading, Subheading,** and **Description**. Leave them blank if you do not want to display them.

<div><figure><img src="/files/yfxoszTVQeiwTcnKBe4R" alt=""><figcaption></figcaption></figure> <figure><img src="/files/OxNhz5LBiNkvLeAw5yps" alt=""><figcaption></figcaption></figure></div>