All Collections
Look and Feel
Theme Tweaker (X-Cart 5.4.x and earlier)
Adding Custom CSS Code in the Storefront (X-Cart 5.4.x and earlier)
Adding Custom CSS Code in the Storefront (X-Cart 5.4.x and earlier)

Learn how to customize your store using the Custom CSS tool directly from the storefront.

Olga Tereshina avatar
Written by Olga Tereshina
Updated over a week ago

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

For this purpose:

  1. When logged in as an administrator, open the storefront to see the Theme Tweaker add-on 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.

Below we will provide a demo CSS code to illustrate, e.g., how the skin changes apply.

The figures below show 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 following piece of code sets the blue background and the font color:

* 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.

Related pages:

Did this answer your question?