Cascading collection

Learn how to display product tiles from a selected collection with a cascade layout.

Explore FoxEcom Affiliate Program now ✨

The cascading collection displays a short list of collections using the cascading layout to catch visitors' attention.

This layout gives the flexibility to create unique designs for the collection list.

Steps:

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

2. Select Cascading collection.

3. Save.

Section settings

General

Adjust the Container type (Default/Full width/ Use container box) and Color scheme for this section.

Section header

Use the provided text fields to add a suitable Heading. Leave this field blank if you do not want to display it.

Adjust the Heading size (Medium/ Large) and Text alignment (Left/ Center) to make the content look reasonable on your page.

You can also make the heading overlay and sticky within the section by enabling the Overlay heading checkbox.

Grid settings

Determine the Vertical space between items (Small/ Medium/ Large) and the desktop column gap (50px - 250px) between them.

You can also adjust the Sequence (1 - 5) of collection items and Variation between media sizes (None/ Low/ Medium/ High) to create unique layouts for the section.

Animation

You can Enable parallax animation, which makes the small cascade media scroll faster than the large one.

Adjust the level of parallax animation by changing the Parallax intensity range (%).

Block settings

Select the Collection you want to attach and an Image for it. You can leave the image setting blank to use the collection's featured image.

Insert the custom content you want for the Collection title, or leave it blank to display the collection title.