How to change color combinations of your website?

StoreHippo gives you the liberty to modify your website according to your requirements. You can design the look and feel of your website according to your taste or requirements. You can extensively change the color of your website. Here are some examples to guide you.

The reflections of changes of primary color may vary as per the theme used. For example, you can also change the color of the category names using nav-header-link color variable mentioned in the header section in a few themes.

How to change the primarycolorof your website?

The primary color is mainly used for styling your website. It reforms the look of a website majorly. You can change the primary color of your website very easily. Follow the mentioned steps to effortlessly change the primary color. 

Example

Steps

1. Go to StoreHippo Admin Panel.
2. Click on Design theme in the top right corner. The StoreHippo theme designer is opened as shown below.
   
   
3. Go to the left navigation panel in design theme. In the Design section, click on Colors. 
   
   
4. Find "primary" and click on it. 
   
   
5. Edit the primarycolorand provide thecolorcode as '#99e1d'. 
   
   
6. Click on Save all Changes to save the recently made changes.
7. You can now view the changed color on your website.
   

How to change the color of buttons on your website?

You can change thecolorof the buttons to make your product page attractive.

Example

Before:

  After:
     

Steps

1. Go to StoreHippo admin panel.
2. Click on Design theme in the top right corner. The StoreHippo theme designer is opened as shown below.
   
   
3. Go to the left navigation panel in design theme. 
   
   
4. In Design section, click on More Variables > Miscellaneous. 
   
   
5. Find "btnprimary bg" and click on it. Provide the color of your choice in the input box.
   
   
6. Preview the changes if you want by clicking on the Preview button. Click on Save all changes to save the recently made changes.
   
7. Now you can view the changes on your website.
   Click here to know more about StoreHippo design theme.
   

How to change the hover color on your website?

StoreHippo lets you customize the hovercolor of your website. The hovercoloris thecolorthat appears when you hover the pointer over a clickable text.

Example

Before:

After:

Steps

1. Go to StoreHippo admin panel.
2. Click on Design theme in the top right corner. The StoreHippo theme designer is opened as shown below.
   
   
3. Go to the left navigation panel in design theme. 
   
4. In Design section, search "hover". The following results appear.
   
   
5. Click on "footer link hover color" and choose the color of your choice.
   
   
6. Preview the changes if you want by clicking on the Preview button. Click on Save all changes to save the recently made changes.
   
   
7. Now you can view the changes on your website.
   
   
   Click here to know more about StoreHippo design theme.

How to change the header background color on your website? 

You can change the backgroundcolorof the header in a few simple steps.

Example

Before:

After:

Steps

1. Go to StoreHippo admin panel.
2. Click on Design theme in the top right corner. The StoreHippo theme designer is opened as shown below.
   
   
3. Go to the left navigation panel in design theme. 
   
4. In Design section, click on Header. 
   
   
5. Click on "top header bg". Provide the color of your choice in the input textbox.
   
6. Preview the changes if you want by clicking on the Preview button. Click on Save all changes to save the recently made changes.
   
7. Now you can view the changes on your website.
   
   Click here to know more about StoreHippo design theme.