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