Getting Started
Thank you for choosing Vitality by Denver Morrison-Massey. This guide will walk you through every feature of the theme so you can build a professional wellness or supplement store in minutes.
Installation
- Purchase and download Vitality from the Shopify Theme Store.
- In your Shopify admin, go to Online Store → Themes.
- Click Add theme → Upload zip file and select the downloaded file.
- Once uploaded, click Customize to open the theme editor.
- Choose a preset (Clinical, Botanical, or Performance) from Theme settings → Presets.
Vitality is a Shopify Online Store 2.0 theme. This means you can add, remove, and reorder sections on every page — not just the homepage.
Theme Presets
Vitality ships with three carefully crafted presets, each tailored to a different brand aesthetic. Selecting a preset updates colors, typography, and section styles across your entire store.
Font: Work Sans
Palette: Dark green, white, clean neutrals
A medical-grade, trustworthy aesthetic ideal for supplements, clinical nutrition, and pharmaceutical brands.
Font: Playfair Display
Palette: Earthy tones, warm neutrals, terracotta
An organic, editorial look for herbal remedies, natural skincare, and plant-based wellness brands.
Font: Oswald
Palette: Dark/black backgrounds, neon accents
A bold, high-energy design for sports nutrition, pre-workouts, and fitness supplement brands.
Applying a Preset
- Open the theme editor (Online Store → Themes → Customize).
- Click the paintbrush icon (Theme settings) in the left panel.
- Scroll to the Presets section.
- Select your preferred preset. All settings will update instantly.
Applying a preset will overwrite your current theme settings (colors, fonts, etc.). If you have customized these values, make a note of them before switching presets.
Color Schemes
Each preset includes 6 color schemes that can be applied to individual sections. This lets you create visual variety across your store while maintaining a cohesive palette.
| Scheme | Typical Use | Description |
|---|---|---|
| Scheme 1 | Default / Body | Primary background and text colors |
| Scheme 2 | Contrast sections | Alternate background for visual separation |
| Scheme 3 | Accent sections | Uses accent color as background |
| Scheme 4 | CTA / Highlights | High-contrast scheme for calls to action |
| Scheme 5 | Subtle contrast | Muted version for secondary content |
| Scheme 6 | Inverse / Dark | Dark background with light text |
Editing Color Schemes
Navigate to Theme settings → Colors in the theme editor. Each scheme has settings for background, text, button, outline button, and shadow colors. You can modify any scheme without affecting the others.
Typography
Vitality supports Shopify's full font library (1,000+ fonts) for both headings and body text. Each preset includes a recommended font pairing, but you can change these at any time.
| Setting | Location | Description |
|---|---|---|
| Heading font | Theme settings → Typography | Used for all headings (H1–H6) |
| Body font | Theme settings → Typography | Used for paragraphs, navigation, and UI elements |
| Font size scale | Theme settings → Typography | Global multiplier for base font size (90%–150%) |
| Heading style | Theme settings → Typography | Uppercase, capitalize, or sentence case |
Vitality preloads your chosen fonts and uses font-display: swap to prevent layout shifts. For fastest loading, stick with system fonts or the preset defaults.
Header Setup
The header section is highly configurable and supports several layout and behavior options.
Features
- Transparent mode — The header overlays the hero section with a transparent background, switching to opaque on scroll.
- Center logo layout — Places the logo in the center with navigation split on either side.
- Multi-level mega menus — Supports up to 3 levels of nested navigation with optional images and promotional blocks.
- Predictive search — Real-time search results appear as the customer types, showing products, collections, pages, and blog posts.
- Sticky header — The header remains visible as the customer scrolls down the page.
- Announcement bar — A dismissible banner above the header for promotions, free shipping thresholds, or important notices.
Configuration
- In the theme editor, click the Header section.
- Upload your logo and set the logo width.
- Choose your header layout (Logo left, Logo center).
- Select a navigation menu from the Menu dropdown.
- Enable or disable transparent mode, sticky behavior, and predictive search.
Mega Menu Setup
To create a mega menu, your navigation must have at least two levels. In Online Store → Navigation, create a menu with nested items. Any top-level item with children will display as a mega menu dropdown. You can add an image to any mega menu column by using a link with the format #mega-image-[url].
Homepage Sections
Vitality includes 40+ sections designed specifically for wellness and supplement stores. Below is a summary of the key sections available. All sections can be added to any page using the theme editor.
Hero Banner
Full-width banner with heading, subtext, CTA buttons, and optional video background. Supports overlay opacity control.
Marquee / Scrolling Text
Continuously scrolling text strip for promotions, trust badges, or brand messaging. Adjustable speed and direction.
Logo List
Showcase press mentions, certifications, or partner logos in a horizontal row with optional auto-scroll.
Collection Icons
Circular or rounded icons linking to collections. Perfect for category navigation on the homepage.
Benefits Grid
Icon-and-text blocks highlighting product benefits, brand values, or unique selling points.
Featured Collection
Display products from any collection in a grid or carousel layout with quick-add functionality.
CTA Banner
A bold call-to-action section with background image, heading, and button. Great for promotions or lead capture.
Image with Text
Side-by-side layout pairing an image with heading, body text, and a CTA button.
Testimonials
Customer reviews displayed in a carousel or grid. Supports star ratings, customer photos, and verified badges.
Newsletter
Email capture section with heading, description, and input field. Connects to Shopify's customer list.
Collapsible Content (FAQ)
Accordion-style FAQ section. Each item expands on click to reveal the answer. Supports rich text.
Product Recommendations
Displays Shopify's AI-powered product recommendations based on customer behavior.
Video
Embed YouTube, Vimeo, or Shopify-hosted video with autoplay, loop, and cover image options.
Countdown Timer
Creates urgency with a live countdown to a sale end date or product launch.
Before / After
Interactive image comparison slider for transformation results or product demonstrations.
Image Hotspots
Add clickable hotspot markers to an image that reveal product details or tooltips on interaction.
Recently Viewed
Automatically displays products the customer has recently browsed, encouraging return visits.
Custom Liquid
A flexible section for inserting custom Liquid code, third-party widgets, or custom HTML.
Age Verifier
A popup or full-page gate requiring age confirmation before accessing the store. Configurable minimum age.
Popup
Timed or exit-intent popup for email capture, discount codes, or announcements. Frequency control included.
Rich Text
A simple content section for long-form text, brand storytelling, or ingredient explanations.
Multicolumn
Flexible column layout for features, team members, or content blocks. 2–4 columns with icons or images.
Product Page
The product page template is designed to convert, with rich media support and trust-building features.
Media
- Image gallery with thumbnail navigation, zoom on hover, and full-screen lightbox.
- 3D models via Shopify's model viewer. Customers can interact with the model directly on the page.
- Product video support for Shopify-hosted, YouTube, and Vimeo videos in the media gallery.
Product Features
- Variant swatches — Color and image swatches for variant selection (configured via metafields or variant names).
- Pickup availability — Shows in-store pickup locations with real-time stock status.
- Shop Pay installments — Displays monthly payment breakdown for eligible products.
- Gift card recipient form — For gift card products, a form to enter the recipient's name, email, and a personal message.
- Related products — Displays products from the same collection or manually curated recommendations.
- Complementary products — Cross-sell section powered by Shopify's Search & Discovery app.
- Unit pricing — Displays price per unit (e.g., per 100g) for regulatory compliance.
- Selling plans / subscriptions — Full support for subscription apps with plan selector on the product form.
Available Blocks
The product page section supports the following blocks that can be added, removed, and reordered:
| Block | Description |
|---|---|
| Title | Product title with optional vendor name |
| Price | Current price, compare-at price, and sale badge |
| Variant picker | Dropdown or swatch selector for product variants |
| Quantity selector | Numeric input with increment/decrement buttons |
| Buy buttons | Add to cart and dynamic checkout buttons |
| Description | Product description with optional collapsible layout |
| SKU | Displays current variant SKU |
| Inventory status | Shows stock level or in/out of stock indicator |
| Collapsible tab | Expandable content block (e.g., ingredients, shipping info) |
| Share buttons | Social sharing links |
| Custom Liquid | Insert custom code anywhere in the product form |
| Rating | Star rating display (requires a reviews app) |
Collection Page
The collection template offers a polished browsing experience with built-in filtering and sorting.
Features
- Storefront filtering — Powered by Shopify's native storefront filtering API. Supports filter by availability, price range, vendor, product type, tags, and metafield values.
- Sorting — Sort by featured, best selling, alphabetically (A–Z / Z–A), price (low–high / high–low), and date (new–old / old–new).
- Grid layout — Configurable column count (2–4 on desktop, 1–2 on mobile).
- Active filter tags — Selected filters appear as removable tags above the grid.
- Collection description — Optional banner area displaying the collection image and description.
- Pagination — Standard page-based pagination with configurable products per page.
- Empty state — Friendly message displayed when no products match the current filters.
Sidebar Filters
Enable the filter sidebar in the collection section settings. Filters are configured via Online Store → Navigation → Collection and search filters in your Shopify admin. Vitality automatically renders the appropriate UI for each filter type (checkboxes, price range slider, color swatches).
Cart
Vitality offers both a dedicated cart page and a slide-out cart drawer for a seamless shopping experience.
Cart Drawer
The cart drawer slides in from the right when a customer adds a product. It displays line items, quantities, and a checkout button without leaving the current page. Enable or disable the cart drawer under Theme settings → Cart.
Cart Features
- Selling plans — Subscription details and frequency displayed per line item.
- Discount display — Automatic discounts and discount codes are shown with line-item and total savings.
- Unit pricing — Per-unit cost displayed for applicable products.
- Order notes — Optional text field for customer notes on the order.
- Free shipping progress — A configurable progress bar showing how close the customer is to free shipping.
- Cart recommendations — Suggested products displayed below the cart contents.
Customer Accounts
Vitality includes fully styled templates for all customer account pages.
| Page | Template | Description |
|---|---|---|
| Login | customers/login.liquid | Email/password login with "Forgot password" link |
| Register | customers/register.liquid | New account creation form |
| Account | customers/account.liquid | Order history and account details overview |
| Order | customers/order.liquid | Individual order details with line items and status |
| Addresses | customers/addresses.liquid | Manage saved shipping addresses |
| Activate | customers/activate_account.liquid | Account activation via email invitation |
| Reset Password | customers/reset_password.liquid | Password reset form |
All customer pages are automatically styled to match your chosen preset and color scheme. No additional configuration is needed.
SEO Settings
Vitality is built with search engine optimization in mind. The following SEO features are included out of the box.
- JSON-LD structured data — Product, Organization, BreadcrumbList, and Article schema markup is automatically generated for every page.
- Open Graph tags — Proper
og:title,og:description,og:image, andog:typetags for social sharing on Facebook, LinkedIn, and other platforms. - Twitter Cards —
twitter:cardsummary and large image cards for optimized sharing on X/Twitter. - Canonical URLs — Each page outputs a
rel="canonical"tag to prevent duplicate content issues. - Breadcrumbs — Hierarchical breadcrumb navigation displayed on product, collection, and blog pages.
- Clean heading hierarchy — Proper H1–H6 nesting across all page types.
- Responsive images — Uses
srcsetandsizesfor optimal image delivery. - Alt text — All images use the alt text set in Shopify admin or sensible defaults.
Always fill in the SEO fields (page title, meta description) for your products, collections, and pages in the Shopify admin. Vitality will use these values automatically.
Accessibility
Vitality is built to meet WCAG 2.1 Level AA standards. Accessibility features include:
- Skip to content — A hidden link at the top of every page that allows keyboard users to skip directly to the main content area.
- ARIA live regions — Dynamic content changes (cart updates, search results, filter changes) are announced to screen readers.
- Keyboard navigation — All interactive elements (menus, modals, accordions, carousels) are fully navigable with the keyboard.
- Focus management — Visible focus indicators and logical focus order throughout the theme.
- prefers-reduced-motion — Animations and transitions are automatically disabled for users who have enabled the reduced motion setting in their operating system.
- Color contrast — All preset color schemes meet minimum 4.5:1 contrast ratios for text.
- Semantic HTML — Proper use of landmark elements (
<header>,<nav>,<main>,<footer>) and ARIA attributes. - Form labels — All form inputs have associated
<label>elements.
FAQ / Troubleshooting
How do I change the fonts?
Go to Theme settings → Typography in the theme editor. You can choose from Shopify's full font library for both heading and body fonts.
How do I set up mega menus?
Create a multi-level navigation menu in Online Store → Navigation. Any top-level menu item with nested children will automatically display as a mega menu. See the Header section for details.
How do I enable the cart drawer?
In the theme editor, go to Theme settings → Cart and select "Drawer" as the cart type.
Why are my filters not showing?
Collection filters are managed in Online Store → Navigation → Collection and search filters. Make sure you have enabled the filters you want and that your products have the corresponding tags, metafields, or option values.
How do I enable transparent header?
In the theme editor, click the Header section and check "Enable transparent header". This works best when the first section on the page has a background image (like the Hero Banner).
How do I add structured data?
Structured data (JSON-LD) is generated automatically. Product pages include Product schema, blog posts include Article schema, and breadcrumbs include BreadcrumbList schema. No manual setup is required.
Can I use custom CSS?
Yes. Add a Custom Liquid section to any page and insert a <style> block. For global custom CSS, use the Custom CSS field in Theme settings → Custom code.
How do I set up the age verifier?
Add the Age Verifier section to your theme. Configure the minimum age, heading text, and button labels in the section settings. The verifier stores the customer's confirmation in a cookie so they are not asked again on subsequent visits.
My images look blurry. What should I do?
Ensure your source images are high resolution. Vitality uses responsive images and will serve the appropriate size for each device. For hero banners, we recommend images at least 2000px wide. For product images, 2048×2048px is ideal.
How do I get support?
Visit our Support page to submit a request. We respond within 2 business days.