Cascading product

Learn how to display products from a selected collection with cascading layout in an engaging and attractive design.

Explore FoxEcom Affiliate Program now ✨

Cascading product section can be used to showcase products from a collection in a cascade layout.

How to create a Cascading product

Steps:

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

2. Select Cascading product.

3. Save.

Section settings

General

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

You can also add a preferable Collection and adjust the number of shown products - Products to show (between 2 and 12).

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 product 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 (%).