Skip to main content
The Custom section is an empty canvas that accepts every theme block Olympus offers — headings, text, buttons, images, videos, labels, badges, countdowns, prices, tiles and more — so you can compose a layout the ready-made sections do not cover. Blocks stack in the order you add them, and Group blocks let you place blocks side by side in rows or nest them in columns with their own padding, card background and color scheme. The section itself has a single setting, a background image; everything else is decided by the blocks you put in it.

What this section controls

  • An optional full-bleed background image behind the content
  • Any number of theme blocks, in any order
  • Through Group blocks: horizontal or vertical arrangement, alignment, spacing, padding, card backgrounds and color schemes

How it works

The section spans the full width of the page and places its blocks in the page’s content column, so content lines up with the sections above and below. Without Group blocks, every block you add sits on its own line, top to bottom. To arrange blocks beside each other, add a Group block with the Row preset and put blocks inside it; to build a stacked panel with padding or a card background, use the Column preset. Groups can be nested, so a Row can hold two Columns, each with its own heading, text and button. The Background image sits behind everything, centered and scaled to cover the section. Blocks with a card background, such as a Column group set to Card, remain readable over it.
The Custom section does not have the common Width, Top spacing, Bottom spacing, Section border or Color scheme settings. Use Group blocks for padding, background and color scheme, and the blocks’ own alignment settings for positioning.

Getting started

1

Open the Theme Customizer

From Shopify admin, open the Theme Customizer and go to the template where the new section belongs.
2

Add the section

Click Add section and choose Custom section. It starts empty.
3

Lay out the structure

Click Add block and add a Group block. Choose the Row preset to place blocks side by side or Column to stack them with padding and a card background.
4

Fill in the content

Inside each group add Heading, Text, Image, Button or other blocks. Reorder by dragging and adjust each block’s alignment and size.
5

Add a background if needed

Set the section’s Background image and give text-holding groups a Card background so the copy stays legible.

Section settings

Background

Background — an image displayed behind the whole section, centered and scaled to cover it. Leave it empty for the page background to show through. A background image has no overlay of its own, so either choose an image with quiet areas where the text sits or wrap the text in a Column group with a Card background.

Blocks

The Custom section accepts any theme block. The blocks below are the ones most sections are built from; all are documented in full at Theme blocks.

Group

The layout block. A Group holds other blocks, including other Groups, and arranges them.
Horizontal places the blocks inside side by side in a row; Vertical stacks them. The Row preset starts horizontal and the Column preset starts vertical. Default: Vertical.
Left, Center, Right or Stretch alignment of the blocks inside a vertical group. Shown only when Layout direction is Vertical. Default: Left.
The gap between the blocks inside the group, from 0 to 48 pixels in 2-pixel steps. Default: 0.
Inner padding of the group, from 0 to 200 pixels in 2-pixel steps. Default: 0. A horizontal group applies it to its left and right edges; a vertical group applies it to its top and bottom. Combined with a Card background, padding is what turns a group into a visible panel.
Space below the group: None, Small, Medium, Large or Extra large. Default: None. Use it to separate stacked groups since the section has no spacing settings of its own.
Background is None (default) or Card. With Card, the group paints a card with the theme’s card corners and exposes a Color scheme setting (default: Scheme 1) for its background and text colors.

Content blocks

  • Heading — rich text heading with Heading level, Size and Alignment.
  • Text — rich text paragraph with Size and Alignment.
  • Button — label, link, Filled or Outlined style, optional icon, new-tab option and Alignment.
  • Image — an image with Aspect ratio (Adapt to image, Square, Portrait, Landscape, Widescreen) and an optional link.
  • Video — a hosted or YouTube/Vimeo video with autoplay, controls, loop and aspect ratio options.
  • Label — a small pill or plain text line, typically above a heading.
  • Badge — a short badge with optional icon and corner position, for use over media.
  • Countdown — a timer to an end date with Boxed or Divider layout and selectable units.
  • Price — the current product’s price, for use on product templates.
  • Tile — an image or video card with its own heading, badge and button, positioned content and color scheme.
  • Custom Liquid — a field for your own code, following the group’s or section’s scheme and width.

Composing layouts

A few combinations cover most needs:
  • Text beside an image — one Row group containing an Image block and a Column group; the Column holds Heading, Text and Button with Alignment set to Left.
  • Two or three feature panels — one Row group containing two or three Column groups, each with Background set to Card, some Padding, and a Heading and Text inside.
  • Centered statement — a single Column group with Alignment set to Center holding a Label, a Heading and a Button.
  • Promotional card over a photo — the section’s Background image plus one Column group with Card background and generous Padding, holding a Heading, Text and Countdown.

Best practices

Start with a group

Add a Row or Column group first and place content inside it. Loose blocks cannot be aligned side by side later without rebuilding.

Give text a card over images

When using a background image, keep copy inside a Column group with Background set to Card so it stays legible.

Reuse ready-made sections

If a layout matches an existing section such as Image with text or Multi tile, use that section — it brings responsive behavior the Custom section leaves to you.

Check horizontal groups on mobile

Rows keep their blocks side by side on every screen size and do not wrap. Preview on a phone and restructure into Columns if the content is squeezed.

Limit nesting depth

Two levels — a Row of Columns — is usually enough. Deeper nesting is hard to manage in the sidebar and rarely improves the result.

Use Bottom spacing for rhythm

The section has no spacing of its own. Set Bottom spacing on your top-level groups to keep the vertical rhythm of the page.

Theme blocks

Full settings for every block the Custom section accepts

Custom Liquid

A dedicated section for pasted code when no theme blocks are needed

Multi tile

A grid of Tile blocks with column and row spans, for image-led layouts