Are you a BigCommerce user? I recently launched a site through BigCommerce.
I decided to go with BigCommerce over Shopify, because BigCommerce offers more advanced features and their themes were more appealing to me. If you’re currently using BigCommerce and deciding on a theme, or have already chosen the Classic Hip theme, I have some how-to advice below on how to modify the color of the header if you don’t like the light-grey header.
Default Header Color of the BigCommerce Classic Hip Theme
Below is a snapshot of the header color scheme that comes with the Classic Hip theme.
Now, below is a snapshot of my store, which uses the Classic Hip theme, but which has been changed to an all-white header:
Instructions for Modifying the Classic Hip Theme Header Color
Now, in order to remove the light-grey color that comes as the default for the Classic Hip header, simply follow the below instructions:
- Click on “Setup & Tools” in the upper-right corner of your admin screen.
- In the menu that pops up, go to the far-left column called “Set up your store”, and click on “Design” (the first option).
- Under “Current Store Theme” click on “Theme Files” (I’m assuming you’ve already chosen Classic Hip as your theme).
- Now, you’ll see a screen with a bunch of code. In the left-hand column, click on “white.css”.
- Once you’re looking at the white.css page, you need to find the code for both “.top-bar” and “.title-bar”, in order to change the colors of the header. So, the easiest way is to use your browser’s Find function. For example, I use the Google Chrome browser, and I simply press “Control-F” and it brings up a search box. I then enter the text “.top-bar” and press “Enter”. Once you do that, your browser should highlight the following code on the page:
- At this point, you need to decide if you want your header to be all-white, or a different color. If you want all-white, simply replace the #f2f2f2 with #ffffff, using your keyboard. Do this for both “.top-bar” and “.title-bar”. The #ffffff is the hex color code for white. If you want a different color, you can use a website such as www.color-hex.com to find the correct hex color code for the color you want to appear on your website. Your code should now look this below if you chose to go with all white:
- To finish, simply click “Save” in the upper left-hand corner. To get back to the admin screen, click on “Close”.
If you refresh the tab with your homepage on it, you’ll now see that the header of your store shows the new color you chose. If you have any questions, feel free to post a question in the comment section below and I will respond.
If you enjoyed this post, sign up for my monthly newsletter in which I give away free copies of my most recent book reviews.
