DEV3 Vitality: a supplements Shopify theme with supplement facts, a goal quiz and honest subscriptions

Requirements

• A Shopify store with the Online Store sales channel
• No app is required. Optional: a subscription app that uses Shopify selling plans for Subscribe & save, the free Shopify Search & Discovery app for collection filters, and a reviews app that writes the standard rating metafields.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to Shopify.

• dev3-vitality-1.0.0.zip: the theme. Upload this zip as it is; do not unzip it.
• Documentation/index.html: the full guide, including a compliance checklist. Open it in a browser.
• Demo-Content/: products.csv, seed.json, images/, models/vitality-deep-sleep-tub.glb and a README for the manual import.
• LICENSE.txt and START-HERE.txt.

Install the theme

1. In Shopify admin go to Online Store → Themes.
2. Click Add theme → Upload zip file and choose dev3-vitality-1.0.0.zip.
3. When the upload finishes, click Customize to preview it in the theme editor.
4. Click Publish when you are ready. Your current theme stays in the theme library.

Import the demo content (optional)

The demo brand Vitality Labs is fictional. Its formulas, amounts, lot numbers, lab results, reviews and authors are illustrative samples, not real products or advice.

1. Go to Products → Import and upload Demo-Content/products.csv. The CSV has no image URLs.
2. Add each product's images from Demo-Content/images/, following the file names in the demo README.
3. Settings → Custom data → Products: add custom.supplement_facts (JSON), custom.goals (list of single-line text) and custom.how_to (multi-line text), then paste the values from seed.json.
4. Content → Files: upload the theme images listed in the README (the templates refer to them by name).
5. Upload vitality-deep-sleep-tub.glb as media on the demo product named in the README for the 3D/AR gallery view.
6. Create the 8 collections, the pages with their templates (About, Our testing, Find your routine, FAQ, Contact, Shipping & returns), The Science Desk blog articles and the menus listed in the README.

A scripted seed that does all of this in one command is available from DEV3 support on request. It runs against your own store with your own Admin API token, and it tags everything it creates so it never touches your other products.

After the import

• Subscribe & save: install a subscription app that uses Shopify selling plans (for example the free Shopify Subscriptions app) and add your products to a plan. The block appears only on products with selling plans; elsewhere it shows your fallback note. The theme itself never bills.
• Before launch: replace every demo formula, amount, claim, lot code, certificate and review with your own verified data, keep the disclaimer near any claim and edit its text for each market you sell in.
• Set up payments, shipping and taxes in Shopify's own settings; checkout is Shopify's.

Updates

Download the new version from your DEV3 account and upload the new theme zip under Online Store → Themes → Add theme. It arrives as a new theme in your library: copy your settings across in the theme editor or re-apply your changes, then publish it.

Metafields and tags the theme reads

Create the metafields under Settings → Custom data → Products. All are optional.

• custom.supplement_facts (JSON): the Supplement facts table, e.g. { "serving_size": "3 capsules", "servings": "30", "rows": [{ "name": "…", "amount": "…", "dv": "…" }], "other": "…", "footnote": "…" }.
• custom.goals (list of single-line text): goal chips on cards, the stack builder and the product page. Colours exist for Sleep, Calm, Energy, Focus, Recovery and Immunity.
• custom.how_to (multi-line text): the How to take tab.
• reviews.rating and reviews.rating_count: stars (written by most review apps).
• Product tags: quiz matching and the tag-filtered "See all" links.

Vitality product section

The standard product section (variant picker with flavour swatches, buy buttons, collapsible tabs, app blocks, sticky add-to-cart bar) plus:

• Goal chips and four Highlights tiles.
• Supplement facts tabs: Supplement facts, How to take and a free-text tab. Without the metafield, use the fallback rows (Name | Amount | %DV, one per line).
• Subscribe & save: appears only when the product has selling plans from a subscription app; otherwise your fallback note shows. The theme never bills.
• Disclaimer: the standard US dietary-supplement statement by default. Edit it for each market.

Home page sections

• Vitality hero: "Supplements for" plus a cycling Goal word (each with a word, a colour and the tub's label text), up to 3 Floating chips, up to 3 Stats and the Supplement tub (3D) with tub and lid colours, a poster and an optional GLB URL.
• Shop by goal: up to 6 Goal blocks (collection, title, tagline, colour, icon, optional image).
• Product finder quiz: pick the collection, then up to 6 Question blocks with a weight (1–3). Each answer line is Label | tags | icon | goal name; use * for "no preference". Keep the small print.
• Sourcing & testing: Timeline step, Certificate test, Quality badge and Batch (COA) blocks; turn on Show batch lookup. Upload certificate PDFs under Content → Files. Publish only results you hold.
• Stack builder: a collection, how many products to show and how many start ticked. Real prices; no discounts are invented.
• Disclaimer: add it to the footer group or any template.

Page templates: assign page.about, page.testing, page.quiz, page.faq or page.contact under Online Store → Pages → Theme template.

Motion

A word-swap headline, split text, drawn icons, expanding panels, a timeline, a stamp, a filling tub, %DV bars and counters. Set the animation level (Off, Subtle or Full) and reveal style under Theme settings → Motion. With reduced motion, the page is static and fully visible and the tub shows a still frame.