Skip to main content

Edit the color palette

Change the storefront's color scheme by editing one or more color groups in the Palette screen.

N
Written by Niyaz

Change the storefront's color scheme by editing one or more color groups on the Palette screen.

Palette editor with storefront preview and color-group controls.

Steps

  1. In the navigation menu, select Palette. The Edit palette editor opens with a live preview of storefront components.

  2. In the palette editor, select the color group you want to change, such as Primary or Background. The group's editor opens.

  3. In the group's editor, adjust the color using its available controls. The exact controls depend on the group, and the live preview updates as you make changes.

  4. In the live preview, review the result to confirm that it looks correct.

  5. In the palette editor, select Save. Make at least one change before selecting Save.

  6. Optional: In the palette editor, select Sync to push the build live.

Result

The storefront theme uses the updated colors.

If something goes wrong

  • If Save remains disabled, no change has been detected yet. In the group's editor, adjust a color value and try again.

  • To abandon unsaved changes, select Cancel or select Reset to revert to the last saved palette.

Related

Did this answer your question?

Related Articles