Section reference

Every section.

What each section is for, its settings and its blocks. Add sections in the theme editor with “Add section”. Every section also has a Colour scheme setting.

Setting names below match the theme editor in English. Settings marked with a “connect dynamic source” icon in the editor can be linked to metafields – see Metafields.

Header and footer group

Sections that appear on every page. Find them at the top and bottom of the editor sidebar.

Announcement bar

Short messages above the header – free shipping, a sale, a new collection. Slider or scrolling marquee.

Settings	Layout, Text size, Change every, Show arrows, Scrolling speed, Hide on home page, Show social icons on desktop, Show country and language selectors on desktop, Colour scheme
Blocks – up to 8	Announcement: Text, Link
Where	Only in header group

Header

Logo, main menu, mega menus, search overlay, account and cart. See the Guide for details on mega menus.

Settings	Logo, Logo height, Menu, Customer account menu, Layout, Sticky header, Transparent over the home hero, Show search, Popular searches, Products shown before typing, Heading for those products, Show collection images, Show mega menu promotions, Featured image, Featured image heading, Link, Show social media links, Show country and language selectors, Colour scheme
Blocks	Mega menu: Menu item title, Width, Style, Products per tab, Button label, Button link, Image, Image ratio, Heading, Subtext, Tag, Text on the image, Link
Where	Only in header group
Image sizes	Logo: SVG, or PNG with a transparent background at twice the display size (e.g. 500 × 160 px). Featured image: 1200 × 1500 px (4:5). Mega menu → Image: 1200 × 1500 px (4:5).

Footer

Brand text with newsletter signup, menus, text, social and payment icons, country/language selector and a large wordmark.

Settings	Show social icons, Show country/language selector, Show payment icons, Show large wordmark, Wordmark text (default: shop name), Colour scheme
Blocks – up to 6	Brand & newsletter (max 1): Heading, Text, Show newsletter form Menu: Heading, Menu Text: Heading, Text App blocks
Where	Only in footer group

Mobile dock

A bottom bar on phones with Home, Shop, Search, Account and Cart shortcuts.

A bottom bar with shortcuts, shown on phones only. Search, Menu and Cart open the drawers from the header.

Settings	Show Home, Action, Label, Link, Show Search, Show Account, Show labels, Hide while scrolling down, Colour scheme
Where	Only in footer group

Newsletter pop-up

Email signup pop-up with delay, exit-intent or scroll trigger, frequency control and an optional discount code.

Shown in the theme editor while this section is selected. Visitors see it once per chosen period, never on the cart page.

Settings	Open, Delay, Scroll depth, Show again after, Image, Image position, Show image on mobile, Small label, Heading, Text, Small print, Show “No, thanks” link, Discount code, Preview the sign-up confirmation, Colour scheme
Where	Only in footer group
Image sizes	Image: 1600 × 2000 px (4:5).

Cart extras

Controls the gift wrapping, order note, discount code field and delivery estimate in the cart drawer and cart page.

Controls the cart drawer and the cart page on every page. Customers don’t see this section itself.

Settings	Gift-wrap product, Label, Text, Show order note, Show discount code field, Show delivery estimate, Earliest delivery (business days), Latest delivery (business days), Delivery text
Where	Only in footer group

Compare tray

The floating tray that collects products picked with the “Compare” toggle.

Floating tray for products picked with the “Compare” toggle on product cards. Turn the toggle on in the collection page settings.

Settings	Comparison page, Show on every page, Colour scheme
Where	Only in footer group

Age verification

Asks visitors to confirm their age before they enter the store.

Shown in the theme editor only while this section is selected. Visitors see it on every page until they confirm their age.

Settings	Minimum age, Ask for, Date order, Remember confirmation for, Logo, Logo width, Heading, Text, Small print, Action, Message, Redirect link, Overlay opacity, Background blur, Colour scheme
Where	Only in footer group
Image sizes	Logo: SVG, or PNG with a transparent background at twice the display size (e.g. 500 × 160 px).

Heroes and banners

Big first impressions for the top of a page.

Hero

Full-width image or video with heading, text and two buttons. One image, or two images side by side.

Settings	Layout, Image, Second image (side by side), Mobile image, Video, Height, Content position, Image darkening, Colour scheme
Blocks	Small label (max 1): Text Heading (max 1): Heading, Size Text (max 1): Text Buttons (max 1): First button label, First button link, Second button label, Second button link
Image sizes	Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides. Second image (side by side): 1600 × 2000 px (4:5). Mobile image: 1200 × 1600 px (3:4), shown on phones only.

Slideshow

Several full-width slides (image or video) with autoplay, fade or slide transition, arrows and progress bars.

Settings	Height, Transition, Auto-rotate slides, Change slides every, Show arrows, Show progress bars, Colour scheme
Blocks – up to 6	Slide: Image, Mobile image, Video, Small label, Heading, Size, Text, Button label, Button link, Text link label, Text link, Content position, Text colour, Overlay opacity
Image sizes	Slide → Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides. Slide → Mobile image: 1200 × 1600 px (3:4), shown on phones only.

Images with text overlay

One to three images with text on top – use one for an image banner, two or three for campaign tiles.

Ready-made versions	Images with text overlay, Image banner
Settings	Height, Space between images, Width, Colour scheme
Blocks – up to 3	Image: Image, Mobile image, Small label, Heading, Text, Button label, Link, Style, Content position, Text colour, Overlay opacity
Image sizes	Image → Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides. Image → Mobile image: 1200 × 1600 px (3:4), shown on phones only.

Page header

Page header: heading above a full-width photo, split text and image, or a text heading with topic links.

Ready-made versions	Page header: photo, Page header: split, Page header: text with links
Settings	Style, Small label, Heading, Use page title as heading, Intro text, Image, Image fit (Split style), Width (Text style), Colour scheme
Blocks	Link: Label, Link
Image sizes	Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides.

Statement

One large serif statement – a brand promise or manifesto line.

Settings	Small label, Text, Colour scheme

Countdown

Promotion with a countdown to a date and time, with a message or hiding when the time is up.

Settings	Small label, Heading, Text, Button label, Button link, End date, End time, Use a fixed time zone, Time zone (UTC offset), When the timer ends, Message after the timer ends, Layout, Image, Background image darkening, Colour scheme
Image sizes	Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides.

Scrolling text

A moving line of large text (optionally with small images), for slogans or benefits.

Settings	Text size, Separator, Direction, Speed, Pause on hover, Every second item in italics, Show divider lines, Colour scheme
Blocks – up to 12	Text: Text, Link, Small image or icon
Image sizes	Text → Small image or icon: Square SVG or PNG, 96 × 96 px or larger, transparent background.

Products and collections

Show products and collections anywhere.

Featured collection

A grid or carousel of products from one collection, or several collections as tabs.

Settings	Grid width, Layout, Small label, Heading, Collection, Products to show, Columns on desktop, Show “View all”, Show quick view, Colour scheme
Blocks – up to 4	Tab: Collection, Tab label (default: collection title)

Featured product

A full product with gallery, options and add to cart, on any page.

Settings	Product, Small label, Layout, Image fit, Show short description, Style, Colour option style, Show quantity selector, Show dynamic checkout buttons, Show "View details" link, Colour scheme

Collection list

Collections as image tiles in a grid or carousel, with product counts.

Settings	Small label, Heading, Layout, Columns on desktop, Image ratio, Style, Show product count, Width, Colour scheme
Blocks – up to 12	Collection: Collection, Custom image, Custom title
Image sizes	Collection → Custom image: 1200 × 1500 px (4:5).

Shop by style

Shop-by tiles (for example by face shape, style or category) with titles and subtitles.

Settings	Small label, Heading, Text, Style, Image ratio, Columns on desktop, Colour scheme
Blocks – up to 12	Tile: Collection, Image, Title (default: collection title), Subtitle, Link
Image sizes	Tile → Image: 1200 × 1500 px (4:5).

Collection feature

One collection told as a story: big image, text, button and a list of links with product counts.

Settings	Collection, Image, Small label, Heading, Text, Label, Link, Layout, Colour scheme
Blocks – up to 10	Link row: Collection, Label, Link, Right-hand text
Image sizes	Image: 1600 × 2000 px (4:5).

Collage

A mosaic of images, products and collections in six layouts.

Ready-made versions	Collage, Collage mosaic
Settings	Small label, Heading, Layout, Height, Width, Alignment, Text colour, Image shade, Colour scheme
Blocks – up to 6	Image: Image, Small label, Heading, Link label, Link Product: Product, Custom image, Product image, Small label Collection: Collection, Custom image, Small label, Heading, Link label
Image sizes	Image → Image: 1200 × 1500 px (4:5). Product → Custom image: 1200 × 1500 px (4:5). Collection → Custom image: 1200 × 1500 px (4:5).

Shop the look

A lifestyle photo with hotspots – tap a dot to see the product and add it to the cart.

Settings	Image, Small label, Heading, Text, Layout, Colour scheme
Blocks – up to 6	Hotspot: Product, Horizontal position, Vertical position
Image sizes	Image: 1600 × 2000 px (4:5).

Shop the feed

An Instagram-style grid of your own photos, each linked to a product or a post. You add the photos yourself – no account connection.

Settings	Handle, Icon, Heading, Text, Follow button label, Profile link, Desktop layout, Columns on desktop, Mobile layout, Image ratio, Width, Show captions on hover, Colour scheme
Blocks – up to 18	Post: Image, Caption, Link, Product
Image sizes	Post → Image: 1200 × 1200 px (1:1).

Lookbook scroll

Horizontal row of images that glides sideways as you scroll (desktop), with captions and linked products.

Settings	Small label, Heading, Text, Button label, Link, Style, Move the images sideways while scrolling, Image height, Image ratio, Gap between images, Show image numbers, Colour scheme
Blocks – up to 12	Image: Image, Width, Caption, Product
Image sizes	Image → Image: 1200 × 1500 px (4:5).

Comparison table

A table comparing products, plans or options side by side, with ✓ and ✗ values and a highlighted column.

Settings	Small label, Heading, Text, Center the heading, First column heading, Rows, Show product images, Show product prices, Sticky column names, Colour scheme
Blocks – up to 5	Column: Heading, Product, Subheading, Values, Highlight this column, Highlight label, Button, Link

Product comparison

The comparison page: products the shopper picked, side by side, with metafield rows and “Differences only”. Used on the page.compare template.

Shows the products a shopper picked with the “Compare” toggle, side by side. Add metafield rows as blocks.

Settings	Small label, Heading, Text, Show variant options, Show vendor, Show product type, Show availability, Show “Differences only” switch, Empty state button link, Colour scheme
Blocks – up to 6	Metafield row: Label, Metafield

Settings	Small label, Heading, Products to show, Layout, Columns on desktop, Grid width, Show quick view, Colour scheme

Images, text and storytelling

Editorial building blocks.

Image with text

An image beside a heading, text and buttons.

Settings	Image, Image ratio, Layout, Image / text width, Colour scheme
Blocks	Small label (max 1): Text Heading (max 1): Heading Text: Text Button: Label, Link, Style
Image sizes	Image: 1600 × 2000 px (4:5).

Editorial split

Editorial split: image on one side, heading, text, button and a list of links on the other.

Settings	Image, Image fit, Layout, Small label, Heading, Text, Label, Link, Style, Colour scheme
Blocks	Link: Label, Link, Note
Image sizes	Image: 1600 × 2000 px (4:5).

Rich text

Heading, text, large serif statement and buttons, centered or left.

Settings	Alignment, Colour scheme
Blocks	Small label (max 1): Text Heading: Heading, Size Text: Text Statement (large serif text): Text Button: Label, Link, Style

Columns with icons

Columns with icons, custom icons or images – benefits like free shipping and returns.

Settings	Heading, Columns on desktop, Style, Compact spacing, Colour scheme
Blocks – up to 8	Column: Icon, Custom icon, Image, Heading, Text, Label, Link
Image sizes	Column → Custom icon: Square SVG or PNG, 96 × 96 px or larger, transparent background. Column → Image: 1200 × 1500 px (4:5).

Numbered columns

Columns with large numbers (01, 02, 03) – steps or reasons.

Settings	Small label, Heading, Link label, Link, Columns on desktop, Show numbers, Spacing, Colour scheme
Blocks	Column: Heading, Text

Numbered list

A numbered list with a right-hand value (price, time) and an optional photo – services, lens options, steps.

Settings	Small label, Heading, Text, Image, Label, Link, Colour scheme
Blocks – up to 10	Row: Heading, Text, Right-hand value (price, time…), Link
Image sizes	Image: 1600 × 2000 px (4:5).

Guide grid (shapes)

A grid of shape icons (oval, round, square, heart …) or your own icons with text and links – for style guides.

Settings	Small label, Heading, Text, Columns on desktop, Colour scheme
Blocks – up to 12	Cell: Icon, Custom icon, Heading, Text, Label, Link
Image sizes	Cell → Custom icon: Square SVG or PNG, 96 × 96 px or larger, transparent background.

Info columns

Up to four short text columns, for example contact options.

Blocks – up to 4	Column: Heading, Text

Guide cards

Cards with a small illustration, heading, text and link – returns, warranty, care.

Settings	Small label, Heading, Header link label, Link, Columns on desktop, Top spacing, Bottom spacing, Colour scheme
Blocks – up to 6	Card: Icon or illustration, Small label, Heading, Text, Label, Link, Style
Image sizes	Card → Icon or illustration: 1200 × 1200 px (1:1).

Photo strip

Up to four photos in a row, optionally linked to products.

Settings	Space below, Colour scheme
Blocks – up to 4	Photo: Image, Product, Caption, Link
Image sizes	Photo → Image: 1200 × 1500 px (4:5).

Image comparison

Before/after image slider with a draggable divider.

Settings	Before image (left), Before label, After image (right), After label, Starting position of the divider, Image ratio, Small label, Heading, Text, Layout, Colour scheme
Image sizes	Before image (left): 2400 × 1600 px (3:2). Use the same size for both images. After image (right): 2400 × 1600 px (3:2). Use the same size for both images.

Video

Shopify-hosted, YouTube or Vimeo video with a cover image, or as a muted background video.

Settings	Small label, Heading, Text, Alignment, Shopify-hosted video, YouTube or Vimeo URL, Cover image, Video description, Play as background video, Width, Aspect ratio, Colour scheme
Image sizes	Cover image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides.

Timeline

Your story as dated entries, vertical or as a horizontal scroll.

Settings	Small label, Heading, Text, Layout, Center the heading, Image ratio, Colour scheme
Blocks – up to 16	Entry: Year or label, Heading, Text, Image
Image sizes	Entry → Image: 1200 × 1500 px (4:5).

Number counter

Key figures that count up when they come into view.

Settings	Small label, Heading, Text, Alignment, Size, Show dividers, Less spacing, Count up when visible, Duration, Colour scheme
Blocks – up to 4	Figure: Number, Prefix, Suffix, Label, Text

Testimonials

Customer quotes with star ratings and photos.

Settings	Heading, Columns on desktop, Colour scheme
Blocks – up to 9	Quote: Stars, Quote, Author, Detail, Image
Image sizes	Quote → Image: 1200 × 1200 px (1:1).

Logos / press

Press logos or rotating press quotes.

Ready-made versions	Press quotes, Logo list
Settings	Small label, Heading, Layout, Logo height, Grayscale logos, colour on hover, Rotate quotes automatically, Change quote every, Colour scheme
Blocks – up to 12	Logo: Logo image, Name, Link, Quote
Image sizes	Logo → Logo image: SVG, or PNG with a transparent background at twice the display size (e.g. 500 × 160 px).

Blog posts

Settings	Heading, Blog, Posts to show, Columns on desktop, Show excerpt, Colour scheme

FAQ

Questions and answers, with optional FAQ structured data for search engines.

Settings	Small label, Heading, Text, Add FAQ structured data (SEO), Colour scheme
Blocks – up to 20	Question: Question, Answer

FAQ with topics

A larger FAQ grouped into topics with tabs.

Add a Topic block, then its Question blocks below it. Each question belongs to the topic above it.

Settings	Show heading area, Small label, Heading, Show all topics as one list, Add FAQ structured data for search engines, Colour scheme
Blocks – up to 50	Topic: Topic title Question: Question, Answer

Settings	Heading, Text, Colour scheme

Contact and stores

Contact form

A simple contact form.

Settings	Heading, Colour scheme

Contact hero

Contact page hero: photo on one side, a form with topics and order number on the other.

Settings	Image, Image caption, Small label, Heading, Text, Topics label, Topics, Require name, Show order number field, Button label, Success message, Colour scheme
Where	Only in page templates
Image sizes	Image: 3200 × 1800 px (16:9) or larger. Keep the subject centred – phones crop the sides.

Contact & map

Address, opening hours, phone and email with a Google map that loads only after a click (privacy friendly), or an image.

Settings	Small label, Heading, Text, Address, Opening hours, Phone, Email, Show directions link, Map source, Image, Map zoom, Image ratio, Map position, Privacy note, Show contact form, Colour scheme
Image sizes	Image: 1600 × 2000 px (4:5).

Store locations

Your shops as cards or a list with images, hours, phone and map links, plus an optional map.

Settings	Small label, Heading, Text, Layout, Columns on desktop, Show images, Image ratio, Show a map, Map address, Map source, Image, Map zoom, Privacy note, Colour scheme
Blocks – up to 24	Store: Image, Small label, Store name, Address, Opening hours, Phone, Email, Map link
Image sizes	Image: 1600 × 2000 px (4:5). Store → Image: 1200 × 1500 px (4:5).

Product page sections

Available on product templates. Most fill themselves from the product, its photos or metafields.

Product information

The gallery and buy area. Built from blocks – see the Guide for every block.

Settings	Gallery layout, Mobile gallery, Only show the selected colour's media, Image fit, Colour scheme
Blocks	App blocks Breadcrumbs (max 1) Small label (max 1): Text, Add tag with prefix Title (max 1) Price (max 1): Note next to the price Variant picker (max 1): Style, Colour option style Buy buttons (max 1): Show quantity selector, Show dynamic checkout buttons, Show pickup availability Inventory status (max 1): Low stock threshold Description (max 1) Text: Text, Style Specifications / measurements (max 2): Heading, Diagram, Custom diagram image, Unit, Label, Value, Fit note Benefits (max 1): Text Collapsible tab: Heading, Text, Page content, Open by default Share buttons (max 1) Badges (max 1): Show sale badge, Sale badge text, Show "New" badge, Show sold out badge, Show low stock badge, Low stock threshold, Custom badge, Custom badge style SKU (max 1) Icon list: Columns on desktop, Icon, Custom icon, Text Size guide (max 1): Label, Heading, Page content, Text Need help (max 1): Icon, Heading, Text, Label, Link, Email address Pairs well with (max 1): Heading, Products to show, Show related products when none are set Sticky add to cart (max 1): Show on desktop, Show on mobile Back in stock (max 1): Heading, Text, Button Custom field: Label, Field type, Dropdown options, Placeholder, Required, Maximum characters, Help text, Price note Volume pricing (max 1): Heading, Tiers, Note Buy it together (max 1): Heading, Include this product, Product 1, Product 2, Product 3, Button Custom Liquid: Custom Liquid
Image sizes	Specifications / measurements → Custom diagram image: SVG, or PNG 1600 × 700 px with a transparent background. Icon list → Custom icon: Square SVG or PNG, 96 × 96 px or larger, transparent background.

Product story

A large photo with heading and text – falls back to the product’s model photo, title and description.

Settings	Small label, Image, Heading, Text, Layout, Colour scheme
Where	Only in product templates
Image sizes	Image: 1600 × 2000 px (4:5).

Product feature rows

Numbered image and text rows. Each row can use the selected colour’s photo by its position.

Settings	Small label, Heading, Show numbers, Start with the image on the right, Colour scheme
Blocks	Row: Image, Product image number, Image fit, Heading, Text, Label, Link
Where	Only in product templates
Image sizes	Row → Image: 1600 × 2000 px (4:5).

Worn by (model photos)

A row of the product’s model photos (“Worn by”).

Settings	Heading, Photos to show, Colour scheme
Where	Only in product templates

Colour strip

All colours of the product as a strip of photos.

Settings	Small label, Heading, Heading with one colour, Colour option names, Minimum number of colours to show the section, Colour scheme
Where	Only in product templates

Specification sheet

A specification table next to the product photo or an eyewear measurement diagram. Connect rows to metafields.

Settings	Small label, Heading, Visual, Custom image, Layout, Unit, Rows that show the unit, Label, Value, Note, Colour scheme
Where	Only in product templates
Image sizes	Custom image: SVG, or PNG 1600 × 700 px with a transparent background.

Product recommendations

Related or complementary products.

Settings	Grid width, Heading, Type, Products to show, Columns on desktop, Show quick view, Colour scheme
Where	Only in product templates

Template sections

The main section of each page type. They can’t be removed, but they have settings.

Collection

The product grid with filters, sorting, pagination, column switcher, quick view, compare and promo tiles.

Settings	Grid width, Products per page, Columns on desktop, Columns on mobile, Show column switcher, Pagination, Enable filtering, Filter layout, Enable sorting, Show quick view, Enable compare, Colour scheme
Blocks	Promo tile: Image, Small label, Heading, Text, Link, Link label, Show after product, Width, Text colour, Image overlay
Image sizes	Promo tile → Image: 1200 × 1500 px (4:5).

Collection banner

Collection title, description and image as minimal, split or overlay banner.

Settings	Style, Fallback image, Height, Alignment, Image position, Image overlay, Text colour on image, Show description, Show product count, Show breadcrumbs, Colour scheme
Where	Only in collection templates
Image sizes	Fallback image: 2880 × 1000 px or larger, subject centred.

Collections list

The page listing all collections.

Settings	Columns on desktop, Colour scheme

Search results

Search results with filters and sorting.

Cart

The cart page with express checkout buttons and cart extras.

Settings	Show express checkout buttons, Show cart extras, Colour scheme

Blog

The blog page with a featured newest story, tag filter and story cards.

Settings	Heading, Intro text, Show tag filter, Feature the newest story, Full width, Columns on desktop, Image ratio, Stories per page, Show date, Show tag, Show excerpt, Colour scheme

Article

An article with cover layouts, drop cap, contents list, reading progress, share, previous/next and more stories.

Settings	Cover image, Show excerpt under the title, Show reading time, Show author, First paragraph, Number the section headings, Show “In this story” contents, Show reading progress bar, Add FAQ structured data (SEO), Show tags, Show share buttons, Show previous and next story, Show more stories, More stories heading, Colour scheme

Page

A standard text page.

Settings	Small label, Heading, Show “Still have a question?” line, Label, Link label, Link, Colour scheme

404 page

The page-not-found page.

Password page

The password page shown while your store is locked.

Quick view

The quick view window opened from product cards. It has no settings of its own.