If you need to see the changes while you are adding them use the Custom CSS tool in the storefront.

For this purpose:

1. Open the storefront when logged in as an administrator to see the Theme Tweaker add-on tools panel.

2. Click on the Custom CSS tab on any page of your site storefront and turn ON the Use Custom CSS toggle.


3. Enter your custom CSS code to the text area.

4. Save the changes.

Let’s check how the skin changes apply based on the demo CSS code provided.

The figures below show one and the same page with a custom CSS code applied and without it.

  • Default page layout

  • Customized page layout


As you see the custom CSS code changes the background of the “Categories” block.

The blue background and the font color is set by the following piece of code:

* Specific styles for the Top categories block in the side bar
.sidebar .block.block-top-categories .head-h2 {
background: #f7fcff;

.sidebar div.block.block-top-categories div.content {
background: #f7fcff;

.sidebar div.block.block-top-categories div.content a {
color: #6f9cd9;

If we change #f7fcff to #F5F5DC the background will look as follows:


You can use the demo CSS code to learn how to apply similar changes to your store skin.

Did this answer your question?