DEV3 Vitality – Supplements & Wellness Shopify Theme (Online Store 2.0)

DEV3 Vitality is a Shopify theme for supplement, vitamin and wellness brands. It is bright and clean (Archivo and Barlow, an off-white, deep green, pale lime and electric lime palette, drawn line icons) with lively motion and one 3D object: a supplement tub with a ribbed lid that turns slowly while two-tone capsules orbit it in the hero.

Shop by goal and a product finder quiz

• Vitality hero: the heading cycles through goal words that you set, and the tub's label, the capsules, the particles and the background glow recolour to match each one. Up to 3 floating chips and 3 counting stats.
• Shop by goal: up to 6 colour panels, each linked to a collection (the demo uses sleep and calm, energy, focus, recovery and immunity), that expand on hover or keyboard focus and become swipe cards on phones.
• Product finder quiz: up to 6 questions with weighted answers that match product tags. It ranks the products of any collection in the visitor's browser, shows the best matches with a match percentage and links to the tag-filtered collection. No app, and it stores nothing. Its small print says it is general guidance, not medical advice.

Supplement facts and a compliance-minded product page

• Supplement facts: a real, accessible HTML table (with a caption and row and column headers) filled from a JSON metafield or from block settings, with servings, footnotes, other ingredients and animated %DV bars. It sits in tabs next to How to take and a free-text tab such as sourcing.
• Disclaimer: an FDA-style disclaimer block for the product page and a disclaimer section for the footer or any template, prefilled with the standard US dietary-supplement statement and editable for each market you sell in.
• Goal chips from a list metafield and four highlight tiles (for example vegan or tested).
• The theme makes no health claims of its own. The docs include a compliance checklist: replace every demo formula and amount with your verified label data, keep the disclaimer near any claim, publish only lab results you hold and only show discounts that exist.

Subscribe & save, honestly

• The Subscribe & save block appears only when the product has selling plans from a subscription app (such as the free Shopify Subscriptions app). Shoppers choose one-time or subscribe, pick a frequency, and the plan is sent with the cart line; prices and the "Save x%" badge follow the selected variant.
• Without selling plans the block shows your fallback note instead. The theme never bills and never simulates a subscription.

Stacks and a testing story

• Stack builder: shoppers tick products from a collection and add them all to the cart in one request while a tub fills. Prices are the real variant prices; the section invents no discounts.
• Sourcing & testing: a scroll-drawn timeline, an animated certificate of analysis with a "PASSED" stamp, quality badges and a lot-number lookup driven by batches you enter, each linking to its certificate PDF. The demo certificate and lot codes are samples.
• Page templates for About, Our testing, Find your routine (quiz), FAQ and Contact.

Online Store 2.0, built from scratch

• Our own Online Store 2.0 base, built from scratch (not a Dawn fork): JSON templates, sections everywhere, app blocks, and header and footer section groups. Every section can be added, reordered, duplicated or hidden in the theme editor.
• Cart drawer that updates in place with a free-shipping meter and upsells, predictive search, quick view and quick add, Storefront filtering and sorting (with the free Search & Discovery app), flavour swatches, recommendations, recently viewed, sticky add to cart, mega menu, country and language selectors, customer accounts, gift card and password pages.
• Native 3D model media: upload a .glb or .usdz to a product and the gallery shows Shopify's 3D viewer with a "View in your space" AR button on supported phones. The demo tub ships with its model.
• Motion settings: animation level Off, Subtle or Full, reveal style, duration and stagger. Word-swap headline, drawn icons, a stamp, a filling tub and counters; visitors who ask for reduced motion always get a static, fully visible page and a still 3D frame.
• The 3D engine (three.js) is not part of the initial page load: it downloads only when the hero object is near the viewport and pauses offscreen. Without WebGL, a poster image shows instead. The initial JavaScript is about 28 KB gzip.
• Shopify Theme Check: 0 errors. The theme was tested on a Shopify development store, from add to cart to the cart drawer and cart page.

There is no public live demo, because the demo runs as an unpublished preview on a password-protected development store. Watch the video tour at the top of this page, or step through the screenshots at desktop, tablet and phone sizes.

What's in the download

• dev3-vitality-1.0.0.zip: the theme. Upload this zip itself under Online Store → Themes → Add theme → Upload zip file.
• Documentation/: the HTML guide (open index.html).
• Demo-Content/: products.csv, seed.json, images/ and models/vitality-deep-sleep-tub.glb, plus a README for the manual import.
• LICENSE.txt and START-HERE.txt

The demo is the fictional Vitality Labs brand: 16 products (28 variants, 3 of them stacks), 8 collections, 6 pages, a Science Desk blog with 4 articles, 54 rendered images and a 3D tub model. Formulas, amounts, lot numbers, lab results and reviews are illustrative samples, not real products or advice. Import it with Products → Import (CSV) and follow the demo README for images, metafields, collections, pages and menus. A scripted seed is available from DEV3 support on request; it runs against your own store with your own Admin API token.

Requirements

• A Shopify store with the Online Store sales channel
• A subscription app that uses Shopify selling plans, if you want Subscribe & save (optional)
• The free Shopify Search & Discovery app for collection filters (optional)
• Product metafields for supplement facts, goals and how to take (optional; the docs list the definitions)

Support

Six months of support are included: installation, demo import and questions about the theme's features. Support does not cover legal or regulatory advice on your labels or claims. Read how we built Vitality for the design decisions behind it.