Skip to main content

Branding

Open the Branding page at https://clickcollect.coffee/portal/branding/ to control how your customer-facing storefront looks and sounds.

What this page controls​

  • Theme direction and preset styling
  • Storefront title, tagline, announcement bar, and hero copy
  • Logo, hero image, and default product image
  • Hero layout, navigation style, button style, card style, and corner radius
  • Body font, heading font, and the full color system

Set a theme​

1. Open Branding in the portal navigation​

The page loads the Storefront Branding Editor and keeps a live preview on the right side of the screen.

Live screenshotBranding page landing state
Branding page landing state
static/img/portal/branding/01-branding-landing.png

2. Choose a preset in Pick a theme direction​

The preset section applies coordinated changes to colors, layout, buttons, cards, and typography.

  • Warm Cafe gives you the default coffee-led look.
  • Modern Minimal sharpens contrast and reduces visual noise.
  • Bold Contrast pushes stronger accents for higher visual energy.
  • Soft Pastel lightens the overall mood.

Use a preset first, then fine-tune the rest of the page.

Live screenshotTheme preset selector
Theme preset selector
static/img/portal/branding/02-theme-presets.png

3. Update Identity and hero copy​

Work through these fields in order:

  • Storefront title
  • Tagline
  • Announcement bar
  • Repeat-order prompts
  • Hero badge
  • Hero headline
  • Hero description
  • Primary CTA label
  • Secondary CTA label

The preview updates while you type, and the page autosaves in the background.

Live screenshotIdentity and hero copy fields
Identity and hero copy fields
static/img/portal/branding/03-identity-hero-copy.png

4. Upload visual assets in Visual assets​

Add the three images that shape the storefront most clearly:

  • Logo
  • Hero image
  • Default product image

Uploads save as soon as you select the file. If you do not add a hero image, the preview can fall back to the default product image.

Live screenshotVisual asset upload section
Visual asset upload section
static/img/portal/branding/04-visual-assets.png

5. Adjust the page structure in Layout and typography​

Use this section to tune the presentation after the content is in place.

  • Hero layout
  • Navigation style
  • Button style
  • Card style
  • Corner radius
  • Body font
  • Heading font

If you choose a custom heading font, the page expects a .ttf upload.

Live screenshotLayout and typography controls
Layout and typography controls
static/img/portal/branding/05-layout-typography.png

6. Fine-tune the palette in Color system​

The page exposes eight color inputs:

  • Primary
  • Secondary
  • Accent
  • Background
  • Surface
  • Text
  • Muted
  • Footer

Change one color at a time and watch the preview before moving on. That makes it easier to see whether a contrast problem came from the accent palette or the surface palette.

Live screenshotColor system controls
Color system controls
static/img/portal/branding/06-color-system.png

7. Confirm autosave and preview state​

At the top of the page, the status panel should show that live preview and autosave are active. If you see a save error, stop and correct the field or upload that triggered it before leaving the page.

Live screenshotAutosave status and live preview
Autosave status and live preview
static/img/portal/branding/07-preview-and-autosave.png

Good practice​

  • Use a preset as a starting point instead of building the whole look from scratch.
  • Keep headline and CTA text short enough to stay readable in the preview.
  • Upload a hero image that still reads well when cropped.
  • Treat the muted and footer colors as readability controls, not just decorative colors.