Sections and blocks

Add a section with Add section in the editor sidebar, drag sections to reorder them, and use the eye icon to hide one without deleting it. Blocks work the same way inside a section.

Most sections have a Color scheme setting and a Spacing setting. Spacing controls the space above and below the section: Tight, Standard, Airy, and on some sections Quiet pause for a deliberate rest between busy sections.

Home page sections

Opening title

The first section of the home page: a lead image or video, a heading, text, two links and optional Product credit blocks for “shop the look”.

• Layout: Plate: image beside the title, Letterbox: cinema frame above the title, or Overlay, which sets the heading on the image. With Overlay, choose the Title position: left or right.
• Desktop frame and Mobile frame set the image shape on each screen size. Mobile image is an optional separate crop for phones.
• Video plays muted and looped, with a pause button. Turn off Play video automatically to start it paused. It never plays automatically for visitors who have asked their device to reduce motion, or when Motion is Off.
• Product credit blocks (up to 4) list products from the image under the Credits label.
• Italicize a word in the Heading for the theme’s italic accent.

Campaign film

A wide campaign image followed by a short sequence of frames.

• Image ratio: Cinema, 2.39:1, Wide, 2:1 or Landscape, 16:9. Add a Mobile image for phones.
• Title placement: Above the image, On the image, left or On the image, right. When the title is on the image, set Title color on the image for contrast.
• Frame blocks (up to 4): an image with a caption, a note such as a time code, and an optional product link. Frame ratio sets their shape.
• Product row blocks (up to 4): products listed beside the frames.

Product showcase

Products from a collection, or a list you pick by hand.

• Feature and grid layout: one large Feature product with option buttons and Add to cart, beside a grid of four. If the grid has an odd number of products, a “view all” tile fills the gap using your Link label. Show installment offers adds Shop Pay Installments messaging when it’s available on your store.
• Row layout: 3 to 5 products per row (Products per row), with optional Category link blocks (up to 6) shown as tabs above the row.
• Products overrides Collection when you pick any.
• Supports app blocks and Custom Liquid blocks in the Feature and grid layout.

Collection list

Collection tiles for shopping by category, one Collection block per tile (up to 12).

• The tile image comes from the block’s Image, else the collection image, else the collection’s first product image. Label overrides the collection’s title.
• Layout: Grid, or Strip, which scrolls sideways on phones. Columns on desktop: 2 to 5.
• Set Image ratio and Product image style to match your photos. Show product count adds the number of products.

Steps

Numbered steps, each with an image, a heading, text and an optional product with quick add. Use it for a skincare routine, care instructions or how something is made.

• Step markers: Numbers (01, 02…) or Custom labels, for example AM and PM, set in each step’s Marker label.
• Up to 6 Step blocks. A step without an image uses its product’s image; a step without a heading uses the product’s title.

Jewelry feature

A featured piece with a specification table, detail images and more pieces from a collection.

• Hinge layout: a dark upper band whose image steps into the light lower band. Set the Upper color scheme and Lower color scheme.
• Single layout: one band with the piece and its details.
• Featured product, a Macro image for the close-up, and More pieces from a collection (2 to 12 products).
• Specification blocks (up to 6): label and value rows, for example “Material: 18k recycled gold”.

Contact sheet

Looks from a shoot, shown as a contact sheet. Choosing a frame shows that look and the products in it.

• Layout: Sheet beside the frame or Strip under the credits.
• Look blocks: an image, a Frame number, a caption and up to three products.
• Link anchor: a word that links can jump to. For example, with the anchor selects, a link to /#selects scrolls to this section.

Editorial spread

A campaign image with a heading, text and Product blocks placed around it. Choose the Campaign image side: left or right.

Collection sheet

Products from one collection in any collection layout (Sheet, Selects or Sequence), with its own Products to show (2 to 24), columns and image ratio.

Quiet pause

A single statement or quotation with an optional image and Attribution. Use it between busy sections.

Product recommendations

Shopify’s automatic recommendations, on product pages.

• Recommendation type: Related products (similar products) or Complementary products (products often bought together). Set up complementary products with the free Shopify Search & Discovery app.
• Show products from the same collection when there are no recommendations: until Shopify has enough order history, shows other products from the same collection under “More from [collection]”.
• The section hides itself when there is nothing to show.

Custom Liquid

Add your own Liquid or HTML on any template, for example to show a product metafield:

{%- if product.metafields.custom.care_instructions != blank -%}
  <p>{{ product.metafields.custom.care_instructions | metafield_text }}</p>
{%- endif -%}

Header and footer

Top bar

One short line above the header, for example delivery times or opening hours, with an optional Link. Add it in the header area with Add section → Top bar. Keep it accurate; the theme never adds claims of its own.

Header

• Logo image or Wordmark text, Logo height, and Logo position: center or left.
• Menu (Main menu by default). Show menu links in the bar shows the first four links on large screens. The Index button opens the full menu.
• Preview image blocks show an image beside a menu item in the Index.
• Sticky header, Transparent over the home page opening and Show predictive search.

See Navigation and menus for details.

Footer

• Show email signup, with a Signup heading and Signup text. Signups are saved as customers who accept marketing.
• Menu blocks, Text blocks and app blocks.
• Show country and language selectors, Show payment icons and Show Follow on Shop.
• Brand signature: your store name, or Signature text, set large across the bottom of the page. Choose the Signature size (Balanced or Full width), the Signature tone (Muted or Tone on tone) and Italic signature.

Bag drawer

The cart drawer. Choose its Color scheme and whether to Show accelerated checkout buttons. Selecting it in the sidebar opens it in the preview.

Page templates

Every template accepts a Custom Liquid section.