Most sections open with a Layout group in the editor. It lines up the section's text and sets the space inside the section and around it. Select a section in the editor's sidebar to see its Layout group. Each section has only the settings it can use, so the group differs from one section to the next.
Settings
Setting
What it does
Alignment
Lines up the section's headings and text at the left, in the center or at the right. Left is the default in most sections. A block with an alignment setting of its own keeps its own choice, and product cards always keep their text at the left.
Gap
The space between the parts of the section, such as between the blocks in the Section section, between the photo arc and the content under it in Orbit, between the heading and the collections in Collections grid, and between the cards in Card rail. None by default.
Padding top and Padding bottom
Space inside the section, above and below its content. A background covers this space, so more padding shows more of a background photo or color. None by default.
Margin top and Margin bottom
Space outside the section, above and below it. A background stops at the margin, so the page background shows there. Margin top is 120 px and Margin bottom is None by default.
The space between two sections is the upper section's Margin bottom plus the lower section's Margin top. The first section on a page has no space above it, whatever its Margin top says.
A preset can start with other values than these defaults. Section background settings covers the background itself.
The size you pick applies on screens 1920 pixels wide and wider. On narrower screens it shrinks with the screen width, down to half on screens 960 pixels wide and narrower. For example, 120 px is 90 pixels on a screen 1440 pixels wide and 60 pixels on a phone. Gap keeps its size on every screen.
In the Video section, the four padding and margin settings are sliders from 0 to 15. Each number stands for one size in the list above: 0 is None, 1 is 2 px, 7 is 16 px, 11 is 40 px, 12 is 60 px and 15 is 120 px.
Sections with a Layout group
Settings
Sections
Alignment, padding and margin
Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hotspots, Specifications, Steps, Testimonials, Video, and the page sections Article, Blog, Cart (the cart page), Collection, Page and Search
Orbit has no Padding top, because its photo arc starts at the top edge of the section. In the Hero section, Margin top and Margin bottom sit in a group named Spacing. The Header, Announcement bar, Mobile bottom navigation, Footer, Product information, Not found and Password sections have no Layout group, and neither do the sections in the Overlays group, such as the cart drawer and the popup.
Some sections start with other defaults:
Orbit: Alignment center and Padding bottom120 px.
Subscription: Padding top and Padding bottom120 px.
Article, Blog, Collection, Collections grid, Page and Search: Alignment center, and Padding top and Padding bottom60 px. Collections grid also has Gap60 px.
Cart (the cart page): Padding top and Padding bottom60 px.
Card rail: Gap24 px.
Width of blocks
A section spans the whole width of the screen, and each block inside it sets its own width. Most blocks you add to a section, such as Text, Image and Group, have a Width setting in their own Layout group:
Choice
What it does
Text column
A narrow column, at most 864 pixels wide, in the middle of the page.
Page width
The default. As wide as Page width in Layout settings sets, with the page margin on both sides.
Full width
Runs from one edge of the screen to the other.
The Features and Photo wall sections have a Width setting of their own with the same three choices. To build a layout from blocks, use the Section section.
Most sections open with a Layout group in the editor. It lines up the section's text and sets the space inside the section and around it. Select a section in the editor's sidebar to see its Layout group. Each section has only the settings it can use, so the group differs from one section to the next.
Settings
Setting
What it does
Alignment
Lines up the section's headings and text at the left, in the center or at the right. Left is the default in most sections. A block with an alignment setting of its own keeps its own choice, and product cards always keep their text at the left.
Gap
The space between the parts of the section, such as between the blocks in the Section section, between the photo arc and the content under it in Orbit, between the heading and the collections in Collections grid, and between the cards in Card rail. None by default.
Padding top and Padding bottom
Space inside the section, above and below its content. A background covers this space, so more padding shows more of a background photo or color. None by default.
Margin top and Margin bottom
Space outside the section, above and below it. A background stops at the margin, so the page background shows there. Margin top is 120 px and Margin bottom is None by default.
The space between two sections is the upper section's Margin bottom plus the lower section's Margin top. The first section on a page has no space above it, whatever its Margin top says.
A preset can start with other values than these defaults. Section background settings covers the background itself.
Sizes on smaller screens
Padding top, Padding bottom, Margin top and Margin bottom offer None, 2 px, 4 px, 6 px, 8 px, 10 px, 12 px, 16 px, 20 px, 24 px, 30 px, 40 px, 60 px, 80 px, 100 px and 120 px.
The size you pick applies on screens 1920 pixels wide and wider. On narrower screens it shrinks with the screen width, down to half on screens 960 pixels wide and narrower. For example, 120 px is 90 pixels on a screen 1440 pixels wide and 60 pixels on a phone. Gap keeps its size on every screen.
In the Video section, the four padding and margin settings are sliders from 0 to 15. Each number stands for one size in the list above: 0 is None, 1 is 2 px, 7 is 16 px, 11 is 40 px, 12 is 60 px and 15 is 120 px.
Sections with a Layout group
Settings
Sections
Alignment, padding and margin
Blog posts, Comparison, Contact form, Custom Liquid, Facts, FAQ, Featured collection, Featured product, Features, Hotspots, Specifications, Steps, Testimonials, Video, and the page sections Article, Blog, Cart (the cart page), Collection, Page and Search
Alignment, Gap, padding and margin
Section, Collections grid
Alignment, Gap, Padding bottom and margin
Orbit
Padding and margin
Highlights, Promo list, Subscription
Gap and margin
Card rail
Margin only
Hero, Marquee, Photo wall, Stacking cards, Timeline
Orbit has no Padding top, because its photo arc starts at the top edge of the section. In the Hero section, Margin top and Margin bottom sit in a group named Spacing. The Header, Announcement bar, Mobile bottom navigation, Footer, Product information, Not found and Password sections have no Layout group, and neither do the sections in the Overlays group, such as the cart drawer and the popup.
Some sections start with other defaults:
Orbit: Alignment center and Padding bottom 120 px.
Subscription: Padding top and Padding bottom 120 px.
Article, Blog, Collection, Collections grid, Page and Search: Alignment center, and Padding top and Padding bottom 60 px. Collections grid also has Gap 60 px.
Cart (the cart page): Padding top and Padding bottom 60 px.
Card rail: Gap 24 px.
Width of blocks
A section spans the whole width of the screen, and each block inside it sets its own width. Most blocks you add to a section, such as Text, Image and Group, have a Width setting in their own Layout group:
Choice
What it does
Text column
A narrow column, at most 864 pixels wide, in the middle of the page.
Page width
The default. As wide as Page width in Layout settings sets, with the page margin on both sides.
Full width
Runs from one edge of the screen to the other.
The Features and Photo wall sections have a Width setting of their own with the same three choices. To build a layout from blocks, use the Section section.