Appearance
Cascading product list
This guide describes setting up the Cascading product list section.
Use the section to display product media (items) on a store page, for a selection of products, arranged in a cascade layout. A cascade layout arranges items in columns. Inside a column, the items follow one after another to create a succession of items on a store page.
In the previous video, a Cascading product list section is displayed on a store's home page. On the right, in the section settings, the checkbox Feature full width products is set to on. This setting displays some of the product tiles (images) at full width inside the section.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Set up a cascading product list section
To set up a Cascading product list section:
Go to Customize theme.
In Theme editor, at the top of the page, use the dropdown to select a page that contains a Cascading product list section.
Note
The section can be added into any page, except Checkout and Giftcard pages. To add the section into the current page, select Add section > Cascading product list. Refer to Shopify help: Add a section.
From the side menu, select Cascading product list.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Heading | In the Heading box, enter text to display as a heading (title) inside the section. |
| Heading > Insert dynamic source | If available, to display (heading) text from a dynamic source, if available, select the icon Insert dynamic source beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Overlay heading | Select the Overlay heading checkbox to turn on/off overlaying the section's content with the section's heading text. The overlay remains in the section ("sticky") as the cascading product list scrolls. |
| Products | Use the following Products selector options to set up a product inside the section.
|
| Products > Connect dynamic source | To display products from a dynamic source, if available, select the icon Connect dynamic source beside the Products selector, and then choose a metafield to add. Refer to Shopify help: Metafields. |
| Feature full width products | Select the checkbox Feature full width products to turn on/off displaying (product) tiles at full width inside the section. With this setting off, a mix of half width and full width tiles are displayed. |
| Desktop layout | Select the Desktop layout radio buttons to set a layout style for the section's cascading content area. The options are Single column or Two columns. This setting applies to desktop display devices. |
| First product position | Select the First product position radio buttons to specify a starting position for (product) tiles inside the section's cascading content area. The options are: (first block in the) Top left or Top right |
| Enable cascade layout on mobile | Select the checkbox Enable cascade layout on mobile to show/hide the section's cascading content area on mobile displays. |
| Vertical space between items | Select the dropdown Vertical space between items to set a size for the vertical space between (product) tiles in the section's cascading content area. The options are: Same as theme settings, Small, Medium, and Large. Setup defaults for this setting in Theme Settings > Cascading content. |
| Media > Variation between media sizes | Select the dropdown Variation between media sizes to make the sizes of (product) tiles more or less varied, inside the section's cascading content area. The options are: Same as theme settings, None, Low, Medium, and High (amount of variation). If set to None, all tiles are displayed at the same size. Setup defaults for this setting in Theme Settings > Cascading content. |
| Media > Sequence | Adjust the Sequence slider to set how (product) tiles are resized, inside the section's cascading content area. In the section's cascading content area, tiles are resized according to a sequence. Adjust the slider between 1 and 5 to change the sequence. |
| Color > Color scheme | Use the Color scheme options to select a color scheme for the section. Refer to Colors. |
| Color > Disable transition | Select the checkbox Disable transition to turn on/off overriding the color transitions set in the section's theme settings. Setup defaults for this setting in Theme Settings > Colors > Transitions. |
| Spacing > Remove top padding | Select the checkbox Remove top padding to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding. |
| Spacing > Remove bottom padding | Select the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding. |
| Theme settings | If available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu. |
| Custom CSS | Select Custom CSS. In the box, enter custom CSS styles to apply only to the current section. Refer to Shopify help: Add custom CSS. To apply custom styles to your entire online store, refer to Theme settings > Custom CSS. |
| Remove section | Select Remove section to delete the section from the current page. |