Every section shares the Layout settings: color scheme, width (page, narrow or full), side padding, top and bottom space (desktop and mobile) and Link name. Top and bottom space on desktop is the value on a 1200 px wide screen and grows or shrinks a little with the screen, so sections keep their rhythm on laptops and large monitors. A Link name lets a link jump to the section: Link name shipping on a page makes /pages/help#shipping scroll to it.
Headings are inline rich text: put words in italic to show them in the secondary color (the two-tone look). Heading width (in characters) chooses where a heading wraps.
Header and footer
- Announcement bar: rotating messages with arrows, optional autoplay and a country/language selector.
- Header: logo position, menu, search, account, cart, sticky behaviour (always, hide on scroll down, off), see-through over a first section that supports it. Blocks: Menu feature card (image card inside a mega menu), Mobile menu links (short links at the foot of the mobile menu), app blocks.
- Footer: blocks Service strip item (the row of promises), Brand (logo, line, customer care, social icons), Menu, Text, Email signup, Social media. Each block has its own column width on desktop, tablet and mobile. Policies, payment icons, copyright and localization are footer settings.
Home page and general sections
| Section | What it does |
|---|---|
| Product stage | Full-screen hero: product name huge behind the product, swatches, size picker, add to cart, optional ruler and dial. Slides come from a collection or Product slide blocks (override the word, image and background). Image style: cut-out (floating) or photo (framed). |
| Statement | Big centred sentence with photo pills between the words (Text and Image pill blocks). |
| Featured products | A carousel or grid from a collection or a hand-picked list, with optional heading button. |
| Featured product | One product with its whole buy form (title, price, options, quantity, buttons, description, Custom Liquid and app blocks) beside its gallery. Pick the product in the section settings. |
| Image cards | Large linked image cards (one wide plus smaller ones) from collections or links. |
| Mosaic | Four photo tiles around one feature card (product cut-out on a dial, heading, button). Give linked tiles a Link label. |
| Product spotlight | A framed product panel with feature points, specs and color switcher. |
| Scrolling text | One or two rows of scrolling phrases with optional small images between them. |
| Testimonials | Portrait cards and quote cards in a scrolling row with arrows. |
| Images with facts | Two photos, a heading, text, a button and numbered facts. |
| Rich text | Heading, text, buttons and an image, centred or left. |
| Image with text | Image beside text blocks: Heading, Text, List item (with an optional label like Day 1, or automatic 01, 02), Quote, Big value, Buttons. Optional framed panel. |
| Image banner | Image with text on top or on a panel; heights from small to full screen; separate mobile image. |
| Columns | Columns with image, big value, title, text and link; plain, card or line style; optional numbering; swipe row on mobile. |
| Collage | A large item beside smaller ones: images, products, collections, videos. |
| FAQ | Questions and answers with FAQ structured data. Use several FAQ sections with Link names for a topic page. |
| Email signup | Newsletter form. |
| Video | Shopify-hosted, YouTube or Vimeo video with a cover image. |
| Blog posts / Collection list | Cards from a blog or a set of collections. |
| Custom section | A page builder: add theme blocks (group, columns, heading, text, image, button, spacer, feature, product, collection, accordion, video) and app blocks freely. |
| Custom Liquid / Apps | Your own code, or app blocks. The Apps section also takes Custom Liquid blocks. |
Product page
Product information is built from blocks you can reorder: Badge, Title (with optional price beside it), Vendor, Price (turn off Show price if the title shows it; it still shows Shop Pay Installments), Rating, Text (connect any metafield), Feature chips, Description, Variant picker (swatches as images, dots or text; other options as buttons or a dropdown), Size guide link (a page opens in a side panel; place it beside an option name such as Size or on its own row), Quantity, Buy buttons, Delivery and perks, Pickup availability, Collapsible row (from a metafield, text, list, description or page), Specs, Share, Separator, Custom Liquid, app blocks.
Gallery settings: thumbnails rail or grid, image shape (or adapt to each image), group images by color, zoom, cut-out style for transparent images.
Also on the product template: Product details panel (specs and rows from any metafields, with an image), Product reviews (app block slot; fallback from custom.review_text), Product recommendations (set Products to Related or Complementary: complementary products are the ones you pick per product in the Search and Discovery app, shown as “Pairs well with” in the demo).
Collection, search and cart
- Product grid: collection heading with title suffix, description, breadcrumbs, optional collection image; tabs from a menu; filters panel; sort; columns per breakpoint; load more or numbered pages; Promo tile blocks placed at a position in the grid.
- Search results: the same grid with filters and sort, plus articles and pages.
- Cart: lines, note, free-shipping bar, suggested products; the cart drawer shares the same settings.
Inner pages
| Section | What it does |
|---|---|
| Page heading | Breadcrumbs, heading (empty uses the page title), text and an optional contact card. |
| Page content | The page’s own content from the admin. |
| Size finder | Shoppers slide to their measurement and see their size in every system you list. Add Size row blocks from small to large (Up to value + one value per result column). Optional second unit, a two-option toggle with its own note, a button with [size], a ruler drawing (optionally with a foot outline) or your own image. |
| Table | Size charts and spec tables: column headings and rows with | separated cells. |
| Products with notes | Product cards with one note each, read from a product metafield (for example custom.fit). |
| Jump links | A pill bar linking to sections on the same page by their Link name; can stay on screen and highlights the section in view. |
| Contact form | Contact details beside Shopify’s contact form, with optional phone and order number fields. |
| Blog posts / Blog post | Blog listing with tag filters and a large newest post; article page with share and comments. |
| Collections list | All collections as image cards. |
| 404 page | Big 404, search and a button, plus any sections below. |
| Password page | Email signup and a password panel, with an image. |
| Sign in, Create account, Reset password, Activate account, Account, Order, Addresses | Legacy customer account pages (see the setup guide). |