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


---

# 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/layered-images.md?ask=<question>
```

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.