Sections, blocks, and groups

The theme 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 the theme 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 the theme'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, Video banner, Parallax image banner: a heading and text over a background photo, video, or slow-scrolling image.
Split banners: two linked image cards side by side.
Multicolumn, Multicolumn mobile grid, Feature columns: rows of content that adapt across screen sizes.
Collage, Lookbook: an arrangement of linked media cards.
Video with text: a video next to a caption.
Brand ethos, Quote, Highlights: prebuilt storytelling layouts.
Rich text with button: a compact text introduction with a call to action.
Parallax photo pair: a large photo with a smaller detail photo overlapping it.
Marquee, Text and images, Logos: a row scrolling sideways on a loop. Marquee carries phrases only, Text and images alternates phrases with pictures, and Logos runs a strip of faded logos with no separator.
Newsletter: an email signup with a heading.
Countdown banner: a countdown timer over a background.
Separator: a single divider line.

Parallax photo pair and Marquee are also blocks you can add inside any section. The presets are the same thing given a section of its own, for when it should stand alone rather than sit among other content. See Content blocks reference.

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 with named content slots. In those sections, regions such as Header appear in the block list and hold headings, text, or buttons. Other sections hold content inside the feature itself: in Hero slideshow, each slide is a slot you fill with headings, text, and buttons.

A content slot has its own Layout, Size, Appearance, Padding, and Margin controls, the same ones described in Common section settings. Select the slot in the block list to arrange what is inside it and to set the space around it, separately from the section.

Groups

Groups are containers you place inside a section to arrange a set of blocks together. The theme 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 when you only need layout and color inheritance.

Styled group

A Group plus Appearance and Border settings: a background image, video, or glass surface, 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. The theme'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.