Custom section

Custom section is a blank container: add it, then fill it with any combination of the theme’s content blocks — headings, text, images, buttons, videos, quotes, product picks, and more.

What it does

Use it when none of the ready-made sections fits: a custom two-column note, a photo with an unusual caption, a row of mixed elements. You decide the blocks and their order; the section provides the canvas and an optional background image.

Blocks you add directly to the section stack top to bottom. To place blocks side by side, put them inside a Group — see the quick start below.

Add it to a page

1. In Shopify admin, go to Online Store → Themes and click Edit theme. (Older admin versions label this button Customize.)
2. Open the template where you want the section.
3. Click Add section and choose Custom section.
4. Click Add block and pick from the theme’s content blocks.
5. Arrange and fill them, then save.

Choose a style

The section itself has a single setting — Background (an optional full-width background image). Everything else is the blocks you add.

Set it up: quick start

Build a two-column note: a heading, an image with text beside it, and a button. Target structure:

Custom section
├─ Heading
├─ Group            ← added as "Row"
│  ├─ Image
│  └─ Text
└─ Button

1. Add the section, then add a Heading block at section level.
2. Click Add block → Row (under the Layout category). The block is added with the name Group — Column and Row are the two add options, and both appear as a Group once added; Row just starts in horizontal mode.
3. Click the Group to select it, then use its Add block to add an Image and a Text inside it. Blocks added from the section’s own Add button land next to the Group as siblings, not inside it — if Image and Text ended up below the Group, remove them and add them from within the selected Group.
4. With the Group selected, check Layout direction = Horizontal — its children now sit side by side.
5. Back at section level, add a Button under the Group.
6. Drag blocks in the sidebar to reorder, then save.

Checkpoint: the preview shows the heading on top, the image and text side by side, and the button below. Check the phone preview too: a horizontal group stays side by side on phones — it does not reflow into a stack — so keep the pair compact (a small image, a short paragraph) and shorten it if it looks squeezed at 375px.

Settings

Section settings

Setting	Default	Options	What it does
Background	Empty	Image picker	Optional background photo behind all the blocks

Blocks

Add any of the theme’s content blocks — the same set used across the theme:

Block	What it adds
Heading	A title with size options
Text	A paragraph with basic formatting
Button	One link button
Image	A picture, optionally linked
Rich text	Multi-paragraph formatted text
Divider	A separator line
Video	A Shopify-hosted or YouTube/Vimeo clip
Email form	A newsletter-style email field
Social icons	Links to your social profiles
Spacer	Vertical breathing room
Icon list / Quote / Caption	Small supporting elements
Product / Collection	A single product or collection card
Group	A container that holds other blocks. Added as Column (children stacked) or Row (children side by side); either way the block is named Group once added
Data table	Pipe-separated data displayed as Plain table, Striped table, or Cards; see the eight shared settings in Data table

Group settings

Setting	Default	Options	What it does
Layout direction	Vertical when added as Column, Horizontal when added as Row	Horizontal / Vertical	Horizontal places the blocks inside side by side; Vertical stacks them
Alignment	Left	Left / Center / Right	Vertical only — lines up the stacked children
Padding	0 px	0–200 px slider	Space around the group’s content: horizontal groups get it on the sides, vertical groups above and below

Add a Data table block

1. Inside Custom section, choose Add block → Data table.
2. Enter Heading and pipe-separated Column headings, then replace the starting dashes in Table rows with one row per paragraph or line.
3. Choose Table style → Plain table, Striped table, or Cards. Set First column is a row heading, Background tint, Row icon, and Note as needed.
4. Save and check the layout on mobile. Empty headings or no meaningful data rows hide this block in both the editor and storefront.

This block has eight settings. It does not have the independent Data table section’s Introduction, Full width, Top spacing, or Bottom spacing controls; its outer placement comes from the container. Each block saves its own content. For examples, all defaults, empty-cell rules, and product-specific dynamic sources, use the Data table tutorial.

Images and content tips

• Background image: pick something calm — it sits behind everything and text must stay readable on it.
• Block photos follow the theme’s normal image handling; large images (1600 px and up) stay sharp on wide screens.
• Rows don’t shrink-wrap on phones. A horizontal Group keeps its blocks side by side at every width, and content that doesn’t fit is clipped rather than wrapped. Give row children fixed, modest sizes and check 375px.

Good to know

• Blocks at the same level stack top to bottom — side-by-side arrangements live inside a Group added as Row (Layout direction Horizontal).
• The same blocks appear in other sections. Anything you learn here works in the theme’s other free-content areas.
• It stays a canvas. If you find yourself rebuilding a product grid, the dedicated sections (Featured collection, Collection tabs) do it better.

Example setups

Two-column note. A Group added as Row with an Image and a Text inside, plus a Button below — a small “about this collection” essay.

Announcement sandwich. Divider, Heading, Rich text, Divider — a formal statement block on a policy page.

Common questions

My blocks all stack vertically. Blocks added at section level always stack. For side-by-side content, add a Row (it appears as Group), put the blocks inside it with its own Add block, and set its Layout direction to Horizontal. A Group added as Column also stacks — it is for grouping and aligning, not for rows.

I added the Image and Text but they landed below the Group, not inside it. They were added as siblings of the Group. Select the Group first, then use the Add block button inside it — or drag the blocks onto the Group in the sidebar to nest them.

The row looks squeezed on my phone. Horizontal groups don’t reflow into a column on small screens. Use a smaller image, shorter text, or switch the Group’s Layout direction to Vertical for the mobile-friendly version.

The background image makes text unreadable. Choose a calmer photo, or remove it and rely on the page background.

Can I put a Custom section inside another section? No — sections sit side by side on the page; only blocks nest inside a section.