Use the Palette screen to change the storefront's color scheme by editing one or more color groups. Each group controls a distinct part of the UI; for example, Primary styles call-to-action elements and Background sets the base site color.
Steps
In the navigation menu, select Palette. The page is titled Edit palette and lists the color groups Background, Text, AppBar, Footer, Primary, Secondary, Warning, Info, Success and Error.
Locate the color group you want to change, such as Primary or Background.
In that group, enter the new value in the color field you want to change. Background has the Default and Paper fields, Text has Primary, Secondary and Disabled, and each other group has Main, Light, Dark and Contrast Text. The live preview updates as you make changes.
Review the storefront preview to confirm the result looks correct. The preview uses sample content and is not interactive.
At the end of the page, select Save. Save stores your changes. Save is disabled until you make at least one change.
Optional: Select Reset. Reset discards unsaved changes and returns the palette to the last saved state.
Result
The storefront theme uses the updated colors. To push the build live, select Sync.
If something goes wrong
If Save stays disabled, no change has been detected yet. Change a color value in one of the groups and try again.
To abandon all unsaved changes, select Cancel or Reset to revert to the last saved palette.
Related