Appearance
Custom section
Create almost any layout — multi-column grids, adjustable rows, overlapping layers, and mixed content — without writing any code.
No templates or fixed rules. Choose your blocks, set the structure, and fine-tune every detail. Build a hero banner, feature grid, testimonial row, or a completely custom design — it’s all possible here.
And this is just the beginning. We're actively expanding the Custom Section with more blocks — products, articles, collections, dynamic content, etc. The goal is to make it a powerhouse for all your needs.
Section settings
IMPORTANT
This section is designed to be highly flexible, and some block combinations or heavy nesting may cause unexpected layout issues.
Use nesting carefully, and always test on both desktop and mobile before publishing.
Issues caused by custom or unsupported combinations aren’t covered by our complimentary support.
| Setting | What it does |
|---|---|
| Lateral padding | Add or remove the standard side spacing of the page |
| Margin top / bottom | Space outside the section, above and below |
| Padding top / bottom | Space inside the section, above and below the content |
| Color scheme | Set a background and text color for the whole section |
Blocks
Blocks come in two types: layout blocks that arrange content, and content blocks that hold it.
Layout blocks
These are invisible containers. They control how content blocks are positioned.
Grid
Arranges blocks in a column grid. You choose how many columns appear on desktop and on mobile.
| Setting | What it does |
|---|---|
| Columns (desktop / mobile) | Number of columns on each screen size |
| Column gap / Row gap (desktop) | Space between columns and rows on desktop |
| Custom mobile gap | Enable separate gap values for mobile |
| Column gap / Row gap (mobile) | Space between columns and rows on mobile (only when custom mobile gap is on) |
| Vertical alignment (desktop / mobile) | How blocks align when they're different heights |
| Horizontal alignment (desktop / mobile) | How blocks are distributed across the row |
| Margin top / bottom | Space above and below the grid |
| Show grid outline | Editor-only helper to see the grid areas while building |
NOTE
Always use Cell blocks as the direct children of Grid. Place your content inside the cells.
Flexbox
Arranges blocks in a flexible row or column. Good for navigation-style rows, icon rows, or stacked groups.
All settings are independently configurable for desktop and mobile.
| Setting | What it does |
|---|---|
| Direction (desktop / mobile) | Row (horizontal) or Column (vertical), with reverse options |
| Allow wrapping | Whether items wrap to a new line when there's no more space (row directions only) |
| Column gap / Row gap (desktop) | Space between items on desktop |
| Custom mobile gap | Enable separate gap values for mobile |
| Column gap / Row gap (mobile) | Space between items on mobile (only when custom mobile gap is on) |
| Align items (desktop / mobile) | How items align on the cross axis |
| Justify content (desktop / mobile) | How items are distributed along the main axis |
NOTE
Always use Cell blocks as the direct children of Flexbox. Place your content inside the cells.
Cell
A single slot inside a Grid or Flexbox. Controls how wide the slot is and whether it sticks while scrolling.
| Setting | What it does |
|---|---|
| Span row (desktop / mobile) | Makes the cell span the full row, ignoring column count |
| Span (desktop / mobile) | How many columns this cell occupies (hidden when span row is on) |
| Sticky | Keeps the cell pinned to the top of the screen while scrolling |
| Padding | Inner spacing around the cell's content |
Cells can contain any content block, or even another layout block for nested layouts.
Overlay content
Stacks two cells on top of each other. Use it to place text or buttons over an image.
The overlay always has two layers:
- Foreground — text, buttons, or other content
- Background — typically an
imageorvideo
| Setting | What it does |
|---|---|
| Vertical alignment (desktop / mobile) | Where layers align vertically (top, center, bottom, stretch) |
| Horizontal alignment (desktop / mobile) | Where layers align horizontally |
| Margin top / bottom | Space above and below the overlay |
Content blocks
These are the actual visible pieces — text, rich content, images, videos, buttons, and custom Liquid output.
Text
A single line of text or a heading.
| Setting | What it does |
|---|---|
| Text | The content to display |
| Element | HTML element to use — paragraph, heading (H1–H6), or inline/semantic elements (div, span, sup, sub, em, mark, blockquote) |
| Custom typography | Override font, size, weight, line height, and letter spacing for this block only |
| Text alignment | Left, center, or right |
| Text transform | Uppercase, lowercase, capitalize, or none |
| Indent | Shift the text away from the left edge |
| Padding | Inner spacing on each side |
| Custom color | Use a specific text color instead of the inherited one |
Richtext
A block of formatted text. Supports bold, italic, links, and lists — edited in Shopify's rich text editor.
| Setting | What it does |
|---|---|
| Text | Formatted content |
| Padding | Inner spacing on each side |
| Custom color | Use a specific text color |
Image
A responsive image with optional link and display controls.
| Setting | What it does |
|---|---|
| Image (desktop / mobile) | Upload separate images for desktop and mobile |
| Link | Make the image a clickable link |
| Aspect ratio | Force a specific shape (square, portrait, landscape, or custom) |
| Custom height | Set a fixed pixel height when using the custom ratio |
| Custom width | Limit the image width as a percentage of the viewport |
| Crop style | Fill the frame (Wide) or show the whole image (None) |
| Crop position | Which part of the image to keep when cropping (top, center, bottom) |
| Custom radius | Override the global image corner rounding |
| Margin | Space on each side of the image |
Video
A video block for playing hosted videos. Supports separate uploads for desktop and mobile.
| Setting | What it does |
|---|---|
| Video (desktop / mobile) | Upload separate videos for desktop and mobile |
| Autoplay | Start playing as soon as the video is visible |
| Loop | Repeat the video when it ends |
| Muted | Play without sound (only available when autoplay is off) |
| Show play/pause button | Display an overlay button for manual control |
| Click to play/pause | Allow tapping/clicking the video to toggle playback |
| Margin | Space on each side of the video |
NOTE
Autoplay is not supported on mobile devices and is disabled by default in many browsers. Videos are always muted when autoplay is enabled.
Button
A styled link displayed as a button.
| Setting | What it does |
|---|---|
| Label | The button text |
| Link | The destination URL |
| Open in new tab | Opens the link in a new browser tab |
| Style | Primary, Outline, Link, or Blank |
| Full width | Stretches the button to fill its container |
| Alignment | Text position when full width is on |
| Color scheme | Use a custom color scheme for this button |
Custom Liquid
An advanced block for rendering custom Liquid code directly inside the section.
Use it for app snippets, dynamic Liquid output, or small custom integrations when standard blocks are not enough.
| Setting | What it does |
|---|---|
| Liquid code | The Liquid/HTML code to render |
| Lateral padding | Adds/removes standard side spacing |
| Margin top / bottom | Space outside the block |
| Padding top / bottom | Space inside the block |
| Use global color scheme | Inherit the section colors |
| Color scheme | Override colors for this block only |
IMPORTANT
This is an advanced block. Incorrect Liquid can break layout or output. Use carefully and test before publishing.
How to build a layout
Start with Grid or Flexbox → add Cells → add content inside the cells.
NOTE
Always place content blocks inside a Cell, not directly inside a Grid or Flexbox.
Examples
Two-column text layout
A Grid split into two columns. The left cell has a single heading. The right cell stacks multiple text blocks — for example a title, a body paragraph, and a supporting note.
Custom section
└── Grid (2 columns)
├── Cell
│ └── Text (e.g. a heading)
└── Cell
├── Text (e.g. a subheading)
├── Text (e.g. body paragraph)
└── Text (e.g. supporting note)Feature row with image header
A Flexbox row with an Image placed above a set of Cells. Each Cell holds a short Text block — useful for a row of features, testimonials, or specs under a banner image.
Custom section
└── Flexbox (row direction)
├── Image
├── Cell
│ └── Text
├── Cell
│ └── Text
├── Cell
│ └── Text
└── Cell
└── Text