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
- In your Shopify admin: Online Store → Themes.
- Add theme → Import a zip file.
- Pick
volt.zip— the inner file from the package you downloaded, not the whole package. - 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 radiusandPop 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
Fontsto custom and pick any Shopify font, then tuneBase font sizeandHeading 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.
| Key | Type | What it does |
|---|---|---|
flavor_color | Color | The flavour's colour — used for the can in the hero, on product cards, in the bundle builder and on sister-flavour pills. |
flavor_siblings | Product (list) | The sister flavours of this product. The product page shows one pill per sibling, each in its own colour. |
price_per_can | Decimal | The 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 example39). 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 example50), with its own label. Set it to0to 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.