Change Store Colors

Store colors help define your brand style and create a consistent shopping experience across your storefront.

In BurgerShop Theme Editor, you can update your main color, text colors, and button colors from General setting > Color. These settings may affect multiple areas of your store, including headings, body text, buttons, links, and highlighted elements.

On this page

• Access Color settings
• Understand color settings
• Change the main color
• Change text colors
• Change button colors
• Preview your color changes
• Save and publish changes
• Best practices
• Troubleshooting

Access Color settings

You can manage your store colors from the Theme Editor.

Steps:

1. Log in to your BurgerShop admin.
2. Go to Online store.
3. Select Themes.
4. Open the theme you want to edit.
5. Click Customize.
6. In the left sidebar, click General setting.
7. Select Color.

From this section, you can update the main color, text color, and button color settings for your storefront

Understand color settings

The Color section includes several groups of settings

Change the main color

The Primary color is the main brand color used across your storefront. It may appear in key design elements such as highlights, links, icons, buttons, or active states depending on your theme.

Steps:

1. Go to General setting > Color.
2. Under Main color, find Primary.
3. Click the color field.
4. Select a color or enter a hex color code.
5. Review the storefront preview

Change text colors

Text colors control how headings and body text appear on your storefront.

Heading color

The Heading color applies to major titles, such as section headings, product titles, and page titles.

Body text color

The Body text color applies to regular text, such as descriptions, labels, and paragraph content.

Steps:

1. Go to General setting > Color.
2. Under Text color, find Heading.
3. Choose a color or enter a hex code.
4. Find Body text.
5. Choose a color or enter a hex code.
6. Review the preview to make sure the text is easy to read.

Recommendation
Use dark text on light backgrounds or light text on dark backgrounds. Good contrast makes your store easier to read and improves the customer experience.

Change button colors

Button colors control how primary buttons appear across your storefront, such as “Add to cart,” “View all,” or other call-to-action buttons.

Button background

Controls the main button background color.

Button text

Controls the text color inside the button.

Button hover

Controls the button color when customers hover over it.

Steps:

1. Go to General setting > Color.
2. Under Button color, find Background.
3. Choose the main button color.
4. Find Text.
5. Choose the button text color.
6. Find Hover.
7. Choose the hover color.
8. Review the preview and test how the button looks.

Tip
Your button color should stand out from the rest of the page. This helps customers notice important actions, such as adding a product to cart or viewing a collection

Preview your color changes

After updating colors, review how your storefront looks in the preview area.

Check the following areas:

• Header
• Announcement bar
• Product titles
• Section headings
• Body text
• Product cards
• Buttons
• Links
• Footer
• Mobile layout

You should also switch between desktop and mobile preview to make sure the colors display well on different screen sizes.

Save and publish changes

After updating your store colors, save your changes.

Steps:

1. Click Save in the top-right corner.
2. Review your storefront preview.
3. Click Publish if you want to apply the updated theme to your live store.

Note
If the theme is already live, saving your changes may update the live theme depending on your setup