How to build custom layouts with nested sections

Use the Build your own and Vertically scrolling content sections to create layouts the other sections don't cover.

These two sections are the theme's advanced, freeform building blocks. Everywhere else in the theme, a section's blocks sit in a single flat list; these two let you nest containers inside containers.

Build a custom row or grid layout

  1. Add a Build your own section from the theme editor.
  2. Click Add block and choose Group. This is the only block type you can add directly to the section.
  3. Set the group's Direction (Horizontal or Vertical), and its Width on desktop and Width on mobile.
  4. Add content blocks inside the group: Heading, Text, Button(s), Image, and the rest of the shared block set.
  5. To build a more complex layout, add another Group inside your first group, and repeat. There's no limit to how deep you can nest.
  6. Use Gap, Allow wrapping, and the alignment settings to fine-tune spacing and how children line up.

Build a sticky-stack scrolling section

  1. Add a Vertically scrolling content section from the theme editor (it appears as "Scrolling panels" in the section picker).
  2. Add a Panel block for each full-height panel you want.
  3. Inside each panel, set its own media (image or video, position, and width) and color scheme, then add content blocks.
  4. As a customer scrolls, each panel pins in place while the next one scrolls over it.

If you have any questions or issues, send us a message, we're more than happy to help you out!