Branding Settings

Customise your storefront's appearance, layout, and brand identity to create a unique experience that reflects your restaurant's personality and style. These settings affect how your online ordering s

Customise your storefront’s appearance, layout, and brand identity to create a unique experience that reflects your restaurant’s personality and style. These settings affect how your online ordering site looks and feels to customers.

Accessing Branding Settings

All storefront settings are managed on a single page: Settings → Online Store. The page is organised into collapsible sections:

Branding: Logo, favicon, colours, and typography
Hero & Layout: Hero section, theme presets, product display, cart position, category navigation, content density, and promotional bar
SEO & Social: Search engine optimisation and social sharing (see also SEO Settings)
Domain: Default URL and custom domain setup (see also Domain Settings)
Legal Pages: Custom privacy policy and terms of service (see also Legal Pages)

To access these settings:

Go to Settings → Online Store
Open the relevant section to view or edit your settings
Click “Save” within each section to apply your changes

Note: You need permission to view and edit branding settings. If you don’t see the option or can’t make changes, contact your account administrator.

Brand Identity

Establish your visual brand presence across your storefront with professional branding elements.

Logo

Where it appears: Header navigation, order receipts, customer emails
Recommended size: High-resolution square or horizontal logo (PNG or JPG)
Maximum file size: 5MB
Best practices:
- Use a transparent background (PNG) for best results
- Keep text readable at small sizes
- Ensure logo works well on both light and dark backgrounds
When to update: Rebranding, seasonal changes, or logo improvements

Favicon

Where it appears: Browser tab icon, bookmark icons, header avatar
Recommended size: Square image, at least 32x32 pixels (PNG or JPG)
Maximum file size: 1MB
Best practices:
- Simple, recognizable design that works at tiny sizes
- Consider using a simplified version of your logo
- Test in browser tabs to ensure clarity
When to update: Logo changes or when favicon appears pixelated

Hero Section

The hero is your storefront’s first impression - a large, prominent banner that welcomes customers and sets the tone.

Enable/Disable Hero Section

When to enable: You want a prominent visual welcome for customers
When to disable: Prefer a more compact, menu-focused layout
Default: Enabled for most businesses
Impact: Disabling hero creates more space for menu items

Display Location Address

When enabled: Your business address is shown in the hero section
When disabled: Address is hidden from the hero
Default: Disabled
Use for: Helping customers find your location, especially useful for collection orders

Display Opening Times

When enabled: A live opening status message appears in the hero (e.g., “Open now”, “Opens tomorrow at 8am”)
When disabled: Opening status is hidden from the hero
Default: Disabled
Use for: Setting expectations before customers browse the menu

Hero Image

Where it appears: Large background banner at the top of your storefront
Recommended size: High-quality horizontal image (PNG or JPG)
Maximum file size: 10MB
Best practices:
- Use appetising photos or your businesses atmosphere
- Ensure text remains readable over the image
- Consider mobile viewing - image will be cropped on phones
- Test on both desktop and mobile devices
When to update: Seasonal menu changes, special promotions, or rebranding

Hero Title

Default: “Welcome to [Your Business Name]”
Custom option: Enable to replace with your own text
Maximum length: 255 characters
Best practices:
- Keep it short and memorable
- Consider your brand voice (fun, professional, welcoming)
- Examples: “Fresh Food, Fast Delivery”, “Authentic Italian Since 1985”
When to use: When default title doesn’t match your brand personality

Hero Subtitle/Tagline

Where it appears: Below the hero title
Purpose: Additional descriptive text or tagline
Maximum length: 255 characters
Best practices:
- Use to highlight unique selling points
- Keep it conversational and welcoming
- Examples: “Delicious food made fresh and delivered to your door”
Optional: Leave empty to hide subtitle

Colours

Customise your brand colours to create a cohesive visual identity throughout your storefront.

Primary Colour

Where it appears: Buttons, links, highlights, accent elements
Default: Orange (#f97316)
Usage: Call-to-action buttons, active navigation, special highlights
Best practices:
- Choose a colour that represents your brand
- Ensure good contrast with white/light backgrounds
- Test readability of white text on your chosen colour
- Consider accessibility for colour-blind users

Secondary Colour

Where it appears: Headers, dark backgrounds, secondary buttons
Default: Dark gray (#1a1a1f)
Usage: Navigation bars, footers, dark-themed sections
Best practices:
- Should complement your primary colour
- Ensure good contrast with white/light text
- Consider using darker shades of your primary colour
- Test combinations in the live preview

Colour Preview

Live preview: See how your colours look on actual UI elements
Test elements: Primary/secondary buttons, links, badges
Real-time updates: Changes reflect immediately in preview
Best practices: Always preview before saving to ensure readability

Typography

Choose fonts that match your restaurant’s personality and enhance readability.

Available Font Pairs

We offer 14 curated font combinations organised into five style categories. Each pair includes a display font (for headings) and a body font (for text).

Warm & Approachable

Friendly

Display: Poppins · Body: Nunito
Best for: Casual dining, family restaurants, cafes
Personality: Rounded and welcoming

Handwritten

Display: Caveat · Body: Source Sans 3
Best for: Artisan bakeries, market stalls, farm shops
Personality: Personal and hand-crafted

Rounded

Display: Nunito · Body: Quicksand
Best for: Dessert shops, bubble tea, frozen yoghurt
Personality: Soft, playful, and inviting

Modern & Clean

Default (Recommended)

Display: Fraunces · Body: DM Sans
Best for: Balanced, professional appearance for any business
Personality: Modern yet approachable

Modern

Display: Montserrat · Body: Inter
Best for: Tech-forward, sleek brands
Personality: Contemporary and sharp

Geometric

Display: Outfit · Body: Inter
Best for: Fast-casual, health-focused brands
Personality: Clean and structured

Minimalist

Display: Karla · Body: Work Sans
Best for: Simple, no-fuss menus
Personality: Understated and functional

Elegant & Refined

Premium

Display: Playfair Display · Body: Lato
Best for: Fine dining, upscale establishments
Personality: Elegant and sophisticated

Luxury

Display: Cormorant Garamond · Body: Raleway
Best for: Wine bars, cocktail lounges, tasting menus
Personality: Refined and exclusive

Art Deco

Display: Poiret One · Body: Josefin Sans
Best for: Themed restaurants, speakeasy bars
Personality: Decorative and distinctive

Traditional & Trustworthy

Classic

Display: Libre Baskerville · Body: Open Sans
Best for: Traditional restaurants, established brands
Personality: Trustworthy and timeless

Editorial

Display: Lora · Body: Source Sans 3
Best for: Gastropubs, heritage restaurants
Personality: Authoritative and warm

Serif Modern

Display: DM Serif Display · Body: DM Sans
Best for: Contemporary bistros, modern brasseries
Personality: Classic with a modern edge

Bold & Distinctive

Statement

Display: Syne · Body: Space Grotesk
Best for: Trendy restaurants, pop-ups, bold brands
Personality: Eye-catching and unconventional

Font Considerations

Readability: Ensure good contrast and legibility on all devices
Brand alignment: Choose fonts that match your restaurant’s style
Performance: Fonts load automatically from Google Fonts
Fallbacks: System fonts used if Google Fonts fail to load
Mobile: Test font rendering on mobile devices
Preview: Changes are reflected in the live preview so you can compare options before saving

Configure how your menu appears and how customers interact with the shopping cart.

Theme Presets

Theme presets are one-click starting points that set your product display, cart position, navigation style, density, and font all at once. Choose a preset, then customise individual settings if needed.

Preset	Best For	What It Sets
Modern Minimal	Contemporary restaurants, clean brands	Cards layout, slide-out drawer, horizontal tabs, spacious, Modern font, blue accent
Classic Bistro	Traditional dining, refined establishments	Detailed cards, right sidebar, horizontal tabs, default density, Premium font, amber accent
Quick Service	Takeaways, fast food, high-volume ordering	List layout, header badge, horizontal tabs, compact, Friendly font, red accent
Bold & Visual	Photo-heavy menus, visually-driven brands	Image cards, floating button, category cards, spacious, Serif Modern font, orange accent
Neighbourhood Cafe	Cafes, local eateries, casual spots	Horizontal cards, slide-out drawer, vertical sidebar, default density
Takeaway Express	Mobile-first takeaway, speed-focused	Compact cards, slide-out drawer, sticky tabs, compact, Minimalist font, purple accent

How to use presets:

Open the Hero & Layout section in Settings → Online Store
Click a preset card to apply it
Your layout settings update immediately
Optionally, click Customise to adjust individual settings
Click Save to apply

Tip: Presets also suggest primary and secondary colours. You can accept the suggestions or keep your existing colours.

Cart Position Options

Appearance: Cart panel fixed on the right side of the screen
Best for: Most restaurants, familiar shopping experience
Advantages: Always visible, easy access, doesn’t obstruct menu
Mobile: Converts to slide-out drawer on phones

Appearance: Cart panel fixed on the left side of the screen
Best for: Right-to-left languages or specific layout preferences
Advantages: Alternative positioning for different user preferences
Considerations: May feel less familiar to most users

Slide-out Drawer

Appearance: Cart slides in from the right when opened
Best for: Mobile-first experiences, space-conscious layouts
Advantages: Maximises menu space, modern interaction
How it works: Click cart icon in header to open/close

Header Badge (Link to Cart Page)

Appearance: Small cart icon with item count in header
Best for: Simple layouts, when cart details aren’t critical
Advantages: Minimal visual impact, directs to dedicated cart page
Considerations: Customers navigate away from menu to see cart

Floating Button

Appearance: A floating cart button fixed in the bottom corner of the screen
Best for: Mobile-first layouts, image-heavy menus where you want maximum visual space
Advantages: Always accessible, doesn’t take up menu space, modern feel
How it works: Tap the floating button to view and manage your cart

Product Display Options

Choose how menu items appear on your storefront. Each style suits different types of menus and branding.

Cards (Recommended)

Appearance: Standard grid cards with product image, name, and price
Best for: Most restaurants, especially with food photography
Advantages: Visual appeal, familiar shopping experience

List

Appearance: Compact single-column rows, text-focused
Best for: Large menus, quick-service, text-heavy descriptions
Advantages: Shows more products at once, faster scanning

Detailed Cards

Appearance: Grid cards that also show the product description
Best for: Menus where descriptions help customers choose (e.g., specials, tasting notes)
Advantages: More context without needing to click into the product

Image Cards

Appearance: Image-dominant cards with text overlaid on the image
Best for: Visually-driven brands with strong food photography
Advantages: High visual impact, Instagram-style presentation

Horizontal Cards

Appearance: Landscape cards with image on the left and details on the right
Best for: Menus with both good images and detailed descriptions
Advantages: Balanced layout showing image and text side by side

Compact Cards

Appearance: Small, dense cards with a quick-add button
Best for: High-volume takeaway menus, mobile-first ordering
Advantages: Fits more items on screen, fast adding to cart

Control how customers browse your menu categories.

Horizontal Tabs (Default)

Appearance: Scrollable pill-shaped tabs above the product grid
Best for: Most restaurants, clean and familiar
Advantages: Simple, works well on desktop and mobile

Sticky Tabs

Appearance: Category tabs that stick to the top of the screen as customers scroll
Best for: Long menus where customers scroll a lot
Advantages: Categories always accessible without scrolling back up

Appearance: Category list displayed in a sidebar on the left of the menu
Best for: Restaurants with many categories, desktop-heavy audiences
Advantages: All categories visible at once, easy jumping between sections
Note: Changes the overall page layout to a two-column design

Category Cards

Appearance: A grid of category cards shown at the top of the menu
Best for: Visually-driven menus, restaurants with category images
Advantages: Visual browsing, customers click a category card to see its products

Content Density

Control the spacing and sizing throughout your storefront. This affects gaps between items, padding, and text scale.

Density	Description	Best For
Compact	Tighter spacing, more items visible at once	Takeaway menus, mobile ordering, large menus
Default	Balanced spacing between items	Most restaurants
Spacious	More breathing room, larger touch targets	Dine-in restaurants, image-heavy menus, accessibility

Mobile consideration: Compact density fits more on small screens but may feel crowded. Spacious density is easier to tap but requires more scrolling.

Layout Preview

Live preview: See how your layout choices affect the storefront
Responsive design: Preview shows desktop and mobile layouts
Cart visualisation: See cart position and behaviour
Grid adjustments: Preview adapts based on your choices

Promotional Bar

Display special offers, announcements, or important messages at the top of your storefront.

Enable/Disable Promotional Bar

When to enable: Special offers, holiday promotions, announcements
When to disable: Normal business operations
Default: Disabled
Impact: Takes small amount of vertical space when enabled

Promotional Text

Maximum length: 255 characters
Best practices:
- Keep messages clear and concise
- Include compelling calls-to-action
- Use emojis sparingly for visual appeal
- Update regularly to maintain freshness
Examples:
- “Free delivery on orders over £25!”
- ”🎉 New menu items now available!”
- “Student discount: 10% off with valid ID”

Setting Up Branding

Initial Configuration

When setting up your storefront branding:

Go to Settings → Online Store
Open the Branding section to upload your logo, favicon, set colours, and choose typography
Open the Hero & Layout section to configure the hero banner, then choose a theme preset or customise your product display, cart position, category navigation, and content density
Open the SEO & Social section to configure search engine optimisation settings
Test on multiple devices to ensure good appearance
Save each section and preview on your live storefront

Quick start tip: Choosing a theme preset in the Hero & Layout section is the fastest way to get a polished look — it sets your product display, cart position, navigation, density, and font all at once. You can then fine-tune individual settings.

Branding Best Practices

Visual Hierarchy

Hero section: Makes first impression — use high-quality imagery, and consider enabling location address and opening times
Theme preset: Sets a consistent starting point for layout, fonts, and density
Logo and colours: Consistent brand representation
Typography: Choose from 14 font pairs to match your restaurant’s personality
Product display and navigation: Match your card style and category navigation to your menu size and brand

Mobile Optimization

Test on phones: Ensure images and text look good on small screens
Touch-friendly: Buttons and interactive elements should be easy to tap
Fast loading: Optimize image sizes for mobile networks
Readable fonts: Ensure text remains legible on mobile devices

Brand Consistency

Match your physical location: Colours, fonts, and style should align
Professional appearance: High-quality images and consistent branding
Customer expectations: Meet what customers expect from your brand
Seasonal updates: Refresh branding for holidays or special events

Performance Considerations

Image optimization: Large images can slow page loading
Font loading: Custom fonts add small loading time
Mobile impact: Test loading speed on slower connections
Caching: Changes may take time to appear for all customers

Troubleshooting

Changes Not Appearing

If branding changes don’t show on your storefront:

Wait for cache: Changes may take a few minutes to propagate
Hard refresh: Press Ctrl+F5 (or Cmd+Shift+R on Mac) to clear browser cache
Check permissions: Ensure you have permission to edit branding settings
Save confirmation: Verify you clicked “Save Branding Settings”

Images Not Uploading

If logo or hero images fail to upload:

File size limits: Check maximum sizes (5MB logo, 10MB hero, 1MB favicon)
File formats: Use PNG or JPG formats only
Network issues: Try uploading again or use a different network
File corruption: Ensure image files aren’t corrupted

Layout Issues

If the layout doesn’t look as expected:

Browser compatibility: Test in different browsers (Chrome, Firefox, Safari)
Mobile view: Check appearance on phones and tablets
Zoom level: Ensure browser isn’t zoomed in/out
Clear cache: Old cached versions may show outdated layout

Colour Contrast Problems

If text is hard to read:

Contrast checker: Use online tools to verify colour combinations
Alternative colours: Try darker/lighter shades of your brand colours
Text colour: Ensure white text works well on your primary colour
Accessibility: Consider colour-blind friendly colour schemes

Integration with Other Settings

Business Settings

Business name: Appears in default hero title
Currency: Affects pricing displays (set during business creation)
Timezone: Impacts scheduled order displays
Date/time formats: Used in order receipts and confirmations

Product layout: Affects how menu items are displayed
Cart position: Impacts checkout flow and user experience
Hero content: Can highlight featured menu items or specials

Customer Experience

Branding consistency: Builds trust and recognition
Professional appearance: Encourages customer confidence
Mobile optimization: Critical for mobile ordering
Loading performance: Impacts customer satisfaction

Permissions

Branding settings require specific permissions:

View Settings: Required to access the Settings section
View Branding: Required to see branding settings
Edit Branding Settings: Required to make changes

Note: If you can see the settings page but can’t make changes, you may only have view permissions. Contact your account administrator (Owner, Admin, or Manager) to request edit permissions.

Changes to branding settings affect your public storefront immediately and are visible to all customers. Take time to preview changes and ensure they enhance rather than detract from your customer experience!

Support

Getting Help with Branding

Visual issues: Include screenshots of problems
Browser details: Specify browser and device when reporting issues
Permission problems: Contact account administrator for access
Performance concerns: Include page load times and device information
Mobile issues: Specify device type and operating system

Branding Resources

Design inspiration: Look at successful restaurant websites
Colour tools: Use colour picker tools for brand colours
Image editing: Optimize images before uploading
Typography guides: Research font combinations that work well
Mobile testing: Use browser developer tools to test mobile views

Your Customer Storefront

Customer Accounts (Storefront)

Getting Started

Menu

Operations

Storefront

Account

Integrations

Purchasing

Api

Documentation