Cascading content

This guide describes setting up the Cascading content section.

Use the section to display items (blocks of content), 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.

An example Cascading content section on a store's home page.

The previous image shows a Cascading content section on a store's home page. In the center left, part of Theme editor's section menu is displayed. The menu's First block position radio buttons are set to Top right. This setting displays the first product image tile (block) in the top right position, inside the section.

In a Cascading content section, each block of content can contain an image, text, a video, product, collection, or blog post, etc. Create unique store pages by mixing the types of content you add into the blocks.

For general guidance with modifying sections, refer to Sections overview and Shopify help: Sections and blocks.

Set up a cascading content section

To set up a Cascading content 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 content 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 content. Refer to Shopify help: Add a section.
From the side menu, select Cascading content.
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 content scrolls.
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 block position	Select the First block position radio buttons to specify a starting position for (content block) 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.
Hide left and right margin	Select the checkbox Hide left and right margin to show/hide spacing that's displayed on the left and right sides of the section. Refer to W3 Schools: CSS Margins.
Vertical space between items	Select the dropdown Vertical space between items to set a size for the vertical space between (content block) 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 (content block) 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 (content block) 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.

Configure a block within a cascading content section

A default Cascading content section contains 4 blocks. To configure a block inside the 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 content section.
From the side menu, expand the Cascading content section menu.
To configure an existing block, select the block from the side menu.
To add a new block, select Add block, choose a block to add, and then select the block you added.
Note
Inside the section, you can add, remove, show, hide, or move blocks. Refer to Configure blocks inside a section, and Shopify help: Sections and blocks.
Apply a block setting described in the Table: Cascading content blocks.

Table: Cascading content blocks

The following table describes the blocks inside the Cascading content section, and their corresponding settings.

The blocks indicated with an asterisk * are contained in a default section. To configure a block, refer to Configure a block within a cascading content section.

Block name	Block description	Block setting(s)
Image`*`	Displays an image inside the section.	Use the Image selector options to set up an image inside the block. Refer to Edit an image inside a section or block. To display an image from a dynamic source, if available, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Link (optional) box, enter a URL for the block to use, or select a link to a store page. The link opens when a store visitor selects the block. To remove a link, select the X icon inside the box. To display a link from a dynamic source, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Image with text overlay	Displays an image, overlaid with formatted text, inside the section.	Use the Image selector options to set up an image inside the block. Refer to Edit an image inside a section or block. To display an image from a dynamic source, if available, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Text box, enter text to display inside the block. The text overlays the block's image. Format the text and add links by using the Text editor pane. Io display text inside the block from a dynamic source, if available, select the icon Insert dynamic source beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the Text size radio buttons to set a size for text inside the block. Set the block's text to use the same size as Standard heading or Feature heading text. In the Link (optional) box, enter a URL for the block to use, or select a link to a store page. The link opens when a store visitor selects the block. To remove a link, select the X icon inside the box. To display a link from a dynamic source, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. Use the Text color dropdown to select a color for text inside the block. The options are: Primary text, Primary overlay text, Secondary text, Secondary overlay text, Tertiary text, Tertiary overlay text, White, and Black. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Video	Displays a video from a URL inside the section.	In the Video link box, enter a URL for the block's video. YouTube and Vimeo links are accepted. In the Alt text box, enter a brief description of the video for accessibility purposes. Refer to Shopify help: Adding alt text to media. To add alt text inside the block from a dynamic source, if available, select the icon Insert dynamic source beside the Alt text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Use the Poster image selector options to set up a custom video thumbnail image inside the block. Providing a custom thumbnail image is recommended. Otherwise, the theme fetches a thumbnail image automatically. Refer to Edit an image inside a section or block. To display a custom video thumbnail image from a dynamic source, if available, select the Connect dynamic source icon beside the Poster image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the checkbox Use high resolution image to turn on/off fetching a video thumbnail image automatically. This setting applies only to YouTube videos, if a Poster image is not set. Note that some YouTube videos do not have high resolution video thumbnail images available. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Product	Displays a product inside the section.	Use the following Product menu options to set up a product inside the block. To add a product, choose Select product, enter the name of a product into the Search box and/ or select a product from the list. Then, choose Select. To create a new product, choose Select product > Create product to open the Add product page in Shopify admin. Select the new product, and then choose Select. Refer to Shopify help: Products To replace a product, choose Change > Change product, and then select or create a product. To remove a product, select Change > Remove product. To display a product from a dynamic source, if available, select the Connect dynamic source icon beside the Product selector, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Collection	Displays a collection inside the section.	Use the following Collection menu options to set up a collection inside the block. To add a collection, choose Select collection, enter the name of a collection into the Search box and/ or select a collection from the list. Then, choose Select. To create a new collection, choose Select collection > Create collection to open the Create collection page in Shopify admin. Select the new collection, and then choose Select. Refer to Shopify help: Collections. To replace a collection, choose Change > Change collection. Enter the name of a collection into the Search box and/ or select a collection from the list. Then, choose Select. To remove a collection, select Change > Remove collection. Use the Text color dropdown to select a color for text inside the block. The options are: Primary text, Secondary text, Tertiary text, White, and Black. Select the Text size radio buttons to set a size for text inside the block. Set the block's text to use the same size as Standard heading or Feature heading text. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Blog post	Displays a blog post (article) inside the section.	Use the following Blog post selector options to set up an article inside the block. To add an article, choose Select article, enter the name of an article into the Search box and/ or select an article from the list. Then, choose Select. To create a new article, choose Select article > Create article to open the Add blog posts page in Shopify admin. Select the new article, and then choose Select. Refer to Shopify help: Blogs. To replace an article, choose Change > Change article, and then select or create an article. To remove an article, select Change > Remove article. Select the Show excerpt checkbox to show/hide a summary of the article inside the block. This setting applies only if the article has a corresponding excerpt. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Heading`*`	Displays heading (or impact) text inside the section.	In the Text box, enter text to display inside the block. To display text inside the block from a dynamic source, if available, select the icon Insert dynamic source beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the Text size radio buttons to set a size for text inside the block. Set the block's text to use the same size as Standard heading or Feature heading text. Use the Text alignment options to position text inside the block to the Left, Center, or Right. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Heading with text	Displays (heading or impact) text, with formatted text, inside the section.	In the Heading box, enter text to display as a heading (title) inside the block. To display heading text inside the block from a dynamic source, if available, select the Insert dynamic source icon beside the Heading box, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Text box, enter text to display as (body) text inside the block. Format the text and add links using the Text editor pane. To display (body) text inside the block from a dynamic source, if available, select the Insert dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Use the Text alignment options to align position (body) text inside the block to the Left, Center, or Right. In the Call to action > Link box, enter a URL or select a link to a store page. The link opens when a store visitor selects the link's button. To remove a link, select the X icon inside the text box. To display a link inside the block from a dynamic source, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Call to action > Text box, enter text to display as label for the link. To use this setting, add a link into the Link box. To display link label text inside the block from a dynamic source, if available, select the Insert dynamic source icon beside the Call to action > Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Text`*`	Displays formatted text inside the section	In the Text box, enter text to display as (body) text inside the block. Format the text and add links using the Text editor pane. To display (body) text inside the block from a dynamic source, if available, select the Insert dynamic source icon beside the Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Call to action > Link box, enter a URL or select a link to a store page. The link opens when a store visitor selects the link's button. To remove a link, select the X icon inside the text box. To display a link inside the block from a dynamic source, if available, select the Connect dynamic source icon beside the Link box, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Call to action > Text box, enter text to display as label for the link. To use this setting, add a link into the Link box. To display link label text inside the block from a dynamic source, if available, select the Insert dynamic source icon beside the Call to action > Text box, and then choose a metafield to add. Refer to Shopify help: Metafields. Use the Call to action > Text alignment options to align position (body) text inside the block to the Left, Center, or Right. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Testimonial	Displays an image with a comment from a customer, client, or staff member inside the section.	Use the Image selector options to set up an image inside the block. Refer to Edit an image inside a section or block. To display an image from a dynamic source, if available, select the Connect dynamic source icon beside the Image selector, and then choose a metafield to add. Refer to Shopify help: Metafields. Select the Image style radio buttons to set a display style for the image inside the block. The options are Photo or Logo. The Photo style option displays a circular image, above the block's text. The Logo style option displays a rectangular image, below the block's text. Use the Rating dropdown to set the number of star icons to display inside the block. The options are No rating, 5 stars, 4 stars, 3 stars, 2 stars, and 1 star. In the Testimonial box, enter text to display as a comment inside the block. Enter a comment from a customer, client or staff member about your store's products and services. Format the text and add links using the Text editor pane. To display (comment) text from a dynamic source, if available, select the Testimonial > Insert dynamic source icon beside the Testimonial box, and then choose a metafield to add. Refer to Shopify help: Metafields. In the Source box, enter a name to display inside the block as the source of the comment/ quote. To display (source name) text from a dynamic source, if available, select the Testimonial > Insert dynamic source icon beside the Source box, and then choose a metafield to add. Refer to Shopify help: Metafields. Use the Text alignment options to position text inside the block to the Left, Center, or Right. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.
Custom HTML	Renders custom HTML inside the section	In the Custom HTML box, enter Hyper Text Markup Language (HTML) to display inside the block. Refer to W3Schools: HTML Introduction. Select the radio buttons Size > Width to set a size for displaying the block. The options are Half width or Full width of the section. Select Remove block to delete the block from the current section.

Cascading content ​

Set up a cascading content section ​

Configure a block within a cascading content section ​

Table: Cascading content blocks ​

Cascading content

Set up a cascading content section

Configure a block within a cascading content section

Table: Cascading content blocks