Switching theme presets
Vesperia ships with 5 fully designed presets. Each is a coordinated bundle of colors, typography, button shapes, swatch styles and homepage layout. One click swaps them all.
The 5 presets at a glance
| Preset | Best for | Heading font | Vibe |
|---|---|---|---|
| Vesperia | Editorial / generic | Assistant Bold | Warm ivory, burgundy accents |
| Beauty | Skincare, cosmetics | Playfair Display | Rose-and-cream, rounded buttons |
| Tech Noir | Electronics, gadgets | Inter Bold UPPER | Full dark mode + electric blue |
| Maison Or | Jewelry, watches | Cormorant Garamond | Gold + black, outline buttons |
| Mono Studio | Streetwear, apparel | Assistant UPPER | Pure black & white minimal |
How to switch
- Open the customizer for the Vesperia theme.
- Click the Theme settings icon (gear, bottom-left).
- The first dropdown at the top is Theme style.
- Pick the preset that matches your niche. The preview updates instantly.
- Click Save, then refresh your browser to load the new font family (Shopify caches fonts).
What changes when you switch
- Color palette: background, foreground, secondary, border, accent, button colors.
- Header & footer colors.
- Typography: heading and body font.
- Button radius, card radius, button style (solid / outline).
- Card image aspect ratio (some presets use portrait, others square).
- Section spacing and content width.
- Swatch style (round / square / pill) and size.
- Add-to-cart animation (pulse / ripple / shake / none).
What does NOT change
Your content stays: product pictures, section text you wrote, blocks you added. Presets only touch visual settings, never user content.
Custom preset
The moment you tweak any setting after applying a preset, the dropdown shows Custom. Your custom state is preserved — to go back to a clean preset, just pick it again from the dropdown.
Per-niche tips
Beauty
The default Playfair Display + Inter pairing works for skincare and color cosmetics. Use the Heading with marker section for product claims (“Clean [scientifically.]”).
Tech Noir
Optimized for dark UI. Use the Stats counter to show specs (“10,000 mAh”, “4K HDR”) and the comparison table against competitors.
Maison Or
Designed for slower scroll. Use generous section padding (96px) and the Cormorant Garamond serif for product names. Square swatches read more luxurious than round.
Mono Studio
Edge-to-edge layout (100% content width). Pair with full-bleed campaign imagery, small square swatches, all-caps headings.