Installation
After purchasing Flavor from the Shopify Theme Store:
- Go to Online Store > Themes in your Shopify admin
- Find Flavor in your theme library
- Click Customize to open the theme editor
- Choose a preset (Bold, Clean, or Natural) to start
Flavor works out of the box with any Shopify plan. No apps required for core functionality.
Presets
Flavor ships with 3 visual presets. You can switch between them in Theme Settings.
| Preset | Vibe | Best for |
|---|---|---|
| Bold | Dark, acid green accent | Tech, fitness, biohacking |
| Clean | Light, black accent, subtle | Beauty, wellness, food |
| Natural | Warm dark, amber/gold accent | Sustainable, artisan, eco |
Each preset sets colors, fonts, and spacing. You can further customize everything after selecting a preset.
Theme Settings
Access via Customize > Theme Settings (gear icon at bottom of sidebar).
Typography
Choose separate fonts for headings and body text. Adjust the size scale (80%–150%) to make text larger or smaller globally.
Colors
Set your primary color scheme (background, text, accent, borders) and an alternate scheme used for dark/light section toggles.
Layout
- Page width — Narrow (75rem), Standard (90rem), Wide (110rem)
- Page margin — Side padding (16–80px)
- Section spacing — Vertical gap between sections
- Corner radius — 0 for sharp, up to 24px for rounded
Cart
Free shipping threshold — Set the dollar amount for the free shipping progress bar in the cart drawer. Set to $0 to hide the bar.
Hero Section
The full-viewport hero with centered text. Settings:
- Badge — Small pill label above the heading (e.g., "Now Available")
- Heading — Rich text. Use italic to highlight a word in your accent color
- Description — Subtitle text
- Buttons — Primary (accent) and secondary (outline). Each with label + link
- Proof stats — Add blocks for social proof (e.g., "200k+ users")
Tip: In the heading, wrap a word in italic to make it pop in your accent color. E.g., Fully <em>optimized.</em>
Features Section
3-column card grid with icons. Each block has:
- Icon — Upload an SVG or image (24px). Falls back to a lightning bolt
- Heading — Feature title
- Text — Short description
Cards use a 1px gap grid with dark backgrounds. Hover lightens the card.
Scroll Story
The signature section. A product image sticks to one side while feature steps scroll on the other. On desktop, the active step highlights as you scroll.
- Image — Your product photo (sticky on desktop)
- Steps — Up to 8 blocks, each with a label, heading, and description
On mobile, it stacks vertically with all steps visible.
Stats Section
Animated number counters. Numbers count up when the section enters the viewport. Each block has:
- Prefix — e.g., $ or #
- Number — The target value (supports decimals like 4.9)
- Suffix — e.g., +, %, k, d
- Label — Description below the number
Ingredients Section
Expandable card grid. Click a card to reveal more detail. Each block:
- Name — Ingredient or feature name
- Benefit — One-line summary
- Detail — Expanded explanation shown on click
Comparison Table
"Us vs. Them" table. Your column is highlighted in the accent color. Each row block:
- Feature — Row label
- Your product — Check (✓), Cross (✗), or custom text
- Competitor — Same options
Video Reviews
TikTok-style horizontal scroll of video testimonials. Each block:
- Video — Upload a vertical video (9:16 aspect ratio). Autoplays on hover (desktop) or scroll (mobile)
- Image — Fallback if no video
- Name, Quote, Rating — Customer info shown below
FAQ Section
Accordion-style Q&A. Each block has a question and a rich text answer. The + icon rotates to x when open.
CTA Section
Call-to-action with large heading, subtitle, and button. Use italic in the heading for accent color highlighting.
Custom Liquid
Add any custom Liquid, HTML, or JavaScript. Available as a section you can add to any page.
Product Page
The product page includes:
- Image gallery — Thumbnail strip below the main image. Click to switch.
- Review rating — Configurable star rating + count (toggle on/off)
- Variant swatches — Pill-shaped selectors. Updates price and URL without reload
- Quantity selector — Custom +/- stepper
- AJAX add to cart — No page reload. Button shows "Adding..." → "Added! ✓"
- Cart drawer — Slides in from right with free shipping progress bar
- Sticky ATC bar — Appears when you scroll past the main button
- Trust badges — Add/remove via blocks. Custom icons supported
- Shipping info — Configurable text
- Low stock — Shows warning when inventory is below threshold (configurable)
- Payment icons — Automatically shows your enabled payment methods
Selling Plans (Subscribe & Save)
If your product has selling plans configured, Flavor automatically shows a one-time vs. subscription toggle with savings percentage. No app needed for the display — uses Shopify's native Selling Plans API.
Cart & Drawer
The AJAX cart drawer opens on add-to-cart. Features:
- Free shipping progress bar (threshold set in Theme Settings > Cart)
- Quantity +/- per item
- Remove items
- Live total updates
- Checkout button with total
Also opens when clicking the cart icon. The full cart page (/cart) is also styled as a fallback.
Collection Page
Product grid with:
- Faceted filtering — Slide-in drawer with checkbox filters and price range slider
- Sort dropdown — Custom styled (not native browser dropdown)
- Pagination — Previous / Page X of Y / Next
Filters are powered by Shopify's storefront filtering API. Enable filters in Settings > Search and discovery > Filtering.
Blog & Articles
Blog listing shows posts in a card grid with featured images. Article pages use a centered single-column layout with full comment support.
Search
Two search experiences:
- Predictive search — Click the search icon (or press
Cmd+K) to open an instant search overlay with live results - Search results page — Full page with product grid and article/page list, separated by type
Colors
Flavor uses two color schemes:
- Primary — Background, surface (cards), text, text secondary, accent, border
- Alternate — Used when you toggle a section's "Color scheme" to Light
The accent color drives buttons, badges, active states, and the announcement bar.
Typography
Two font pickers: one for headings (display/impact) and one for body text. Both support Shopify's full font library. Adjust size scale per role.
Layout
- Page width — Controls max content width
- Margins — Side padding
- Section spacing — Vertical rhythm between sections
- Corner radius — Applies to cards, buttons, inputs globally
Localization
Country/currency and language selectors appear automatically in the footer when you have multiple markets or languages configured in Shopify.
Enable markets in Settings > Markets. Enable languages in Settings > Languages.