Skip to content
cratehelp

Change your theme colour

Match your storefront to your brand. Pick a colour preset or your own brand colour in the Customize editor and publish, and buttons, links and accents all follow.

🖥 Web ▶ Video walkthrough

Colour is the fastest way to make a storefront feel like yours. Crate's Customize editor lets you set a brand colour (plus text, button, background and accent colours) and watch the storefront preview update live before anything goes public.

Presets vs. your own colour

The Colors panel gives you two ways to work:

  • Colour presets: a row of coordinated palettes at the top of the panel. One click sets several colours at once, so everything stays harmonious.
  • Per-colour pickers: set your exact brand colour, text colour, button colours and more. Use these when you have a precise hex value from your brand guidelines.

Both update the live preview instantly, so you're never guessing.

Tip: Start from the preset that's closest to your brand, then nudge the individual Brand colour picker. It's faster than building a palette from scratch.

Drafts and publishing

Editor changes are saved to a draft of your live theme; your storefront keeps showing the current colours until you're ready. When the preview looks right, hit Publish and the new palette goes live everywhere your colours appear: buttons, links, badges and accents. Nothing else about your theme or products changes.

A short walkthrough of this flow, recorded from Crate's live admin.
  1. 1
    Open Customize

    From the Online Store overview, click Customize on your current theme. This opens the live storefront editor with a real-time preview.

    Change your theme colour: step 1 (web)
    Web
  2. 2
    Open the Colors panel

    In the editor's left rail, click the Colors icon. The colour scheme panel opens with presets at the top and a picker for every brand colour below.

    Change your theme colour: step 2 (web)
    Web
  3. 3
    Pick a preset or your brand colour

    Apply a ready-made colour preset for an instant coordinated palette, or set your brand colour precisely with the colour picker. The preview repaints as you go.

    Change your theme colour: step 3 (web)
    Web
  4. 4
    Publish your change

    Your edits are saved to a draft of the theme. Click Publish in the editor header to push the new colours live to your storefront.

    Change your theme colour: step 4 (web)
    Web