The section the editor names Section starts empty and shows only the blocks you add to it, such as text, buttons and images. It is called "Section section" here because Section is its name in the editor's list. Use it when no other section has the layout you want. To add one, click Add section in the editor and select one of the three presets: Section, Content or Media with text.
Presets
Section
Content
Media with text
Blocks
None
A Group with a centered heading, paragraph and button
A Columns block with an Image on the left and a Group with a heading, a paragraph and a button on the right
Use it for
Starting from nothing
A short centered message
A photo with a story beside it
In Media with text, the photo and the text stack on a phone, with the photo first. No preset comes with a photo. Until you choose one in the Image block, the editor shows a sample drawing and your store shows nothing in the photo's place.
Layout
Setting
What it does
Alignment
Aligns the text of blocks that have no Alignment of their own. A Text block always uses its own.
Gap
The space between the blocks, from None to 120 px.
Padding top and Padding bottom
Space inside the section, above the first block and below the last one.
Margin top and Margin bottom
Space outside the section, between it and its neighbors.
The section can sit on a color, a photo, a video file, or a YouTube or Vimeo video. Background width makes the background run to the edges of the screen or sit inset with rounded corners. On a custom color, the text switches to light or dark colors to stay readable. Over a photo or video, raise Overlay opacity to darken it, and the text turns light. Section background settings covers each setting, and Add a background image or video to a section walks through it.
Size
Fill the screen makes the section 80% of the screen's height, minus the header, so the top of the next section still shows. On tall screens, it stops at 800 px. Content that needs more room makes it taller. The first blocks sit centered in the space, and the last block moves to the bottom edge. Use it for an opening section built from blocks, like a hero.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Background parallax moves a background photo or video a little slower than the page as customers scroll. It is on by default and shows when Background type is Image or Video.
The section the editor names Section starts empty and shows only the blocks you add to it, such as text, buttons and images. It is called "Section section" here because Section is its name in the editor's list. Use it when no other section has the layout you want. To add one, click Add section in the editor and select one of the three presets: Section, Content or Media with text.
Presets
Section
Content
Media with text
Blocks
None
A Group with a centered heading, paragraph and button
A Columns block with an Image on the left and a Group with a heading, a paragraph and a button on the right
Use it for
Starting from nothing
A short centered message
A photo with a story beside it
In Media with text, the photo and the text stack on a phone, with the photo first. No preset comes with a photo. Until you choose one in the Image block, the editor shows a sample drawing and your store shows nothing in the photo's place.
Layout
Setting
What it does
Alignment
Aligns the text of blocks that have no Alignment of their own. A Text block always uses its own.
Gap
The space between the blocks, from None to 120 px.
Padding top and Padding bottom
Space inside the section, above the first block and below the last one.
Margin top and Margin bottom
Space outside the section, between it and its neighbors.
Section layout settings describes the sizes and how they shrink on smaller screens.
Background
The section can sit on a color, a photo, a video file, or a YouTube or Vimeo video. Background width makes the background run to the edges of the screen or sit inset with rounded corners. On a custom color, the text switches to light or dark colors to stay readable. Over a photo or video, raise Overlay opacity to darken it, and the text turns light. Section background settings covers each setting, and Add a background image or video to a section walks through it.
Size
Fill the screen makes the section 80% of the screen's height, minus the header, so the top of the next section still shows. On tall screens, it stops at 800 px. Content that needs more room makes it taller. The first blocks sit centered in the space, and the last block moves to the bottom edge. Use it for an opening section built from blocks, like a hero.
Motion
Dark moment, Rise on scroll and Chapter title work as in every section. Section motion settings describes them.
Background parallax moves a background photo or video a little slower than the page as customers scroll. It is on by default and shows when Background type is Image or Video.
Blocks
The section takes any theme block and app blocks, including the Text block, Button block, Image block, Video block, Group block and Columns block. The blocks run one under another. To put blocks side by side, place them in a Group block with Layout direction set to Horizontal, or in a Columns block. How sections and blocks work in Checkmate explains how blocks fit inside each other.
Each block sets its own width with its Width setting: Text column, Page width or Full width.