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 card, 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. The preview now renders the hero image inside the storefront hero card so you can judge the crop before saving.

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

Use these file rules and sizes:

  • Logo: recommended 512 x 512 px, square, PNG or JPG only.
  • Hero image: recommended 1600 x 1200 px, PNG or JPG only. This is the image shown inside the hero card preview.
  • Default product image: recommended 1200 x 1200 px, square, PNG or JPG only.

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 inside the hero card.

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 inside the hero card crop.
  • Treat the muted and footer colors as readability controls, not just decorative colors.