Appearance

Image with cascading content ​

This guide describes setting up the Image with cascading content section.

Use the section to display an image beside (mixed) 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 an Image with cascading content section on a store's home page. In the upper right, part of Theme editor's section menu is displayed. The menu's Full bleed option is set to Mobile and desktop. This option sets the section's image to fill all space available, to the outer edges (or "bleed" area) of the section, on mobile and desktop display devices.

Each of the section's 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 an Image with cascading content section ​

To set up an Image with cascading content section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains an Image with 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 > Image with cascading content. Refer to Shopify help: Add a section.

  2. From the side menu, select Image with cascade (cascading content).

    An Image with cascading content section selected in Theme editor.

  3. Select a setting described in the following table.

Setting nameDescription
HeadingIn the Heading box, enter text to display as a heading (title) inside the section.
Heading > Insert dynamic sourceIf 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.
Layout > Desktop layoutUse the Desktop layout options to set a layout style for the section. The options are Image on left and Image on right. This setting applies to desktop display devices.
Image > ImageUse the Image selector options to setup an image to display inside the section. Refer to Edit an image inside a section or block.
Image > Image > Connect dynamic sourceTo 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.
Image > Width on desktopSelect the dropdown Width on desktop to set a width for the section's image. The options are One third, Two fifths, One half, and Three fifths. This setting applies to desktop display devices.
Image > Height on desktopUse the Height on desktop options to set a height for the section's image. The options are Auto and Full screen. This setting applies to desktop display devices.
Image > Full bleedUse the Full bleed dropdown to select a display option for "Full bleed" mode. Full bleed mode sets the section's image to fill all space available, inside the section, to the outer edges (or "bleed" area). To turn off Full bleed mode, select None. Alternatively, enable Full bleed mode for Mobile only, or Mobile and desktop display devices.
Image > CropUse the Crop dropdown to set a (cropping) shape for images inside the section. The dropdown options are No crop, Landscape, Square, and Portrait.
Images > Vertical alignment on desktopUse the Vertical alignment on desktop options to specify a (vertical alignment) position for images inside the section. The options are Top, Center, and Bottom. This setting applies to desktop displays devices.
Images > Horizontal alignment on desktopUse the Horizontal alignment on desktop options to specify a (horizontal alignment) position for images inside the section. The options are Full width, Left, Center, and Right. This setting applies to desktop displays devices.
Cascading content > Enable cascade layout on mobileSelect the checkbox Enable cascade layout on mobile to show/hide the section's cascading content area on mobile displays.
Cascading content > Desktop layoutSelect 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 variationAdjust 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 > SequenceAdjust 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 variationAdjust 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 7 for maximum alignment variation.
Cascade effect > Vertical space between itemsAdjust 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 positionUse 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 > Force one column layout and align content to mediaSelect the checkbox Force one column layout and align content to media to turn on/off "Forced one column mode". Enable this to override the section's layout to one column, with content aligned to the adjacent media.
Cascade effect > Use global settingsSelect 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.
Heading overlay > Overlay headingSelect 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.
Heading overlay > Heading mobile font size scaleUse 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.
Heading overlay > Heading desktop font size scaleUse 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.
Heading overlay > Call to action linkIn the Call to action link box, enter a URL for the section's button to use or select a link to a store page. The button is displayed beside overlaid heading text inside the section. To use this setting, enable the section's Overlay heading option.
Heading overlay > Call to action link > Connect dynamic sourceTo display a link from a dynamic source, if available, select the Connect dynamic source icon beside the Call to action link box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Heading overlay > Call to action labelIn the Call to action label box, enter text to display as label text for the section's "Call to action" button. To use this setting, enable the section's Overlay heading option, and add a link to the section's Call to action link box.
Heading overlay > Call to action label > Connect dynamic sourceTo display Call to action label text from a dynamic source, if available, select the Connect dynamic source icon beside the Call to action label box, and then choose a metafield to add. Refer to Shopify help: Metafields.
Heading overlay > Call to action styleUse the Call to action style options to apply a Solid or Border button style to the section's Call to action button. To use this setting, enable the section's Overlay heading option, and add a link to the section's Call to action link box. This setting defaults to Solid, if the section's Blend mode option is not set to Normal.
Heading overlay > Blend modeUse 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.
Heading overlay > Blend mode color schemeUse 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.
Color > Color schemeUse the Color scheme options to select a color scheme for the section. Refer to Colors.
Color > Disable transitionSelect 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.
Spacing > Remove top paddingSelect 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 paddingSelect the checkbox Remove bottom padding to add/remove the spacing (padding) that's displayed below the section. Refer to W3 Schools: CSS Padding.
Theme settingsIf available, select Theme settings to access additional settings for the section. Refer to Section theme settings menu.
Custom CSSSelect 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 sectionSelect Remove section to delete the section from the current page.

Configure a block within an Image with cascading content section ​

A default Image with cascading content section contains 3 blocks. To configure a block inside the section:

  1. Go to Customize theme.

    In Theme editor, at the top of the page, use the dropdown to select a page that contains an Image with cascading content section.

  2. From the side menu, expand the Image with cascade (cascading content) section menu.

  3. 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.

    The Image with cascading content section's Add block menu in Theme editor.

    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.

  4. Apply a block setting described in the Table: Image with cascading content blocks.

Table: Image with cascading content blocks ​

The following table describes the blocks inside the Image with 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 an Image with cascading content section.

Block nameBlock descriptionBlock setting(s)
ImageDisplays 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.

  • In the Caption box, enter text to display as a caption for the block's image. Format the text and add links by using the Text editor pane.
  • To display caption text from a dynamic source, if available, select the Connect dynamic source icon beside the Caption 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 overlayDisplays 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 options to select a color scheme for text inside the block. Refer to Colors.

  • 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.
VideoDisplays a video from a URL inside the section.
  • Use the Video selector options to set up a video inside the block. Refer to Add, replace or remove an image or video inside a section or block.

  • To display a video from a dynamic source, select the Connect dynamic source icon beside the Video selector, and then choose a metafield to add. Refer to Shopify help: Metafields.

  • Select the Mode radio buttons to set a mode for the block's video to Preview or Autoplay. Preview mode plays a few seconds of the video. Autoplay mode plays the entire video automatically. Autoplay does not not play the video's sound or show playback controls during automatic playback.

  • Select the Playback radio buttons to set a video playback mode for the block's video player to Inline or Modal. This setting does not apply if Mode is set to Autoplay.

  • Select the Size > Width radio buttons 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.
CollectionDisplays 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 options to select a color scheme for the block's text. Refer to Colors.

  • Use the Text display options to specify a display mode for the block's text. To overlay the block's content with text, select Overlay. To display text below the block's content, select Under image.

  • Select the Overlay text size radio buttons to set a size for overlay text inside the block. Set the block's overlay text to use the same size as Standard or Feature text. To use this option, set the Text display option to Overlay.

  • 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 postDisplays 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 Format options to specify a format for displaying details about a blog post inside the block. To display less details about the blog post, select Minimal. To display detailed information about the blog post, select Detailed.

  • 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, and the block's Format option is set to Detailed.

  • 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.
HeadingDisplays 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 or Feature 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 textDisplays (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.
TextDisplays 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.
TestimonialDisplays 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 HTMLRenders 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.