The Section is a flexible composition surface that arranges nested theme and app blocks in a column, row, or grid. Unlike dedicated sections, it has no fixed block list, so it accepts any compatible theme or app block.
Section
Updated 2 months ago
The Section is a flexible composition surface that arranges nested theme and app blocks in a column, row, or grid. Unlike dedicated sections, it has no fixed block list ā it accepts any compatible @theme or @app block and renders the blocks you add inside the layout you configure.
Settings
Configure how the section looks and lays out its blocks. Where a setting is always available, it applies to every layout; settings noted as conditional appear only when their parent choice is active.
Setting | What it does | Defaults / choices |
|---|---|---|
Colors | Applies a color scheme to the section. | Scheme 1 |
Background media | Sets a background for the section: None, Image, or Video. Image settings include the image and its position (Cover or Fit); video settings include the video and its position (Cover or Contain). | None |
Background overlay | Renders an overlay over the background. The overlay settings (Overlay color, Overlay style Solid or Gradient, and Gradient direction Up or Down) appear only when this is on. | Off |
Direction | Lays blocks out as Vertical (column), Horizontal (row), or Grid. Grid adds the grid column and grid area fields (separate for desktop and mobile). Row adds row alignment and position fields. | Vertical |
Vertical on mobile | Stacks a horizontal row of blocks vertically on mobile. Available when Direction is Horizontal. | On |
Alignment / Position | Controls horizontal alignment and vertical position of the blocks. Separate desktop and mobile controls appear when you enable Override alignment on mobile or Override position on mobile. | Left / Center |
Width | Page keeps the section within the page width; Full stretches it. Enable page gutter (available with Full) insets the section within the page gutter; turning it off removes the gutter. | Page |
Height | Sets the section height: Auto, Small, Medium, Large, Full screen, or Custom (which reveals a custom height range). | Auto |
Gap Horizontal / Vertical | Spacing between blocks, set separately for desktop and mobile. Enable Use a different vertical gap to set vertical gap values separately; otherwise the horizontal values are reused. | 12 |
Visible overflow | Allows block content to overflow the section edge. Off by default, which clips overflowing content. | Off |
Padding top / bottom (mobile & desktop) | Space above and below the section on each device. | 16 |
Hide section on desktop / mobile | Hides the section on the chosen device. | Off |
Custom class | Adds one or more CSS classes to the section, separated by spaces. | ā |
The Show content on card toggle renders the section's content on a card and reveals the Border radius scheme setting (one of three radius styles).
Blocks
The Section accepts dynamic @theme and @app block groups rather than a fixed list, so any compatible theme or app block can be dropped in. The blocks you add render inside the layout container you configure with the settings above.
FAQ
What is the Section in the Pops theme?
What blocks can I add to the Pops Section?
The Section accepts dynamic theme and app block groups rather than a fixed list, so any compatible theme or app block can be dropped in. The blocks you add render inside the layout container you configure.
How do I arrange blocks inside the Pops Section?
Use the Direction setting to lay blocks out as Vertical (column), Horizontal (row), or Grid. Grid adds grid column and grid area fields (separate for desktop and mobile), and Row adds row alignment and position fields. The default is Vertical.
How do I make the Section full width?
Set Width to Full to stretch the section across the page. With Full, you can enable the page gutter to inset the section within the page gutter, or turn it off to remove the gutter. The default is Page, which keeps the section within the page width.
Can I add a background image or video to the Section?
Yes. The Background media setting offers None, Image, or Video. Image settings include the image and its position (Cover or Fit); video settings include the video and its position (Cover or Contain). You can also turn on Background overlay to render an overlay over the background.
How do I control the height of the Pops Section?
The Height setting sets the section height to Auto, Small, Medium, Large, Full screen, or Custom (which reveals a custom height range). The default is Auto.
Was this helpful?
Was this helpful?