How to change the color scheme in your Opencart theme


Changing the colors in any Opencart template is a pretty simple process.

So if you bought a theme, love the design but want to change the colours to match your logo or just simply prefer a different colour. Follow these steps.

In this demonstration we will use Google Chrome browser

If you don’t have google chrome, you can download it here

How to change the colours

  • First, open your website in your Google Chrome brower
  • Now find text or an object on your page that has the colour that you want to change, and right click over it.
    (for example, if a color of a title is blue, then right click on the title)
  • Now a drop down will appear and select “inspect element”
  • Now you will see Chrome expand to show the code that is used to make the page

Opencart code in chrome

  • To the button right of the page (seen in the image above), you will see the color used to make the text.
    • In the example above this is: color: #0c508d
  • Make a note of the number used to make this color (0c508d)

Now we need to open your themes css stylesheet

  • Open the stylesheet located in Your Opencart install/catalog/view/theme/YOUR THEME/stylesheet/stylesheet.css
    (you can download the file via FTP0
  • You can open the file in notebook or any plain text programme if you don’t have Adobe Dreamweaver

Now you need to find the html value of the colour you prefer

All colours used in the web have an html value of letters and numbers. For example, the blue that I used in the example image above is #0c508d

You can find the html version of your colour using this website:

Once you have found your colour you need to do a search and replace in your stylesheet from the old colour to the new.

  • In notepad… go under edit and click “replace”. (make a backup of the original first!)
  • Then save your stylesheet and reupload to the web.
[banners_zone id=2]

Translate »