Home page sections

Every section below can be added to the home page, and most of them to any page or product template as well (Add section in the theme editor). They can be reordered by dragging, hidden with the eye icon, or removed.

What every section shares

Color scheme. Almost every section has a Color scheme setting. It picks one of the palettes from Theme settings → Color schemes and applies it to that section’s panel. This is how you build rhythm on a long page: alternate two schemes rather than setting colours per section.

Section spacing. Every home-page section ends with Top padding and Bottom padding (None · Small · Medium · Large). Phones use smaller steps automatically. Two sections that belong together usually read best as Bottom: None then Top: None.

Separator block. Sections built from blocks (Hero, Image with text, Rich text, and the product page) accept a Separator block: a Line with adjustable space above and below, or Space only with an exact height. Use it where one gap should differ from Spacing between blocks.

Media and content layout. Sections that pair an image with text share the same three settings: Media position on desktop (Left / Right), Media width on desktop (Small 40% / Medium 50% / Large 60%) and Image shape (Original / Portrait 4:5 / Square / Landscape 4:3). They behave identically everywhere, so what you learn on one section carries to the rest.

Overlay opacity. Where text sits on a photograph, Overlay opacity draws a veil in the colour scheme’s background colour, strongest behind the text. Raise it until the text reads clearly on your own image — the default suits a mid-tone photograph.

Link style. Sections with a Link label also have Link style: Link, Primary button or Secondary button. Leave the label empty to hide the link entirely. In carousel sections, the link moves below the carousel and is centred while the arrows are shown.

Hero

The main opening section: a headline, text and buttons, either beside an image or over it.

Setting	Notes
Layout	Split (text beside image) or Overlay (text on image).
Width	Inset (rounded panel) or Full width.
Media position on desktop	Split only — Left or Right, the same setting the other media sections use.
Height	Overlay only — Small / Medium / Large / Full screen, the same four steps as the Slideshow.
Overlay opacity	Overlay only.
Image
Fallback collection	Used when no image is picked: the collection’s image, else its first product. Useful while you are still shooting.
Chip color scheme, Chip 1 / 2 title and text	Split only. Two small floating cards over the image — a rating, a promise, a number. Leave the titles empty to hide them.
Vertical / Horizontal	Overlay only — where the text group sits on the image.
Text alignment	How the heading, text and buttons line up inside the group.
Spacing between blocks	0–48 px.

Blocks: Subheading (outlined pill or plain text), Heading (Large / Extra large / Huge), Text, Button (up to two; Primary / Secondary / Accent / Link, optional full width), Stat (a value and a label — “48h” / “dispatch”), Separator.

The hero’s first image is the page’s largest image, and the theme treats it as such: it loads eagerly and is never animated, which is what keeps the home page’s mobile performance score where it is. Keep it under 500 KB.

Slideshow

Up to six slides, each a photograph with its own text and up to two buttons.

Setting	Notes
Width	Inset or Full width.
Height	Small / Medium / Large / Full screen.
Show arrows	Dragging works regardless, on desktop and on touch.
Accessible name	Read out by screen readers. Defaults to “Slideshow”.
Auto-rotate slides	Pauses on hover and focus, stays off for visitors who prefer reduced motion, and a pause button is always shown.
Change slides every	3–10 s.

Slide blocks each carry: Image, Mobile image (optional, a taller crop), Color scheme, Overlay opacity, the text layout trio, Subheading, Heading and Heading size, Text, and two labelled buttons.

One slide is usually better than four. A slideshow where slide two is never seen is three images of page weight for nothing.

Featured collection

Products from one collection — or several, as tabs.

Setting	Notes
Subheading, Heading
Link label / Link / Link style	The link defaults to the selected tab’s collection.
Layout	Carousel or Grid.
Products per collection	2–16.
Products per row on desktop	2–5, the same range as every other product grid.

Collection blocks: each is a Collection plus an optional Tab label (defaults to the collection title). Tabs appear as soon as the section has two or more collections — one section can therefore be “New in / Bestsellers / Sale” without three sections of page weight.

Collection list

Your categories as a row of image tiles.

Setting	Notes
Collections per row on desktop	2–5.
Text position	On the image or Below the image.
Image shape	Original / Portrait / Square / Landscape.

Collection blocks: Collection, Image (defaults to the collection image, else its first product), Subheading, Title (defaults to the collection title), Link label.

3D spotlight

A product’s 3D model, turning slowly, with numbered points of interest you place on the model itself. Full chapter: 3D spotlight — including how to upload a GLB file to Shopify.

Material comparison

One table, every material you sell, so the choice is made before the question is asked. Full chapter: Material guide.

Image with text

A photograph beside a block of text — the section for a story, a process, a promise.

Setting	Notes
Layout	Plain or Panel (a rounded box in the colour scheme, with the image flush to its edge).
Image, Media position on desktop, Media width on desktop, Image shape
Vertical position	Top / Middle / Bottom.
Alignment	Left or Center.
Spacing between blocks

Blocks: Subheading, Heading (Medium / Large / Extra large), Text, Button (up to two), Separator.

Rich text

Text alone, centred in the page. Good for a statement, a short manifesto, a closing line.

Layout (Plain / Panel), Content width (Narrow / Medium / Wide), Alignment (Left / Center), Spacing between blocks. Same blocks as Image with text.

Multicolumn

Two to four columns, each with an image or an icon, a title and text — the “how it works” or “why shop with us” section.

Setting	Notes
Layout	Plain or Panel.
Subheading, Heading, Text, Button label, Button link	The section’s own header.
Columns on desktop	2–4.
Image shape	For columns with an image.
Show divider above columns
Number the columns	Turns the section into numbered steps — 1, 2, 3.

Column blocks: Image, or an Icon (when no image) from nine built-in icons (Check, Star, Truck, Clock, Layers, Receipt, Options, Upload), Accent icon to draw it in the scheme’s accent colour, Title, Text, Link label and Link.

Collage

A mixed grid of image, product and collection tiles, with one tile larger than the rest.

Desktop layout: Large tile on the left, Large tile on the right or Equal tiles — the pattern repeats every three tiles. Captions: On the image (which keeps every tile’s image edge aligned) or Hidden.

Blocks: Image (image, heading, text, link), Product, Collection. Up to nine.

One to four promotional panels — a sale, a new collection, a lookbook — each with its own colour scheme.

Setting	Notes
Tiles per row on desktop	1–4.
Tile height	Small / Medium / Large.

Promo tile blocks: Color scheme, Image, Overlay opacity, Span two columns, Subheading, Heading, Text, Link (the whole tile becomes clickable), Button label, Button style (Primary / Secondary / Accent / Glass / Link — glass is a frosted button for busy photographs), Full-width button, and the text layout trio.

Shop the look

A styled photograph with hotspots on the products in it.

Setting	Notes
Layout	Image with product list — hotspots beside a numbered list, marker and row highlighting each other. Image only — products open in a small card when a hotspot is clicked.
Image, Image shape	Hotspot positions follow the visible frame, so check them after changing the shape.
Media position / Media width on desktop	List layout only.
Product card color scheme	Image-only layout.

Hotspot blocks: a Product and its Horizontal position / Vertical position as a percentage. Watch the marker move in the preview as you drag the sliders.

Image gallery

Your own photographs in a grid or a carousel — the honest alternative to an Instagram feed.

Setting	Notes
Layout	Grid or Carousel.
Images per row on desktop	2–6. Images per row on mobile 1–3.
Image shape	Square / Portrait 4:5 / Vertical 9:16.
Captions	On hover, Always or Hidden.
Show Instagram icon in captions

Image blocks: Image, Caption (e.g. a customer’s @handle), Link, and Product — which links to that product when no link is set, turning the gallery into a shoppable one.

Testimonials

Setting	Notes
Layout	Carousel or Grid.
Testimonials per row on desktop	2, 3 or 4.
Card style	Card or Minimal (divider line).

Testimonial blocks: Star rating (0 hides the stars), Quote, Author, Detail (a city, or “Verified buyer”), Author photo, Product — which links the testimonial to the product it is about.

These are quotes you write from what customers told you. They are not collected reviews, and they should not be presented as if they were.

Trust bar

Two to four short promises in a band: shipping, returns, materials, guarantees.

Width (Inset / Full width), Alignment (Left — icon beside text, or Center — icon above text), Items per row on mobile (1 or 2), Show dividers.

Item blocks: Custom icon (shown at 32 × 32, replaces the built-in icon), Icon from the same nine, Title, Text.

Scrolling marquee

A band of text or logos moving sideways — announcements, or the publications you were in.

Setting	Notes
Accessible name	Read out by screen readers, e.g. “As seen in”. Defaults to the first text.
Text size	Small to Extra large.
Separator	None / Dot / Star / Slash.
Speed, Direction, Pause on hover
Show top and bottom borders
Logo height, Grayscale logos

Blocks: Text (with optional link) and Logo (image, Name used as alt text, link).

The marquee stops moving entirely for visitors who prefer reduced motion.

Video

Setting	Notes
Shopify-hosted video	Preferred: it can autoplay muted and it is served by Shopify.
YouTube or Vimeo link	Available when no Shopify video is picked.
Video description	Describes the video for screen readers. Write it.
Playback	Play button or Muted autoplay loop (Shopify-hosted videos only).
Cover image	Defaults to the video’s own preview image.
Width	Inset or Full width.
Shape	Widescreen 16:9 / Cinema 21:9 / Landscape 4:3 / Square / Vertical 9:16.

An autoplaying video is the heaviest thing a home page can carry. If the home page’s speed matters to you, use Play button.

Setting	Notes
Layout	Plain or Panel.
Arrangement	Text beside the form or Stacked, centered.
Subheading, Heading, Text
Submit button	Text or Arrow.
Button label	Defaults to “Subscribe”. With the arrow, it is read out by screen readers.
Button style	Text buttons only.

Subscribers arrive in Customers in the admin, marked as accepting marketing.

Collapsible content

An accordion — the FAQ section.

Setting	Notes
Layout	Plain or Panel.
Heading position	Above the rows or Beside the rows (a column on the left on desktop).
Subheading, Heading, Text
Open the first row
Open one row at a time
Add FAQ structured data	Helps search engines show your questions in results. Use it for one FAQ section per page.

Row blocks: Heading, Content, and Content from a page — a page from your store shown after the text, so a long answer can be maintained in one place.

Blog posts

Setting	Notes
Blog, Number of posts	2–12.
Layout	Grid or Carousel. Posts per row on desktop 2–4 — article cards need the width, so this grid stops at 4.
Show featured image, Show date, Show author, Show excerpt
Image shape	Portrait / Square / Landscape.

Contact form

Layout (Plain / Panel), Heading position (Above / Beside the form), Subheading, Heading, Text, Show phone field, Button style, Full-width button.

Messages arrive in the store’s contact inbox — the email address in Settings → Store details.

Custom quote

A quote request form with fields you define: the section for commissions, bulk orders and one-offs. Requests arrive in the store’s contact inbox, each field under its label.

Setting	Notes
Layout, Heading position	As the contact form; Beside puts the heading and the steps in the left column.
Subheading, Heading, Text
Show phone field
Message field label	Default “Project details”.
Button label, Button style, Full-width button
Confirmation message	Shown after a successful send.

Blocks:

Field — Label, Type (Text / Multi-line text / Number / Date / Link), Placeholder, Help text, Required.
Dropdown — Label, Options (comma separated), Required.
Step — Title and Text. Steps are listed under the heading, numbered in order: “tell us what you need”, “we send a price”, “we make it”.
App blocks are accepted, if you use an app for file uploads.

The form has no file upload of its own — Shopify’s contact form cannot carry attachments. The intended pattern is a Field of type Link where the customer pastes a link to their sketch, photo or 3D file.

Featured product

One product, with its gallery and buy buttons, inside a home page.

Product, Subheading, Title size, Show short description, Show quantity selector, Show dynamic checkout buttons, Show “View full details” link, Media position / Media width on desktop, and the gallery settings: Show “View in your space” (AR) button, Start on the 3D model, Transition, Media frame, Image fit.

With Start on the 3D model on and a product that has a model, this section opens on the model — a lighter alternative to the 3D spotlight when you do not need points of interest.

Product recommendations

Subheading, Heading, Products (Related — picked automatically by Shopify, or Complementary — the ones you set in the Search & Discovery app), Number of products 2–10, Layout (Carousel / Grid), Products per row on desktop 2–5.

Complementary products are worth the setup: on a made-to-order shop they are how a customer finds the matching lid, mount or stand.

Before / after

Two photographs in one frame with a handle between them. Visitors drag it — anywhere on the image with a mouse, on the handle on a phone — or move it with the arrow keys.

Setting	Notes
Layout	Heading above (heading, text and link over a full-width frame) or Text beside (the frame next to the copy, with Media position / Media width on desktop).
Subheading, Heading, Text, Link label
Before image, Before label, After image, After label	Leave a label empty to hide it. Use two images of the same size and framing.
Image shape	Original follows the before image.
Direction	Left and right or Top and bottom.
Handle start position	5–95%.

Content tabs

A row of tabs, each opening an image beside its own text — materials, care, sizing, shipping.

Setting	Notes
Subheading, Heading, Link label	Shown above the tabs.
Tabs alignment	Left or Center.
Media position on desktop, Media width on desktop, Image shape	Shared by every tab.

Blocks: Tab (up to six) — Tab label (defaults to the heading), Image, Subheading, Heading, Text, Button label / Button link / Button style. With a single tab the tab row is left out.

Scrolling content

A process or story told in steps. On desktop the image column stays in place while the steps scroll past it, and the image changes with each step; on phones every step shows its own image above its text.

Setting	Notes
Subheading, Heading, Link label	Shown above the steps.
Number the steps	01, 02, 03… above each heading.
Media position on desktop, Media width on desktop, Image shape	Original follows the first step’s image.

Blocks: Step (up to eight) — Image, Subheading, Heading, Text, Button label / Button link / Button style.

Countdown

A promotional band that counts down to a date — a sale, a launch, a shipping deadline.

Setting	Notes
Width	Inset (rounded panel) or Full width.
Arrangement	Text beside the timer or Centered.
End date, End time	`YYYY-MM-DD` and 24-hour `HH:MM`, in the store’s time zone (Settings → General). Until an end date is set the section shows only in the theme editor, counting to a sample date — visitors never see a made-up deadline.
Show seconds
Timer style	Plain numbers or Boxes.
When the time is up	Hide the section or Show a message (Message).
Subheading, Heading, Text, Link label
Image, Overlay opacity	An optional background photograph.

A newsletter sign-up or a promotion that opens over the page. Add it to the Header group to show it on every page, or to a single template.

Setting	Notes
Style	Centered, over the page (the page dims and waits; on phones it sits at the bottom of the screen) or Corner card (bottom left or right; the page stays usable).
Image, Image position	Beside or above the text (corner cards always above).
Subheading, Heading, Text
Action	Email sign-up (Shopify customer form, tagged `newsletter` and `popup`), Button (Button label, Button link) or None.
Message after signing up	Shown in the popup after a successful sign-up.
Dismiss link	A “No, thanks” text button. Leave empty to hide it.
Open	After a delay, After scrolling (a share of the page) or When the visitor is about to leave (desktop only; phones use the delay).
Show again after	Days a visitor who closed it won’t see it again. After signing up through it, they never do.
Show on phones

In the theme editor the popup opens when you select its section and closes when you leave it.

Apps

A section that holds app blocks (reviews, social feeds, loyalty widgets) anywhere on a page. Contain in page width, plus the colour scheme and section spacing. It shows nothing on the storefront until an app block is added.

Custom Liquid

A section for app snippets or code of your own. Liquid code, Keep within the page width, plus the colour scheme and section spacing.

Anything you put here is yours to maintain, and it is the one part of the theme we cannot support.