Logo image
Uploads the main logo shown in your storefront header.
Recommended use
- Use SVG or transparent PNG
- Use enough resolution for retina screens
Check before publishing
- Preview the homepage and confirm the logo looks sharp
Design System
Visual foundations matched to the Fragrance Shop storefront — pastel hero gradients, berry marquee accents, and black editorial CTAs. For responsive layout utilities, see the FX Framework.
Foundations
Color Palette
Colors extracted from theme hero slides, product capsules, and the scrolling marquee bar. Documentation uses the same palette for brand consistency.
Page Background
#fdfcfa
Text & CTA
#111111
Berry Accent
#b93275
Peach Blush
#fff5f0
Capsule Peach
#fce6c9
Warm Apricot
#e8b896
Foundations
Theme Gradients
Same gradient stops used in hero slideshows and the infinite scrolling text section.
Hero — Fresh
#cff6fe → #e6ffe5
Hero — Warm Blush
#fff5f0 → #fce9f1
Hero — Golden
#e9ffe4 → #fae27d
Product Capsule
#fce6c9 → #e8b896
Marquee Accent
#cb3a3a → #f61cb1
Foundations
Typography
Display headings use Cormorant Garamond for an editorial feel. Body text uses DM Sans for comfortable long-form reading.
Display / H1 — Cormorant Garamond 500
The Art of Fragrance
Heading / H2 — Cormorant Garamond 500
Discover Your Signature Scent
Body — DM Sans 400, 1rem / 1.7 line-height
Our documentation prioritizes readability with generous spacing, clear hierarchy, and optimized content width for extended reading sessions.
Code — JetBrains Mono
{% section 'hero-banner' %}Foundations
Spacing Scale
1
2
3
4
5
Components
Buttons
Components
Badges
DefaultNewv1.0.0
Components
Callouts
Elegant, non-aggressive callout styles for tips, warnings, and guidance.
Information
General context or background information for the reader.
Tip
Helpful suggestion to improve the merchant experience.
Warning
Something that requires attention before proceeding.
Success
Confirmation that a step was completed correctly.
Important
Critical information the user must not overlook.
Recommended
Best practice we strongly suggest following.
Performance
Optimization note for faster page loads.
Accessibility
Guidance for inclusive storefront experiences.
Components
Code Blocks
Liquid
{% render 'product-card', product: product, show_vendor: true %}Components
Accordion
Fragrance Shop works on all Shopify plans including Basic, Shopify, and Advanced.
Yes. Upload fonts in Theme Settings → Typography, or connect Google Fonts.
Components
Tabs
Customize sections visually through Online Store → Themes → Customize.
Edit Liquid, CSS, and JavaScript files directly in the theme code editor.
Use Shopify CLI for local development: shopify theme dev
Components
Cards
Documentation
Setting guide content
Use this pattern for theme setting pages: screenshot on the left, simple text on the right. No cards—use a heading, short paragraph, subheads, and bullets.
Structure
- Page title (h2) — setting group name, e.g. Store logo
- Setting title (h3) — matches the theme editor label
- Paragraph — what it does, in one or two sentences
- Subhead — Recommended use, Check before publishing, Common mistake
- Bullet list — short, scannable actions or tips
Example
Desktop logo height
Adjusts logo height on desktop. Default: 26 px
Recommended use
- Start near 26–40 px
CSS classes
.doc-setting-block— full setting section with h2.doc-setting-layout— screenshot + content columns.doc-setting-item— one theme editor control.doc-setting-item__title— h3 setting name.doc-setting-item__text— what it does.doc-setting-item__subhead— section label.doc-setting-item__list— bullet list.fx-*— layout, spacing, typography utilities (FX Framework)
Components
Before / After
Before
Default header layout
After
Transparent sticky header
Components
Device Preview
Fragrance Shop
Preview frame placeholder