Branding configuration

Branding configuration lets you customise your store's visual identity, including your logo, favicon, color palettes, and fonts. By configuring these elements, you ensure a consistent brand experience across your entire storefront.

Logo

Your store logo appears in the header navigation on both desktop and mobile views. Upload your logo to replace the default placeholder.

Uploading a logo

1. From your admin, go to Settings > Branding Configuration
2. In the Logo section, click on the upload area or drag and drop your logo file
3. The logo uploads immediately and a preview appears
4. The logo is automatically applied to your storefront

Supported formats

• PNG - Best for logos with transparency
• JPG/JPEG - Good for photographic logos
• SVG - Recommended for crisp display at any size

Requirements

• Maximum file size: 5MB
• For best results, use an SVG or a PNG with transparent background
• Logos display at 48px height in the header, so ensure your logo is legible at this size

Favicon

Your favicon is the small icon that appears in browser tabs, bookmarks, and mobile home screens. Uploading a favicon helps customers recognise your store at a glance.

Uploading a favicon

1. From your admin, go to Settings > Branding Configuration
2. In the Favicon section, click on the upload area or drag and drop your favicon image
3. The system automatically generates all required favicon formats
4. A preview of the generated favicon appears

Generated formats

When you upload a favicon, the system automatically creates:

• favicon.ico - For browser tabs (32x32)
• favicon-96x96.png - High-resolution favicon for modern browsers
• apple-touch-icon.png - For iOS home screen (180x180)

Supported formats

• PNG - Recommended for best quality
• JPG/JPEG - Acceptable but may have quality loss
• ICO - Traditional favicon format

Requirements

• Maximum file size: 2MB
• Use a square image for best results
• Simple, recognisable designs work best at small sizes

Storage limits

Logo and favicon uploads count towards your plan's storage allowance. If your storage exceeds 105% of your plan limit, uploads will be blocked until you free up space or upgrade your plan. See Media Library — Storage limits for more details.

Accessing branding configuration

1. From your admin, go to Settings > Branding Configuration
2. Upload your logo and favicon
3. Set your primary and accent color shades
4. Choose fonts for hero text, headings, and body text
5. Preview how your colors and fonts look on common storefront elements
6. Click Save changes

Color palettes

Your store uses two color palettes, each with six shades. These shades are applied automatically to different UI elements depending on context (e.g. hover states, backgrounds, text).

Primary colors

The primary palette is used for the main interactive elements of your store:

• Buttons - Add to cart, checkout, subscribe, and other action buttons
• Links - Navigation and inline text links
• Form focus rings - Input fields when selected
• Checkboxes - Checked and focused states
• Call-to-action backgrounds - Hero and promotional sections
• Pagination - Active page indicators
• Progress bars - Order tracking and loading indicators
• Icon backgrounds - Feature icons

Accent colors

The accent palette is used for highlights and supporting elements:

• Prices - Product price display
• Buttons - Secondary action buttons (e.g. "Buy Now")
• Section backgrounds - CTA and promotional areas
• Badges - Sale tags and status indicators

Color picker

Each color shade has a visual swatch that you can click to open a color picker. You can also type a hex color value directly into the text field below each swatch (e.g. #1e40af).

All color values must be valid 6-digit hex codes starting with #.

Fonts

Your store uses three font slots, each applied to a different type of text across your storefront:

Hero font

Used for large, prominent text on hero banners and promotional sections. This is typically a display or decorative font that makes a strong visual impact.

Header font

Used for all headings (H1 through H6) across your store, including page titles, section headings, product names, and card titles.

Text font

Used for body copy, descriptions, form labels, and all general paragraph text throughout your store.

Selecting a font

Each font slot has a search input with a list of popular Google Fonts. You can:

• Search the list by typing to filter fonts
• Browse the dropdown, where each font name is shown in its own typeface
• Use keyboard navigation - arrow keys to move through the list, Enter to select, Escape to close
• Type any Google Font name directly if it's not in the popular list

Leave a font slot blank to use the system default font. Click Use default to clear a selection.

Live preview

Below the configuration inputs, two preview panels show how your choices appear on real storefront elements. Both previews update in real time as you adjust settings.

Color preview

Shows your primary and accent colors applied to common UI patterns:

• Primary buttons - Default, hovered, focused, and disabled states
• Accent buttons - Default, hovered, focused, and disabled states
• Small CTA buttons - Subscribe and action buttons with all states
• Links - Primary-colored text links with hover state
• Form inputs - Default and focused input fields
• Pricing & badges - Prices in accent color, discounted prices with strikethrough, stock status badges
• Pagination - Default and active page buttons
• Background sections - Primary, accent, and light background panels
• Icons & progress - Icon backgrounds and progress bars

Typography preview

Shows your font choices applied to the text hierarchy used on your storefront:

• Hero - Large display text (5xl, semibold, tight tracking)
• H1 - Page titles (4xl, bold, tight tracking)
• H2 - Section headings (3xl, semibold, tight tracking)
• H3 - Subsection headings (xl, semibold)
• H4 - Card headings (base, semibold)
• H5 - Detail headings (sm, semibold)
• H6 - Small headings (xs, semibold)
• Body (Section) - Section descriptions (lg)
• Body (Content) - Paragraph and feature text (base)

How it works

When you save your branding configuration, the color values and font names are stored and served to your storefront.

Logo and favicon files are uploaded to secure cloud storage and served through a proxy URL. This ensures fast loading and allows the system to apply caching headers for optimal performance.

Colors are applied as CSS custom properties. Components across your store reference these properties instead of fixed colors, meaning a single configuration change updates your entire storefront.

Fonts are loaded from Google Fonts and applied to the appropriate text elements. The hero font is applied to hero sections, the header font to all heading elements (H1-H6), and the text font to body copy and general text.

Previously hardcoded colors (such as indigo and orange) have been replaced with your configurable primary and accent palettes across:

• Call-to-action sections (hero banners, split image layouts)
• Forms and input fields
• Checkout pages (shipping details, delivery options)
• Product listings

Permissions

Branding configuration requires the Store Configuration permission. Users without this permission will not see the branding configuration menu item.

Next steps

• Store configuration - Set up your store name and identity
• Design your pages - Build storefront pages using the page builder