Common section settings

Most sections and container blocks share the same controls, grouped under the same headings in the editor. This article documents them once. Other articles link here instead of repeating them, and cover only what is unique to a given section.

Not every section or container shows every group. A simple section may show Color, Padding, Margin, and Visibility. The flexible Section adds Layout, Size, Appearance, and Border. A plain Group has layout and size controls but no background or border controls. Styled group adds those surface controls, while Proportional group uses Limit width and Max width instead of the full Size group.

Color

On simple top-level sections these controls sit in their own Color group. On the flexible Section and container blocks they may sit under Appearance instead.

Color scheme: the set of colors (background, text, accent, buttons) applied to the section. Schemes are defined in Theme settings under Colors. Change a scheme there and every section using it updates together.
Inherit color scheme: only on container blocks (under Appearance), keeps the parent section's scheme. Turn it off to set a Color scheme for that block alone.
Use dark header theme over this section: appears on full-width sections that can sit behind the header. It switches the header theme while the header overlaps that section.

Layout

How blocks inside a flexible Section or group are arranged.

Direction: Vertical stacks the blocks. Horizontal places them in a row.
Wrap elements when space is limited: with a horizontal direction, lets blocks drop to the next line instead of overflowing.
Gap: the space between blocks, in pixels.
Horizontal alignment and Vertical alignment: where the blocks sit inside the section. The options follow the direction, and include Left, Center, Right, Top, Bottom, and the distributions Spread to edges, Balanced spacing, and Evenly spaced.
Use different layout on mobile: turn this on to set a separate Direction, Gap, and alignment for phones. The controls split into a Desktop layout group and a Mobile layout group.

Size

On the flexible Section, Width is Full, Page, or Custom. Page stops the content at the store-wide Page width you set in Theme settings, so sections line up down the page: see Logo, social, and regional settings. Custom adds Desktop width and Mobile width. Minimum height is Fit, Pixels, or Percent; the last two expose separate desktop and mobile values.
On Group and Styled group, Width is Fit, Fill, or Custom. Minimum height is Fit or Custom.
On Proportional group, turn on Limit width to expose Max width.

Appearance

The flexible Section and Styled group provide background controls. A plain Group and Proportional group only inherit or override the color scheme.

Background: None is transparent. Image adds an Image and an optional Mobile image. On the flexible Section, it also adds Sticky background. Video adds a Video picker. Styled group also offers Glass.
Overlay: tints the area over the background. None, Solid (pick a Color), or Gradient (pick a Gradient).

Border

Border controls appear on the flexible Section and Styled group, not on a plain Group or Proportional group.

Style: None, Solid, Dashed, Dotted, Inset, or Outset. Any style but None adds a Border thickness and a Color.
Corner radius: rounds the corners, in pixels.
Shadow: a drop shadow. None, Subtle, Medium, or Strong.

Padding

Space inside the section, around its content. Set Top, Bottom, Left, and Right in pixels. Turn on Use different paddings on mobile to set separate phone values, which splits the controls into Desktop padding and Mobile padding.

Margin

Space outside the section, between it and the sections above and below. Set Top and Bottom in pixels. Turn on Use different margins on mobile for separate phone values.

Visibility

Visibility: where the section shows. All shows it everywhere, Desktop hides it on phones, Mobile hides it on desktop.

Tips

To recolor a section, assign it a Color scheme rather than picking colors one by one. Edit the scheme in Theme settings and every section using it updates.
Padding controls space inside a section's background. Margin controls the gap between two sections. Use margin to separate sections, padding to breathe inside one.
Set a value on mobile only when the desktop value looks wrong on a phone. Leaving the mobile toggle off keeps one value for every screen, which is easier to maintain.