Cascading product 🔥
Learn how to display products from a selected collection with cascading layout in an engaging and attractive design.
Cascading product section can be used to showcase products from a collection in a cascade layout.
How to create a Cascading product
Steps:
In the theme editor (Customize) > click Add section.
Select Cascading product.
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 (%).
Last updated
