Appearance
Layout Components
Layout components arrange other components. They hold no content of their own; you drop other components inside them.
Group
The Group is the component most pages are built from. It is a horizontal band that runs from edge to edge, with its own background, border and padding, and it holds the components you put inside it.
Most pages are a stack of Groups: one for the hero, one for featured products, one for a newsletter signup, and so on.
| Setting | What it does |
|---|---|
| Layout | Constrained centers the components inside at the chosen width. Full width lets them run the whole width of the band. |
| Content Width | The width used by a constrained layout: Narrow (768px), Default (1152px) or Site (1440px). These follow the widths in Design Settings. |
| Vertical Padding | Space above and below the components: None, Small, Medium or Large |
| Side Padding | Default keeps the side gutters. Choose None for a Group placed inside another Group, which already has them. |
| Block Spacing | Space between the components inside, from top to bottom |
| Minimum Height (px) | Makes the band at least this tall, for example for a hero with a background image. 0 means as tall as its content. |
| Content Position | Where the components sit when the band is taller than they are: Top, Center or Bottom |
| Text Color | Text color for everything inside, for example white text on a dark background |
| Background Color | Fills the band from edge to edge |
| Background Gradient | A blend of the theme's primary and secondary colors in place of a flat color. Soft stays light behind dark text. Bold is strong, so pair it with a light Text Color. A background image shows on top of it. |
| Background Image | An image over the background color. Choose how it fills the band with Background Size and which part stays visible with Background Position. |
| Overlay (%) | Darkens the background image so text on it stays readable |
| Border | A thin line at the top, bottom, both or all sides |
| Corners | Rounded corners, useful for a Group used as a card inside another Group |
| HTML Element and HTML Anchor | For search engines and screen readers, and for links that jump to this section, such as #faq |
| Align | See Align |
Building a boxed section
Put a Group with a background color and rounded corners inside another Group. The outer Group sets the width and spacing, and the inner one becomes a card.
Row
A Row places components side by side in equal columns. On smaller screens the columns stack.
| Setting | What it does |
|---|---|
| Columns (desktop) | Number of columns from 1024px wide, 1 to 6 |
| Columns (tablet) | Columns between 768px and 1024px. Empty uses the desktop count, up to 3. |
| Columns (mobile) | Columns below 768px. Empty stacks everything in one column. |
| Vertical Alignment | How components of different heights line up: Stretch, Top, Center or Bottom |
| Gap (px) | Space between the columns |
| Align | See Align |
Column
Use Columns inside a Row when the columns should have different widths. A Column's Span sets how many of the Row's columns it covers. For example, in a Row with 3 columns, a Column with span 1 next to a Column with span 2 gives a one-third and two-thirds layout. On tablets and phones each Column takes one column.
Tabs and Tab
Tabs show one panel at a time. Add a Tab inside the Tabs component for each panel, give it a Title, and put any components inside it. A Tab with nothing inside is not shown.
| Setting | What it does |
|---|---|
| Orientation | Horizontal puts the tab titles above the panel. Vertical puts them in a column beside it on large screens. |
| Align | See Align |
On product pages, Tabs are the usual place for the description, the specifications and the reviews.
Spacer
An empty component that adds vertical space between two components. Set the space in Height (px).
Divider
A horizontal line between two components. Spacing sets the room above and below the line, and Align works as described in Align.