Theme features

Theme features

How each part of the theme works and how to set it up. Product page features are in Customize: switch the selector at the top to Products → Default product.

Product pages and variants#

The Product information section is built from blocks you can add, remove and drag into order:

Title, Price, Variant picker, Quantity, Buy buttons, Description, Personalization intro, Personalization field, Size guide, Production & delivery, Seasonal notice, Collapsible row, Custom Liquid, and app blocks.

Variants#

• When a customer changes an option, the price, availability, images and buy button update for the exact variant they chose.
• Option values that are sold out or don't exist for the current selection are marked, so customers can see what's available.
• Products with a large number of variants (more than 250) are supported.
• A sticky add-to-cart bar appears once the main button scrolls out of view. Choose Mobile only, Mobile and desktop, or Off in the product section's Sticky add-to-cart bar setting.

Different layouts for different products#

1. In the template selector, choose Create template and set up the new layout.
2. In Shopify admin, open a product and choose the template under Theme template.

Colour swatches#

Print providers use colour names such as Heather Forest, Pepper or Oat. The theme turns these names into colour swatches automatically.

Go to Theme settings → Colour swatches.

1. Check the option nameMake sure your colour option's name is in Options shown as colour swatches. Common names such as Color, Colour, Couleur and Farbe are included by default.
2. Let the theme match coloursThe theme looks for a colour in this order: your Colour overrides, then swatches set in Shopify admin (product → option → swatch), then the built-in colour library of about 300 common blank-garment colours.
3. Fix anything that doesn't matchA colour the theme can't recognise is never guessed. It shows a neutral striped swatch with the colour name, or text buttons if you choose that option. Add an override for it.

Adding a colour override#

Add one line per colour to Colour overrides, in the form Colour Name = #HEX:

Glow in the Dark = #c8f5c0
Heather Forest = #3d5546

Names aren't case-sensitive. Overrides also correct any built-in colour you disagree with.

The same swatches appear on the product page, featured products, collection and search cards, and colour filters.

Colour galleries#

You can show only the images for the colour a customer has selected. Go to Product information → Gallery images and choose:

• All images (default)
• Selected colour only (variant images and alt text)
• Selected colour only, grouped in upload order (Printify / Printful): useful when your provider uploads images grouped by colour.

An image belongs to a colour if either:

• it is that colour's variant image, or
• its alt text starts with the colour name and a dash, for example Sage – back.

Images without a colour, such as size charts and lifestyle photos, show for every colour. If a colour has no images of its own, the full gallery shows, so the gallery is never empty.

Personalization fields#

Add fields#

1. Go to Customize → Products → Default product → Add block → Personalization field. One block is one field.
2. Choose the field type: Single line, Multiple lines, Dropdown or Checkbox.
3. Set the label, example text, required or optional, character limit and allowed characters.
4. Optionally add a Personalization intro block above the fields for instructions.

Choose which products show each field#

Each field has a Show on setting:

Use Hide on products tagged for exceptions.

What customers experience#

• Required fields are checked before the item goes in the cart, with clear messages.
• Accents and other alphabets are accepted by default. Only restrict characters if your print template can't show them.
• Buy it now is hidden on products with personalization fields, because express checkout can skip the theme's checks.
• Product cards, quick add and featured products send customers to the product page whenever that product has fields.

Where the text goes#

Entries appear on the order page in Shopify admin and in order emails. To show them on packing slips, add line_item.properties to Shopify's packing-slip template.

Size guides#

Add Add block → Size guide to the product page. The guide opens in a side panel, and wide tables scroll sideways on phones.

The theme uses the first guide it finds, in this order:

1. The product's own size-guide page (metafield vps.size_guide, page reference)
2. The product's own size-guide text (metafield vps.size_guide_text, rich text)
3. Rules that match tags or product types to pages, one per line, e.g. hoodie = hoodie-size-guide
4. A default page for all products
5. Text written in the block

Non-apparel products#

By default, the shared guides (4 and 5 above) are skipped when sizes are measurements, such as 11 oz or 12x18, and for product types in the block's skip list (Mug, Poster, Canvas and others). Edit the list to suit your shop. A product's own guide always shows.

No measurements are built into the theme. Use your provider's size charts.

Collections and filtering#

Collection pages#

• Collection banner: minimal, editorial split or full-width image. Breadcrumbs, description and product count are optional.
• Collection products: 2–4 columns on desktop and 1–2 on phones, quick add, colour dots, numbered pages or a "Load more" button, and up to two promo tiles.

An alternate template, collection.editorial, is included. Assign it to a collection in Shopify admin under Theme template.

Filters#

1. Install Search & DiscoveryInstall Shopify's free Search & Discovery app.
2. Choose your filtersIn the app, open Filters and add the ones you want, such as Colour, Size, Product type and Price.
3. Pick a layoutIn the Collection products section, choose a filter drawer or a desktop sidebar.

Filters also appear on search results. Colour filters use the same swatches as your product pages.

Quick add#

Quick add on product cards appears only for products that can be added straight away: one variant and no personalization. Everything else links to the product page.

Menus and mega menus#

Build your menu#

1. Go to Online Store → Navigation and open your menu, usually Main menu.
2. Add menu items. To make a dropdown, drag an item slightly to the right, under another item.
3. Menus can be three levels deep: a top-level item, its sub-items, and one more level under those.
4. In Customize → Header → Menu, choose the menu to show.

How dropdowns behave#

• Desktop: clicking a top-level item with sub-items opens its dropdown. The first link is always "View all" for that item, so its own page stays reachable. Third-level items appear under their sub-item. Press Esc to close.
• Phones and tablets: the menu icon opens a side drawer. Tap an item to expand it; each group also starts with "View all". Press Esc or the close button to close.

Keep top-level names short. With Logo position: Left, long menus have more room.

Mega menus#

A mega menu shows one top-level item's sub-items as a full-width panel, with up to two featured images.

1. In Customize, click the Header section, then Add block → Mega menu.
2. In Menu item, type the exact name of a top-level menu item, for example Shop.
3. Optionally add up to two featured images with captions and links.

If you rename the menu item later, update the block too.

Production and delivery information#

The Production & delivery block shows your made-to-order details. Production time and shipping always appear on separate lines, and the theme never calculates or promises an arrival date.

Add it: Product information → Add block → Production & delivery (one per page). Place it just below Buy buttons.

Use your provider's published production times. Set them a little longer if you review orders by hand.

Per-product details (metafields)#

Use metafields when one product is different, such as a hoodie that takes longer to make. Create the definitions once in Settings → Custom data → Products → Add definition, using the namespace and key exactly as shown. Then fill them in at the bottom of each product's page in admin. Empty fields use the block settings.

Seasonal notices#

A small inline note for holiday deadlines, production delays or seasonal shipping. It never pops up. You can add more than one.

Add it: Product information → Add block → Seasonal notice.

In the Theme Editor, a short grey note shows a notice's schedule, or why it's hidden. Customers never see these notes.