Theme Settings
Brave's Theme Settings are global configurations that affect your entire store. Access them by clicking the gear icon in the Theme Editor sidebar or navigating to Online Store → Themes → Customize → Theme Settings.
Overview
Theme settings are organized into the following categories:
- Typography — Fonts and sizing
- Layout — Page width, margins, price display
- Color Schemes — Define reusable color palettes
- Colors — Button and input styling
- Header — Transparent overlay, sticky behavior
- Products — Cart drawer, quick add behavior
- Product Cards — Card gallery settings
- Social — Social media links
- Effects — Animations and visual effects
Typography
Control the fonts and sizing across your store.
| Setting | Type | Default | Description |
|---|---|---|---|
| Primary font | font_picker | Jost | The main font used throughout your store for headings and body text. |
| Global font scale | range | 100% | Scale all text sitewide. Range: 80%–120%. Useful for fine-tuning overall typography size. |
💡 Font Pairing Tip: Brave uses a single primary font for simplicity and performance. For variety, consider using different font weights (light, regular, bold) rather than multiple font families.
Layout
Control the overall page structure and display options.
| Setting | Type | Default | Description |
|---|---|---|---|
| Page width | select | 90rem (Narrow) | Maximum width of page content. 'Narrow' (90rem) feels more focused. 'Wide' (110rem) uses more screen space. |
| Page margin | range | 20px | Minimum margin on the sides of the page. Range: 10–100px. |
| Show compare-at (struck) price | checkbox | true | Display the original price with strikethrough when a product is on sale. |
| Show sale badge | checkbox | true | Display a 'Sale' badge on discounted products. |
Color Schemes
Color schemes let you define reusable color palettes that can be applied to different sections.
| Setting | Type | Default | Description |
|---|---|---|---|
| Background | color | #FFFFFF | Primary background color. |
| Background gradient | color | - | Optional gradient overlay on the background. |
| Text | color | #121212 | Primary text color. |
| Accent 1 | color | #121212 | Primary accent color for links and highlights. |
| Accent 2 | color | #334FB4 | Secondary accent color. |
| Outline button label | color | #121212 | Text color for outline/secondary buttons. |
| Solid button background | color | #121212 | Background color for primary buttons. |
| Solid button label | color | #FFFFFF | Text color for primary buttons. |
Colors
Additional color settings for inputs and buttons.
| Setting | Type | Default | Description |
|---|---|---|---|
| Input corner radius | range | 4px | Border radius for form inputs. Range: 0–10px. |
| Button hover overlay color | color | - | Override the hover background for secondary buttons. Leave blank to auto-compute. |
| Button focus ring color | color | - | Override the focus ring color. Leave blank to auto-compute. |
| Button hover overlay (mix %) | range | 10% | Intensity of the hover effect on secondary buttons. Range: 0–40%. |
| Button focus ring (mix %) | range | 25% | Intensity of the focus ring. Range: 0–60%. |
Header
Global header behavior settings.
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable transparent header overlay | checkbox | false | Let the header sit transparently over page banners and heroes. Creates a 'floating' header effect. |
| Prada style: remove spacing between sections | checkbox | false | Removes vertical gaps between sections for a luxury, no-gap layout. Best used with transparent header. |
| Black header on non-home pages | checkbox | false | Display header with black text/icons on white background for all pages except the home page. |
| Sticky navigation behavior | select | Use section settings | Override the header section's sticky options globally. |
Sticky Behavior Options:
Sticky Options
Products
Cart and quick add behavior settings.
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable cart drawer | checkbox | true | Show cart as a slide-out drawer instead of navigating to the cart page. |
| Quick add behavior | select | Direct add from card | What happens when clicking color/size on product cards. |
Quick Add Options:
Quick Add Behavior
Product Cards
Control the product card gallery feature that allows customers to swipe through product images.
Interactive Product Card Customizer
Try the demo to see how different card settings affect appearance:
🃏Product Card Customizer
Configure product card appearance
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable card gallery | checkbox | false | Allow swiping through multiple product images on cards. |
| Max gallery images | range | 4 | Maximum images shown in the card gallery. Range: 2–8. |
| Gallery navigation | select | Arrows | Navigation style for the gallery. |
Navigation Options:
Gallery Navigation Styles
Social
Add your social media links. These are used in the footer and any social icons throughout the theme.
| Setting | Type | Default | Description |
|---|---|---|---|
| Facebook URL | url | - | Your Facebook page URL. |
| Instagram URL | url | - | Your Instagram profile URL. |
| TikTok URL | url | - | Your TikTok profile URL. |
| Pinterest URL | url | - | Your Pinterest profile URL. |
| YouTube URL | url | - | Your YouTube channel URL. |
| Twitter/X URL | url | - | Your Twitter/X profile URL. |
| LinkedIn URL | url | - | Your LinkedIn company or profile URL. |
Effects
Animation and visual effect settings.
| Setting | Type | Default | Description |
|---|---|---|---|
| Enable image zoom on scroll | checkbox | false | Enable a subtle zoom effect on images as you scroll past them. Sections can still opt out. |
| Enable text reveal animations | checkbox | false | Allow sections to opt-in to gentle fade-in + up animations on headings and text. |
| Default reveal speed | select | Slow (1200ms) | How quickly text animations play. |
| Default distance | select | Medium (12px) | How far text moves during the reveal animation. |
Reveal Speed Options:
Distance Options:
⚠️ Performance Note: Enable effects sparingly. While they enhance the visual experience, excessive animations can impact performance on lower-end devices. The theme respects the user's "prefers-reduced-motion" setting.