| Setting | Description |
|---|---|
| Section width | How much of the screen the section is allowed to take. • Stretch width: The content spreads to the browser width, which suits wide multi column layouts. • Fixed width: The content lines up with the rest of your pages, using the width set in Theme settings > Layout. • Full width: Section and content run edge to edge, the option to pick when a background image should bleed off the screen. |
| Color scheme | The background and text colors the section starts from. Schemes are defined in Theme settings > Colors, so editing one there restyles every section built on it. |
| Setting | Description |
|---|---|
| Direction | Whether the blocks sit above one another or side by side. This is the first thing to set, because the rest of the layout settings change with it. • Vertical: Blocks stack down the page, one under the next. • Horizontal: Blocks sit in a row across the page. |
| Height | How tall the section is regardless of how little content it holds. Use a taller preset when a background image needs room to be seen. |
| Custom height | An exact height in place of the presets, for when the section has to line up with a neighbouring design. |
| Position | Where the stack of blocks sits between the top and bottom of the section, which only becomes visible once the section is taller than its content. |
| Alignment | Which edge the blocks line up with from left to right. Centre reads as more formal, left as more editorial. |
| Gap | The space left between one block and the next. Increase it when the blocks read as one lump instead of separate ideas. |
| Setting | Description |
|---|---|
| Direction | Whether the blocks sit above one another or side by side. This is the first thing to set, because the rest of the layout settings change with it. • Vertical: Blocks stack down the page, one under the next. • Horizontal: Blocks sit in a row across the page. |
| Vertical on mobile | Turns the row into a stack on phones, so each block gets the full screen width instead of being squeezed into a narrow column. |
| Content wrap | Lets blocks drop onto a second line when the row runs out of room, rather than shrinking to fit. Useful once you have four or more blocks in a row. |
| Height | How tall the section is regardless of how little content it holds. Use a taller preset when a background image needs room to be seen. |
| Custom height | An exact height in place of the presets, for when the section has to line up with a neighbouring design. |
| Position | Where the row of blocks sits between the left and right edges of the section, which shows once the blocks are narrower than the section. |
| Alignment | How blocks of different heights line up against each other, for example whether their tops or their centres match. |
| Gap | The space left between one block and the next. Increase it when the blocks read as one lump instead of separate ideas. |
| Setting | Description |
|---|---|
| Carousel on mobile | Turns the blocks into a swipeable strip on phones, so a long row costs one screen instead of endless scrolling. |
| Item per row | How many blocks share the width of a phone screen. Two shows more at once, one keeps each block readable. |
| Column gap | The space between blocks on mobile. A small gap still tells shoppers where one block ends and the next begins. |
| Setting | Description |
|---|---|
| Background media | What sits behind the blocks, on top of the color scheme. • None: The color scheme alone shows through. • Image: A photograph fills the section behind the blocks. • Video: A hosted video plays behind the blocks, which draws more attention but costs more to load. |
| Image | The photograph shown behind the blocks. Pick one with a calm area where the text will land. * Note: Only appears when Background media is set to Image |
| Video local | The hosted video played behind the blocks. Short and quiet clips work best, since shoppers are meant to read over it. * Note: Only appears when Background media is set to Video |
| Padding block | The space kept between the background media and the blocks on top of it, so the wording does not sit against the edge of the picture. * Note: Only appears for Image and Video backgrounds |
| Setting | Description |
|---|---|
| Border radius | How the corners of the section are shaped. • None: Square corners, which read as sharper and more editorial. • Custom: Rounded corners at a value you choose, softening the block against the page. |
| Custom radius | How rounded those corners are. Higher values give a softer, card like shape. * Note: Only appears when Border radius is set to Custom |
| Background inside container | Keeps the background within the page content width instead of letting it run to the browser edges, so the section reads as a card on the page rather than a full width band. |
| Background overlay | Lays a tint over the background media. Turn it on when the picture is busy and the wording on top is hard to read. |
| Overlay color | The color of that tint. Dark tints suit light text, light tints suit dark text. * Note: Only appears when Background overlay is enabled |
| Setting | Description |
|---|---|
| Overlay style | How the tint is spread across the picture. • Solid: an even tint over the whole picture, the safest choice for readability. |
| Overlay opacity | How strong that tint is. Raise it until the wording is comfortable to read, then stop, because every step also hides more of the picture. |
| Gradient direction | Which end of the section the tint is heaviest at. Point it at the side where the text sits. • Up • Down |
| Setting | Description |
|---|---|
| Padding top | Adds space above the section. Increase it when this section sits too close to the one before it. |
| Padding bottom | Adds space below the section. Increase it when the next section starts too abruptly. |