Sections, blocks, and groups
Sections, blocks, and groups
Reign is built on Shopify sections and blocks. Once you see how they fit together, the editor makes sense and most
layout questions answer themselves. This article covers the pieces. For the settings that repeat across all of them
(color, spacing, layout, visibility), see Common section settings.
Sections, blocks, and presets
A section is a horizontal band of a page: a banner, a product grid, a row of columns. You add, reorder, hide, and remove
sections per page.
A block is a piece of content inside a section: a heading, an image, a button. In Reign almost all content is built from
blocks, so a section is mostly a container you fill. You add and reorder blocks under the section they belong to in the
editor sidebar.
Many of Reign's sections are presets of one flexible section called Section. When you add Image banner, Multicolumn, or
Collage, you are adding the same Section with a different starting layout and starting blocks. They share one set of
controls, so what you learn on one carries to the rest.
The Section, a blank canvas
The Section is the heart of the theme. On its own it is an empty container with a full set of layout controls. Add it
from Add section under Layout, then fill it with blocks.
Its presets give you a finished starting point. Each one appears as its own entry in Add section:
- Image banner: a heading and text centered over a background image.
- Multicolumn: a row of text columns.
- Collage: an arrangement of media cards.
- Split banners: two linked image cards side by side.
- Video with text: a video next to a caption.
- Brand ethos, Quote, Highlights: prebuilt storytelling layouts.
- Countdown: a countdown timer over a background.
- Separator: a single divider line.
Because every preset is the same Section underneath, its controls are the ones in Common section settings: Layout, Size,
Appearance, Border, and the standard color, padding, margin, and visibility.
Content slots in specialized sections
Some sections wrap a special feature (a slideshow, a scroll effect, a list) with standard content slots. In those
sections you will see named regions in the block list. The Display list section, for example, has an Above content slot
and a Below content slot around its list. You add headings, text, or buttons into a slot, and they share the section's
background and spacing. Other sections hold their content blocks inside the feature itself: in Hero slideshow, each
slide is a slot you fill with headings, text, and buttons.
Groups
Groups are containers you place inside a section to arrange a set of blocks together. Reign has four.
Group
The everyday container. It has the same Layout controls as a section (Direction, Gap, alignment), applied only to the
blocks inside it.
A common use: you have a heading, text, and two buttons stacked vertically, and you want the two buttons side by side.
Add a Group, set its Direction to Horizontal, and put the two Button blocks inside it.
A Group can also carry a Link, which makes the whole group clickable. It comes in three presets: Group, Icon with text,
and Icon with details. Reach for a plain Group unless you need a background or a border, since it keeps the page
lighter.
Styled group
A Group plus Appearance and Border settings: a background color, image, or video, an overlay, a border, a corner radius,
and a shadow. Use it to make a card or a highlighted box inside a section.
Proportional group and Proportional part
For side-by-side layouts where you control the width split, like an asymmetric two-column banner. A Proportional group
holds Proportional part blocks, and you put your content inside each part.
Each part has a Proportion from 1 to 5. The theme compares the values across the group, so two parts set to 1 and 1
share the space evenly, while 2 and 1 split it two to one. On phones the parts stack, and each part's Height takes over.
Horizontal content
A columns block. It lays its child columns out in a row that wraps to fewer columns as the screen narrows. Set Minimum
column width to control when the wrap happens. Reign's Multicolumn preset is built from it.
Tips
- Reach for a plain Group first. Switch to a Styled group only when you need its background or border.
- A preset is only a starting point. Once you add Image banner or Multicolumn, you can change every setting and swap,
add, or remove the blocks inside it.
- To move a block out of a group, drag it in the block list. To group existing blocks, add the group first, then drag
the blocks into it.