VitaBoost Documentation

This comprehensive guide covers everything you need to install, configure, and customize the VitaBoost Shopify theme. Use the sidebar navigation to jump to a specific section, or scroll through for the complete reference.

Getting Started

System Requirements

Luxe Fashion requires a Shopify store on any current plan (Basic Shopify, Shopify, Advanced, or Shopify Plus). The theme is built on Online Store 2.0 and requires no additional apps for core functionality.

Installation

After completing your purchase, you will receive a ZIP file containing the theme. Follow these steps to install it on your Shopify store:

1. Log in to your Shopify admin panel at your-store.myshopify.com/admin.
2. Navigate to Online Store > Themes in the left sidebar.
3. In the Theme library section, click the Add theme button.
4. Select Upload ZIP file from the dropdown menu.
5. Choose the downloaded ZIP file from your computer and wait for the upload to complete. This typically takes 15-30 seconds.
6. Once uploaded, the theme will appear in your theme library. Click Customize to open the visual theme editor, or click Actions > Publish to make it your live theme immediately.

Using Shopify CLI

If you prefer working with the command line, you can deploy the theme using Shopify CLI:

shopify theme push --store your-store.myshopify.com

This requires the Shopify CLI to be installed and authenticated with your store. Extract the ZIP file first, then run the command from the extracted directory. Refer to the official Shopify CLI documentation for setup instructions.

Theme Settings

Colors

Luxe Fashion provides a comprehensive color system that you can fully customize without any code changes. In the Shopify theme editor, navigate to Theme settings > Colors to configure:

• Primary color — Used for buttons, links, and accent elements throughout the theme. This is your brand's main action color.
• Secondary color — Applied to secondary buttons, badges, and supporting UI elements.
• Background color — The main background color for all pages.
• Text color — Body text color used across all content areas.
• Header background & text — Separate color controls for the site header, navigation links, and mobile menu.
• Footer background & text — Independent footer color settings for background, headings, and link colors.
• Sale / Badge colors — Customize the appearance of sale badges, "New" tags, and "Sold out" indicators independently.

Typography

Navigate to Theme settings > Typography to select fonts for headings and body text. You can choose from the full Shopify-hosted font library or provide a custom font URL. The theme supports:

• Heading font — Applied to all headings (h1 through h6), section titles, product names, and collection titles.
• Body font — Used for paragraphs, product descriptions, navigation links, form labels, and all general UI text.
• Font size scale — Adjust the base font size (default: 16px). All other sizes scale proportionally, so a single change updates the entire typographic hierarchy.

Layout

Under Theme settings > Layout, you can control the overall page structure and visual style:

• Content width — Set the maximum width of the main content area. Default is 1200px. Wider values work well for image-heavy stores.
• Section spacing — Control vertical padding between sections (small, medium, or large). Affects all pages globally.
• Border radius — Set the corner radius for buttons, cards, input fields, and image containers. Use 0 for sharp corners or larger values for a softer look.
• Enable animations — Toggle scroll-triggered fade and slide animations on or off globally. Disabling animations can improve performance on older devices.

Header & Navigation

Logo Setup

Upload your brand logo in the header section settings. For best results, use a transparent PNG or SVG file. Recommended dimensions: height between 40px and 60px. The theme will scale the logo proportionally based on the max-width value you set.

Navigation Menu

Select which Shopify navigation menu to display in the header. Create and manage your menus in Shopify Admin > Online Store > Navigation. The theme supports up to three levels of dropdown nesting for standard menus.

Mega Menu

For larger navigation structures, enable the mega menu on specific top-level menu items. Each mega menu column can display:

• Featured collections with product images
• Custom links organized in columns
• Promotional banners with images and CTAs
• Brand logos or category icons

To assign a mega menu, go to the header section in the theme editor and use the "Mega menu" blocks. Link each block to the corresponding top-level menu item handle.

Mobile Menu

The mobile menu automatically generates from your desktop navigation. On screens below 768px, the header collapses into a hamburger icon that opens a full-screen overlay menu. The mobile menu supports nested dropdowns with smooth accordion-style expand animations.

Hero Slider

Adding Slides

The hero slider displays full-width banner slides on your homepage. In the theme editor, select the hero slider section and click Add slide to create new slides. Each slide supports:

• Desktop image — Recommended size: 1920 x 800px or larger. Use high-resolution images for retina displays.
• Mobile image — Optional. If not provided, the desktop image is used with responsive cropping. Recommended: 750 x 1000px for a taller mobile-optimized view.
• Heading & subheading — Overlay text with customizable alignment (left, center, right) and color.
• Button — Call-to-action button with configurable text, URL, and style (filled or outline).
• Overlay opacity — Darken the background image (0% to 80%) for better text readability against busy images.

Autoplay Settings

Enable automatic slide transitions under the slider section settings. Configure the delay between slides (3 to 10 seconds). Autoplay pauses automatically when a user interacts with the slider or when the browser tab is not active, which is better for accessibility and performance.

Product Page

Variant Picker

The product page supports multiple variant picker styles. In the product section settings, choose between:

• Dropdown — Standard dropdown selectors for each option (Size, Color, Material, etc.).
• Buttons — Inline pill-style buttons that let customers select variants without opening a dropdown.
• Color swatches — Visual color circles for color-type options that swap the product image on selection.

Color Swatches

Color swatches display a visual circle representing each color option. When a customer selects a different color, the product image gallery automatically scrolls to the corresponding variant image. To set up color swatches:

1. Ensure your product has a variant option named Color (or the localized equivalent for your store language).
2. Assign a unique image to each color variant in the Shopify product editor. The swatch will pull the image for that variant.
3. In the theme editor, navigate to the product section and enable Show color swatches.
4. Swatch colors are automatically derived from the variant option value name (e.g., "Black" renders a black circle). For custom colors that don't match a standard color name, add a product metafield product.color_hex with the hex value.

Image Gallery

The product page image gallery supports multiple layouts: stacked, carousel, or thumbnail grid. Images support pinch-to-zoom on mobile and click-to-zoom on desktop. The gallery automatically groups images by variant when variant-specific images are assigned.

Product Tabs

Product tabs appear below the main product details and organize supplementary content into collapsible sections:

• Description — Automatically populated from the product description field in Shopify.
• Shipping & Returns — Static content configured in Theme settings > Product tabs. Write once, display on all products.
• Size Guide — Displays a size chart table or links to a custom page with detailed sizing information.
• Reviews — Integrates with the Shopify Product Reviews app or compatible third-party review apps like Judge.me and Loox.

You can add custom tabs by creating pages in Shopify and assigning them in the product section settings. Each custom tab displays the full page content inline.

Collection Page

Filters

Collection pages include a sidebar filter panel powered by Shopify's native storefront filtering API. Filters are automatically generated based on your product data and configured filters. Available filter types include:

• Price range slider — Interactive dual-handle slider for min/max price filtering.
• Product type — Filter by product type assigned in the Shopify product editor.
• Vendor / Brand — Filter by product vendor for multi-brand stores.
• Color, Size, and variant options — Checkbox or swatch-based filters for all variant options.
• Availability — Toggle between in-stock and out-of-stock products.
• Tags — Filter by product tags for custom categorization.

To configure which filters appear, go to Shopify Admin > Online Store > Navigation > Collection and search filters. The theme displays all filters you enable there, styled to match your theme design.

Sort Options

A sort dropdown appears at the top of every collection page. Customers can sort products by: Featured (manual order), Best selling, Alphabetical (A-Z and Z-A), Price (low to high and high to low), and Date (newest and oldest). The selected sort preference updates the page URL for bookmarkable results.

Grid/List Toggle

Customers can switch between grid view and list view on collection pages using toggle buttons at the top of the product grid. Grid view shows product cards in a multi-column layout (2, 3, 4, or 5 columns configurable). List view displays products in a single-column layout with larger images and more visible descriptions. The selected view preference is saved in the browser's localStorage so it persists across page loads and sessions.

Cart Drawer

Setup

The AJAX cart drawer slides in from the right side of the screen when a customer adds a product to the cart, updates without a page reload for a seamless shopping experience. To configure:

1. In the theme editor, go to Theme settings > Cart.
2. Set Cart type to Drawer. Alternatively, choose Page for a traditional full-page cart, or Popup for a brief notification.
3. Enable Cart recommendations to show complementary products inside the cart drawer.
4. Enable Cart note to let customers add special instructions to their order.
5. Toggle Trust badges to display security and payment icons below the checkout button.

Free Shipping Bar

The free shipping bar displays a progress indicator showing how much more the customer needs to spend to qualify for free shipping. It updates dynamically as items are added or removed.

1. Navigate to Theme settings > Cart > Free shipping bar.
2. Enable the free shipping bar toggle.
3. Set the Free shipping threshold amount (e.g., $75, $100). This should match your actual shipping policy.
4. Customize the message text. Use the {amount} placeholder for the remaining amount. Example: "You're only {amount} away from free shipping!"

Auto Discount

If you have automatic discounts configured in Shopify (Admin > Discounts), the cart drawer automatically calculates and displays the discount amount. No additional theme configuration is needed. The discounted price, original price, and savings amount are all shown clearly.

Terms Checkbox

Require customers to agree to your terms and conditions before proceeding to checkout. Enable this under Theme settings > Cart > Terms checkbox. Link the checkbox label text to your terms and conditions page. When enabled, the checkout button remains disabled until the checkbox is checked.

Wishlist & Compare

Luxe Fashion includes a built-in wishlist and product comparison feature that requires no third-party apps or external services.

How They Work

Both features use the browser's localStorage API to save product selections on the client side. This means data persists across browser sessions on the same device without requiring customer accounts, logins, or any server-side storage.

• Wishlist — Customers click the heart icon on any product card or product page to add it to their wishlist. A dedicated wishlist page (automatically created at /pages/wishlist) displays all saved products in a grid layout. Products can be added to cart directly from the wishlist or removed individually.
• Compare — Customers can add up to 4 products to a comparison list using the compare icon on product cards. A floating compare bar appears at the bottom of the screen showing selected products. Clicking "Compare" opens a modal with a side-by-side table of product attributes including price, availability, variant options, and description.

Data Storage

Wishlist and compare data is stored under the keys bebriz_wishlist and bebriz_compare in localStorage. Each entry stores the product handle, title, image URL, price, and availability status. The data is automatically cleaned up if a product is no longer available when the wishlist page loads.

Social Proof

Social proof notifications display small toast-style popup messages at the bottom of the screen, showing recent purchases or product activity to create urgency and build customer confidence.

Configuration

Enable social proof in Theme settings > Social proof. Configure the following options:

• Enable notifications — Master toggle for the entire feature. Disable to remove all social proof popups.
• Notification type — Choose between "Recent purchases" (displays product name with a randomly generated name and location) or "Current viewers" (shows a count of people viewing a product, e.g., "12 people are viewing this right now").
• Products to show — Select specific products for notifications, or let the theme automatically pull from your best sellers collection.
• Position — Bottom-left or bottom-right corner of the viewport.

Timing Configuration

Control how often notifications appear and how long they stay visible to balance urgency with user experience:

• Initial delay — Time in seconds before the first notification appears after page load. Default: 5 seconds. Set higher for a less aggressive feel.
• Display duration — How long each notification stays visible on screen. Default: 4 seconds.
• Interval — Time between consecutive notifications. Default: 15 seconds.
• Maximum per session — Limit the total number of notifications shown per visitor session to avoid fatigue. Default: 10.

Newsletter Popup

The newsletter popup encourages visitors to subscribe to your mailing list, typically in exchange for a discount code on their first purchase.

Setup

Navigate to Theme settings > Newsletter popup to configure all popup options:

• Enable/Disable — Master toggle. When disabled, the popup never appears.
• Trigger delay — Number of seconds after page load before the popup appears. Default: 5 seconds. Set to 0 for immediate display (not recommended for user experience).
• Exit intent — Display the popup when the visitor moves their cursor toward the browser close or back button. Desktop only. This catches visitors who are about to leave.
• Show frequency — Control how often returning visitors see the popup: every visit, once per session, once per day, or once per week. The frequency is tracked via a cookie.

Content & Styling

• Heading — The popup title, e.g., "Get 10% Off Your First Order".
• Body text — Supporting text below the heading explaining the offer.
• Discount code — Optionally display a copyable discount code after successful email submission.
• Background image — Add a promotional image to the left side of the popup for a split-layout design.
• Form integration — The form integrates with your Shopify customer list by default. It can also be connected to Klaviyo, Mailchimp, or other email platforms using their Shopify app integrations.

Supplements & Health Features

Ingredient Chart

The ingredient chart displays an interactive SVG donut chart on the product page, showing the breakdown of supplement ingredients with percentages, colors, and descriptions.

Setup:

1. In the theme editor, navigate to Product page > Ingredient Chart section.
2. Click Add block to add ingredients.
3. For each ingredient, set:

• Name — e.g., "Vitamin D3"
• Percentage — e.g., "25"
• Color — Choose a color for the chart segment
• Description — e.g., "Supports bone health and immune function"

1. The chart auto-calculates and renders based on the percentages provided.

Stack Builder

The stack builder section allows customers to select multiple supplement products and add them all to cart at once, encouraging bundle purchases.

Setup:

1. In the theme editor, click Add section > Stack Builder.
2. Choose the Source collection that contains the products to display.
3. Configure the Maximum selections (default: 5).
4. Customize the Heading, Subheading, and Add All to Cart button text.

How it works:

• Customers check the boxes next to the supplements they want.
• A floating bar at the bottom shows the selected count and total price.
• Clicking "Add All to Cart" adds every selected product in one action.

Certification Badges

Trust badges for FDA, GMP, Non-GMO, Vegan, and other certifications are displayed on the product page below the Add to Cart button.

How to enable:

1. Add certification tags to any product in Shopify Admin > Products.
2. Supported tags and their badges:

• fda-approved — FDA Approved badge
• gmp-certified — GMP Certified badge
• non-gmo — Non-GMO badge
• vegan — Vegan badge
• organic — Organic badge
• third-party-tested — Third-Party Tested badge

Dosage Guide

The dosage guide displays a styled info box on the product page with suggested use instructions and an optional physician warning.

Setup:

1. Go to Product page > Dosage Guide section in the theme editor.
2. Set the Suggested Use text — e.g., "Take 2 capsules daily with food."
3. Enable or disable the Physician Warning toggle.
4. Customize the warning text if needed (default: "Consult your healthcare professional before use if you are pregnant, nursing, or taking medication.").

The dosage guide section automatically appears between the product description and the reviews tab on product pages.

Results Timeline

The results timeline shows a week-by-week visualization of expected results, helping customers understand the supplement journey.

Setup:

1. In the theme editor, click Add section > Results Timeline.
2. Click Add block for each timeline milestone.
3. For each milestone, set:

• Week Label — e.g., "Week 1-2"
• Title — e.g., "Initial Absorption"
• Description — e.g., "Your body begins absorbing key nutrients and building baseline levels."

1. The timeline renders as a vertical progression with connecting lines.

Category Tab Bar

The category tab bar auto-generates horizontal tabs from your product types, allowing quick filtering on collection pages.

Setup:

1. Go to Theme settings > Collection Page > Category Tabs.
2. Check Enable Category Tabs.
3. The tabs are automatically generated from the product types in the current collection.
4. When a collection has more tabs than fit on screen, scroll arrows appear on both sides.

How it works:

• Clicking a tab filters the collection to show only products of that type.
• An "All" tab is always shown first to reset filtering.
• Active tab state is indicated with an underline accent.

List / Grid View Toggle

The collection page defaults to list view, which shows more product information including ingredient highlights and certification badges. Customers can switch to grid view using the toggle.

Setup:

1. Go to Theme settings > Collection Page > Default View.
2. Choose List or Grid as the default layout.
3. The toggle button appears at the top of the collection, next to the sort dropdown.

• List view — Shows product image, title, price, short description, and certification badges in a horizontal layout.
• Grid view — Shows a traditional card layout with image, title, and price.

Reviews (App Required)

The theme provides a "Reviews" tab on product pages and star rating displays on product cards. However, actual review collection and display requires a Shopify app.

| App | Cost | Best For | |-----|------|----------| | Shopify Product Reviews | Free | Basic review needs | | Judge.me | Free tier | Most popular, photo reviews, email requests | | Loox | $9.99/mo | Photo & video reviews | | Stamped.io | Free tier | Reviews + loyalty integration |

After installing a review app, reviews will automatically appear in the Reviews tab. Star ratings on product cards pull from the app's data.

Subscription Products (App Required)

The theme displays "Subscribe & Save" badges on product cards for products tagged with subscription. However, actual subscription checkout requires a Shopify subscription app.

| App | Cost | Best For | |-----|------|----------| | Shopify Subscriptions | Free | Basic subscription needs | | Recharge | $99/mo | Advanced features, analytics | | Loop Subscriptions | $99/mo | Growing brands | | Seal Subscriptions | Free tier | Small stores getting started |

What the theme provides:

• Visual "Subscribe & Save" badge on product cards (tag-based)
• Badge text customizable in Theme Settings > Product Card

What the app provides:

• Subscription checkout widget on product pages
• Recurring billing and order management
• Customer subscription portal

After installing a subscription app, its widget will appear on product pages automatically alongside the theme's visual badges.

License & Activation

License Terms

Each Luxe Fashion purchase grants you a single-store license. This means you may install and use the theme on:

• One (1) live production Shopify store
• One (1) development or staging store for testing purposes

Using the theme on additional production stores requires purchasing additional licenses. Contact our support team for multi-license pricing.

Activation Process

After purchasing the theme, you will receive a license key via email. To activate:

1. Install the theme on your Shopify store following the installation steps above.
2. Open the theme editor and navigate to Theme settings > License.
3. Enter your license key in the License key field.
4. Click Save. The theme will verify your license against our server and activate all premium features.

Domain Verification

Your license is tied to a single Shopify store domain. During activation, the theme records your store's .myshopify.com domain as the authorized installation. This is a one-time process. If you need to transfer the theme to a different store or change your store domain, contact our support team with your license key and the new domain to update the verification record.

Need Help?

If you cannot find the answer to your question in this documentation, visit our support page to contact our team directly. We typically respond within 24 hours on business days.