Branding colors create a strong visual identity, making your online store instantly recognizable and memorable to customers. They also influence emotions and buying decisions, helping to build trust and guide shoppers toward making a purchase.

The theme branding color will include the header, footer, the store page, single product page, cart and the checkout page. Any element that is connected to a product will be affected by the theme.

The colors on the homepage, about page, and contact page might not be affected because they are controlled by the page builder settings.

To set it up, you need to go to “Store Appearance” on the left sidebar and then click on “Store Styling”.

Wait for the page to load and then click on the tab labeled “Colors”. We are going to start with the “Top Bar” by clicking on it.

1. Top Bar

You can change the top bar background which in this case is white. Let’s change the color to red and see what it is going to look like.

The top bar text color is black and let’s change it to yellow.

The border color can also be changed.

Click on any of the colors and a color panel will open. You can select any of the colors located on the top or change the shades of the color.

If you have your custom branding color you can paste its hex code within the input bar below. 

2. Header

Next, we are going to select the header tab and see which options are available. 

You will notice that you can change the background of the header. Make sure it is the same color as the background of your logo. If your logo has a transparent background, then you can keep it white.

You can also change the border color. In this case, the border is not visible and not needed.

For mobile, you first need to change to the mobile screen. 

Let’s change the navigation icon to green and let’s make the cart icon a yellow color.

Click on the menu hamburger icon to open the navigation. 

Let’s change the background and make it orange and let’s make the text color blue. You can also change the color of the divider which is not visible in this case.

Go back to the desktop screen size, click on the back arrow button, and then select the navigation.

3. Navigation

The navigation is going to be the part where the menu and cart icon are located.

You can choose to fade out other links on hover. Whenever you hover your mouse over a link, the other links will fade out. This feature makes your store more interactive.

Next, we can change the background of the navigation. Let’s make it purple.

You can change the color of the navigation border. Let’s make it yellow.

The color of the links can also be changed. Let’s make it green. You can also change the color of the underline of the link whenever you over over it. Let’s make it white.

You can change the color of the dropdown as well. Let’s change the dropdown background to blue and the dropdown text to yellow.

You can also change the color of the links when you hover over them. Let’s change the color to white.

The secondary navigation colors can also be changed. Let’s make it green.

Let’s make the chart icon color red, the text orange, and the text hover color blue.

4. General

Let’s go to the general color settings by clicking on the “General” tab.

Here we can change the primary swatch color. We recommend that you choose your primary brand color. This color will be displayed on each store-related page throughout the theme.

You can change the color and hover color of the links that will be displayed in the content of each store-related page.

The body background color can also be changed. Let’s keep it to white.

Next, we are going to go to the Woocommerce section.

5. Woocommerce

Primary Button

Under the “Primary button” section, you can change the background color of the button and also the background color on hover. You can also change the color of the text of the button.

This button will be displayed on the store page, category page, single product page, sticky scroll bar, cart page, and checkout page.

Sale Flash

The sale flash is going to be the icon displaying the discount on the image of each product that is on sale.

You can change its text and background color.

Ratings

The star rating color can also be changed. Currently, we do not have any ratings on the store. You can change the color to orange or your primary brand color.

Product Archives

The product archives will be the category pages. Click on any of the categories to display the template.

You can change the description background and text. Let’s make the background color green and the text white.

Single Product

For the single product, you can click on any product to view the template. You can change the background color of the container. Let’s make it blue.

You can also change the floating button background and text color. This is the button at the bottom left of the screen. Let’s make the background yellow and the text black.

Cart and Checkout

Let’s go to the cart page and change the color of the progress bar to purple.

6. Footer

We can also change the colors of the footer as well which is located at the bottom of the store. Scroll down to see it.

You can change the color of the icons in the below content section. In this case, we do not have icons.

You can change the footer background. Let’s make the color red. 

The heading’s color can also be changed. Let’s make the green. We can also change the footer text color. Let’s make it purple.

The footer link color can be changed. Let’s make them white. You can also change the hover color of the links. Let’s make it purple.