Skip to content

EDITION 005DOCUMENTATION

Terroir
Setup guide

Most of this theme installs in ten minutes. One step — the metafields — takes another ten and is the one that matters: it is what fills the lot sheet, the tasting notes and the allergen block. Bought the theme? The same guide is in your package, offline.

1. Install the theme

  1. In your Shopify admin: Online Store → Themes.
  2. Add theme → Import a zip file.
  3. Pick terroir.zip — the inner file from the package you downloaded, not the whole package.
  4. It appears in your library as TERROIR, unpublished. Customize to work on it; publish when you are ready.

If Shopify says the file is not a valid theme, you have almost certainly uploaded the outer package. Unzip it first.

While you are there: Online Store → Pages → Add page, name it Contact and pick the contact template — the default menu links to it, and the theme ships a full contact form with info blocks for your hours and address.

2. Colours — the one thing to know

TERROIR is a dark theme, and product data sits on unbleached paper. That means copper exists twice in the settings, and so does verdigris:

  • Accent — used on the dark cellar surfaces.
  • Accent on paper — a darker copper for the light surfaces the lot sheet and price sit on.

This is not decoration. The cellar copper measures 2.74:1 against the paper, well under the 4.5:1 body text needs to be legible. If you change one, change both. The same applies to Provenance and Provenance on paper.

One more pair worth understanding: Hairline is a decorative divider and is allowed to be faint, while Control border draws the edges of fields and buttons and needs to stay at 3:1 against the background — otherwise a person with low vision cannot find the input. Every default in the theme is measured, and the table is in docs/ACCESSIBILITY.md inside your package.

3. Metafields — the step that makes the theme

The lot sheet, tasting notes, brewing guidance and allergen block all read product metafields. Until you create them, those blocks have nothing to show and stay invisible — the theme will look like it is missing half of what you paid for.

Settings → Custom data → Products → Add definition. Namespace terroir, then the key from the tables below. Under Storefronts, make sure Storefronts can read this metafield is on — without it the theme cannot see the value and the row stays blank with no error to tell you why.

The lot sheet

KeyTypeExample
originSingle line textHuila, Colombia
producerSingle line textNelson Ramírez
regionSingle line textSan Agustín
altitudeSingle line text1 850 m
varietalSingle line textCaturra, Castillo
processSingle line textWashed, 36 h
harvestSingle line textMarch 2026
vintageSingle line text2021
lot_numberSingle line textCO-HU-114
weightWeight250 g
abvSingle line text13.5 % vol
certificationSingle line textOrganic (FR-BIO-01)

origin earns its keep twice over: it sits above the product title in verdigris and on every product card. Leave it empty and the theme falls back to the product's vendor.

Scales

roast and intensity, both Integer. The Scale block draws a copper gauge; add it twice if you sell both coffee and wine. The number of steps is a section setting, so 3 on a five-step scale reads “3/5”.

Tasting notes

aroma, palate, finish, pairing, serve — all single line text.

How to prepare

method, grind, dose, water, temperature, time, ratio — all single line text.

Composition and allergens

ingredients, allergens, nutrition, storage, responsible — all multi-line text.

The allergen line is always shown. If allergens is empty, the theme prints “No declared allergens.” rather than leaving the line out. A missing line is not the same statement as “there is nothing to declare”, and this is exactly the field a buyer with an allergy came to read.

If you sell food in the EU, this is not decoration: Regulation 1169/2011 requires allergen information to be available before the purchase is concluded — on the product page, not on the packet that arrives three days later. Nothing here is legal advice, and the theme cannot check what you type. What it guarantees is that whatever you enter is displayed, clearly, before checkout.

Filling them in quickly

For more than a handful of products, use the product CSV export: Shopify adds metafield columns once the definitions exist. Export, fill the columns in a spreadsheet, re-import. Shopify's bulk editor works too — Products → select all → Bulk editAdd columns.

4. Turning origin into a filter

Once the metafields hold values: Products → Collections → Filters → Add filter, and pick your terroir.origin and terroir.process metafields.

They then appear in the sidebar on collection and search pages, with counts, exactly like price and availability. The filters work with JavaScript switched off — the form submits and the page reloads — and are upgraded to a live refresh when it is available.

5. Subscriptions

TERROIR builds on Shopify selling plans, the platform's own subscription mechanism, so it works with any app that uses them — Shopify Subscriptions, Recharge, Seal, Appstle — and nothing is tied to one vendor.

Install your app, create a selling plan group, assign products to it. There is nothing to configure in the theme. On any product with plans the buy area becomes a set of choices: one-time purchase at the normal price, then one row per frequency at the plan's price with the saving shown beside it.

Allocations can differ per variant, so a 250 g bag and a 1 kg bag can be on different plans at different discounts — the buy area follows whichever the buyer selects. A subscription-only product simply has no one-time row.

6. Pickup in store

Nothing to switch on. If you have local pickup enabled at a location (Settings → Shipping and delivery → Local pickup), the product page shows availability for the selected variant, and refreshes it when the buyer changes variant.

Availability is per variant and per location — a 250 g bag can be on the shelf while the 1 kg is not — which is why it cannot be answered once for the whole product.

7. Age verification

In the theme editor it lives in the footer group, not in theme settings. Switch it on and list the countries it applies in as ISO codes: FR, DE, IT. Leave the list empty to apply it everywhere. You choose how long the answer is remembered.

It is drawn over a page that has already rendered. That is deliberate: your shop stays indexable by search engines, and a visitor whose JavaScript failed is not met with a blank page. It is a compliance gesture and not a security control — nothing behind it is protected from someone determined to look.

8. Store locator

Add section → Store locator, then one block per stockist: name, address, hours, phone, and a directions link.

The map is an image you upload, not an embedded map service. That means no third-party script, no consent banner, no API key to renew, and no map that breaks on a billing change. Export a map from any tool you like and upload the picture.

9. Checkout

Express payment buttons. The product page and the cart show Apple Pay, Google Pay, Shop Pay and any other accelerated method your store accepts, so a buyer can pay in one tap without creating an account. Turn them off with Show express payment buttons on the Buy buttons block.

These come from Shopify, not from the theme: they appear only once accelerated checkouts are on in Settings → Payments → Shopify Payments → Manage → Wallets, each visitor sees only the methods their own device supports, and nothing shows while the store is still password-protected.

Unit price. Anything sold by weight or volume shows a price per kilo or litre automatically, wherever a price appears. In the EU this is required by Directive 98/6/EC. It comes from Shopify's own variant measurement — set it on the variant and the theme does the rest.

Checkout in your colours (optional). Settings → Checkout → Customize: background #12160F, surfaces #E9E4D8, accent #C0793F.

10. Bonus: order-confirmation email

bonus/order-confirmation.html in your package styles the order confirmation in the theme's own colours, and shows the unit price and the subscription plan on each line.

Settings → Notifications → Order confirmation → Edit code, then replace the HTML body with the file's contents. Copy the existing code somewhere safe first — Shopify's default carries logic for every kind of order you might take, and getting it back means resetting to the default.