Cascading product

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

#How to create a Cascading product

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