Skip to content

EDITION 006DOCUMENTATION

Volt
Setup guide

Most of this theme installs in ten minutes. Two steps deserve care: the volt metafields, which give every can its colour, and the flavour quiz, which you assemble from blocks in the theme editor. 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 volt.zip — the inner file from the package you downloaded, not the whole package.
  4. It appears in your library as VOLT, 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 theme ships a full contact page with a form built on Shopify's own contact endpoint.

2. Colours, pop style, typography

Three groups in Theme settings shape the whole look:

  • Colors — background, ink (text and borders), accent, surfaces. The ink colour does double duty: it draws the thick borders as well as the text, so keep it dark against the background.
  • Pop style — the bold borders and hard shadows that define VOLT's look: Border width, Corner radius and Pop shadow offset. Set the offset to 0 for a flatter, quieter storefront.
  • Typography — the theme ships Anton for headings and Space Grotesk for text, self-hosted under the SIL Open Font License: no request to Google Fonts, nothing to consent to. Prefer your own pairing? Switch Fonts to custom and pick any Shopify font, then tune Base font size and Heading scale.

One thing the colour settings do not control: each flavour's colour. That comes from a product metafield — next section — so a can keeps its colour everywhere it appears.

3. Metafields — one colour per flavour

Three product metafields under the volt namespace drive the flavour mechanics. Create each one under Settings → Custom data → Products → Add definition, namespace volt, then the key from the table. Under Storefronts, make sure Storefronts can read this metafield is on — without it the theme cannot see the value and falls back silently.

KeyTypeWhat it does
flavor_colorColorThe flavour's colour — used for the can in the hero, on product cards, in the bundle builder and on sister-flavour pills.
flavor_siblingsProduct (list)The sister flavours of this product. The product page shows one pill per sibling, each in its own colour.
price_per_canDecimalThe per-can price. When set, the product page prints it using the format string in the product section settings (e.g. “$2.50 / can”).

Fill flavor_color on every flavour first — it is the one the home page hero and the bundle builder read. A product without it falls back to the theme's accent colour rather than breaking.

For flavor_siblings, list the other flavours on each product, in the order you want the pills to appear. There is no automatic reciprocity: set it on each sister product.

4. The flavour quiz

The quiz is real and needs no app: it runs entirely on blocks you add in the theme editor. Two block types:

  • Question — the question text plus up to four answers. Each answer carries a profile word (for example sweet, sharp, mellow) — that is the score it casts.
  • Result — one per profile: the profile word it answers to, a title, a short text, and the linked product it recommends.

The visitor answers each question; the profile named most often wins, and its Result card shows with the linked product. Keep the profile words identical between answers and results — they are matched as plain text, and a typo means a profile that can never win.

Section settings cover the heading, the start and restart labels and an anchor ID, so a “Take the quiz” button anywhere on the page can point straight at it.

5. Bundle builder

Point the section at a collection — each product in it is one flavour (the first eight are shown, with the can drawn in its flavor_color). Then add one Pack size block per pack you sell: 6, 12, 24. The buyer picks a size, fills the pack, and one tap adds every can to the cart as separate lines.

The price break is yours to create. The builder fills the cart; the discount comes from Shopify so it applies at checkout no matter how the cart was assembled. In your admin: Discounts → Create discount → Amount off products, method Automatic, with a minimum quantity matching your pack size. One automatic discount per pack tier is the whole setup — no code on the theme side.

6. Subscriptions

VOLT 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 shows the subscription selector: one-time purchase at the normal price, then one row per frequency at the plan's price. Without an app, the selector simply never appears and products sell one-time.

7. Cart drawer — the two thresholds

The drawer's progress bar has two finish lines, both under Theme settings → Cart:

  • Free shipping threshold — a whole number in your store currency, without cents (for example 39). It must match your actual shipping settings — the bar is a display, not a rule: if Shopify still charges shipping at that amount, the bar promised something the checkout will not keep.
  • Gift unlock threshold — the optional second tier (for example 50), with its own label. Set it to 0 to disable the tier. The gift itself is yours to add — a free-gift discount or an app; the theme announces the tier, it does not add products.

The same group holds the cart upsell: pick a collection and the drawer suggests its first products not already in the cart.

8. Languages

The interface ships in English by default with a complete French translation included (locales/fr.json). To sell in French: Settings → Languages → Add language → French, then publish it. The storefront follows the language of the URL the visitor is on.

The footer embeds language and country/currency selectors (Shopify's own localization forms). Switch them on in the footer's settings — Show language selector and Show country/currency selector — and they appear as soon as your store publishes more than one language or ships to more than one market. With a single language and market they stay hidden, by design.

Any other language can be added through Shopify's standard translation system — every customer-facing string in the theme is translatable.