Layered images

Create a stunning Layered images section for a dynamic scrolling effect

This section is available on ✨ Zest version 9.0.0 onwards. See our Changelog

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.

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

How to add a Layered images section to your Shopify store

Steps:

1. In the theme editor (Customize) > click Add section

2. Select Layered images.

3. Make necessary changes.

4. Save the settings.

How to edit a Layered images section

Section settings

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.

Block settings

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

You can choose a featured Image for the layered image.

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