Appearance
Cascading collection
This guide describes setting up the Cascading collection section.
Use the section to display items (products) from a collection, 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 collection section is displayed on a store's home page. As the page scrolls up/down, the collection items (product tiles) are displayed one after another. This creates a succession of items inside the section's cascading content area.
For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.
Set up a cascading collection section
To set up a Cascading collection 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 collection section. For example, select the Home page.
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 collection. Refer to Shopify help: Add a section.
From the side menu, select Cascading collection.
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. |
| Collection | Use the following Collection selector options to set up a collection inside the section.
|
| Number of products | Adjust the slider Number of products to set the total number of items (products) to display inside the section. The slider values range from 2 to 24 products. |
| Show product image only | Select the Show product image only checkbox to turn on/off "product image only" mode. With this setting enabled, only the product image (tile) is displayed for each collection item inside the section. |
| Layout > 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. |
| Layout > 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. |
| Layout > Desktop layout | Use the Desktop layout options to set a layout style for the section's cascading content area. The options are One column or Two columns. This setting applies to desktop display devices. |
| Cascade effect > Level of media size variation | Adjust the Level of media size variation slider to apply more or less varied sizes to the media items displayed inside a cascading section. The slider ranges from 0 to 4. Select 0 for no size variation, to display all media at the same size. Select 4 to maximize the size variation. |
| Cascade effect > Sequence | Adjust the Sequence slider to set how media items (tiles) are resized inside a cascading section. Inside a cascading section, tiles are resized according to a pattern or "sequence". Adjust the slider between 1 and 5 to specify a sequence. |
| Cascade effect > Alignment variation | Adjust the Alignment variation slider to use more or less varied alignments to display media items inside a cascading section. The slider ranges from 1 to 7. Select 1 for minimally varied alignments. Select 4 for maximum alignment variation. |
| Cascade effect > Vertical space between items | Adjust the Vertical space between items slider to set the amount of vertical space displayed between items inside a cascading section. The slider ranges from 0.5 to 2. |
| Cascade effect > Start position | Use the Start position options to specify a starting position for displaying the first item in a cascade layout. The options are Top left and Top right. |
| Cascade effect > Use global settings | Select the Use global settings checkbox to turn on/off "global settings" mode. Enabling this option overrides all cascade effect settings you specified inside the section, and applies the "global" cascade effect settings you specified in Theme settings > Cascading content. |
| 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 Remove top padding checkbox to add/remove the spacing (padding) that's displayed above the section. Refer to W3 Schools: CSS Padding. |
| Spacing > Remove bottom padding | Select the Remove bottom padding checkbox to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding. |
| Overlay > 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 content scrolls. |
| Overlay > Heading mobile font size scale | Use the Heading mobile font size scale slider to specify a size for overlaid heading text inside the section. This setting applies to mobile display devices. The slider ranges from -2 to 4. To use this setting, enable the section's Overlay heading option. |
| Overlay > Heading desktop font size scale | Use the Heading desktop font size scale slider to specify a size for overlaid heading text inside the section. This setting applies to desktop display devices. The slider ranges from -2 to 10. To use this setting, enable the section's Overlay heading option. |
| Overlay > Show "View all" | Select the Show "View all" checkbox to show/hide a "View all" button beside overlaid heading text inside the section. The button links to the collection displayed inside the section. To use this setting, enable the section's Overlay heading option. |
| Overlay > "View all" style | Use the "View all" style options to apply a Solid or Border button style to the section's "View all" button. To use this setting, enable the section's Show "View all"** option. This setting defaults to Solid, if the section's Blend mode option is not set to Normal. |
| Overlay > Blend mode | Use the Blend mode options to specify how the section's overlay heading text blends with the colors beneath it. Refer to Mozilla developer documentation: Mix blend mode examples. The options are Normal, Difference, Exclusion, Overlay, Soft light. Some blend modes work better when the text color is dark, others when it is light |
| Overlay > Blend mode color scheme | Use the Blend mode color scheme options to select a color scheme for the section's Blend mode effect. Refer to Colors. This setting applies only when the section's Blend mode option is not set to Normal. |
| 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. |