I don't see the changes I made to my CSS theme

Last updated

If you updated your Ecwid CSS theme and don't see the changes, check the following.

You're trying to use the incorrect CSS code

Please make sure that your code has the correct syntax and is actually correct.
  

You didn't activate your CSS theme

Please make sure that your custom theme is activated and that you saved the changes.

Your browser cached the changes

Clear your browser's cache and check your store again. It's also a good idea to check if the issue exists in the other browsers.
  

You've created a new CSS theme incorrectly

You duplicated the base theme completely, instead of only adding the rules you want to override.
How Ecwid's CSS works:
  • first Ecwid outputs the base CSS rules (so called "Base Theme")
  • then it sends your custom CSS theme.

Since it's outputed later than the base theme, it's possible to override the base theme's rules. So your custom theme should contain the rules that override the default styles only. 
For example we have an element with class "example".  The base theme has this code: 

div.example {
  color:black;
} 

We want to make it white. So we add the following code:

div.example {
  color:white;
}

 The result output will be: 

 div.example {
  color:black;
}
div.example {
  color:white;
}

Since the rule about the white color is below, it will be applied.
If you just completely copy your base theme to a custom one and remov/change some styles, the base theme will have the necessary rules, while the custom theme will not. As a result — no changes are applied.
So if you just copy a rule in our example and remove the color:black, the output will look like: 

div.example {
  color:black;
}
div.example {
}

and the color will still be black.
 
So, you need to add only CSS rules that you want to override.

None of the above applies - my changes work in one browser but are completely missing in another 

While working on your custom CSS theme, you may find that your CSS customizations are only working in some particular browser or browsers, while other browsers display a completely uncustomized Ecwid shop with a default look or the CSS theme from some other Ecwid shop.
 
Usually your CSS theme is fine and the settings are correct, so none of the above solutions applies to you. The reason why some browsers display an uncustomized Ecwid store is in the code of your shop page.
 
The custom CSS theme from your own Ecwid store is loaded into the shop page with such code:

<script type="text/javascript" src="http://app.ecwid.com/script.js?STORE_ID"></script>

Ideally, it should be used only once in the source code of this page (this speeds up page loading). If you insert a few different Ecwid widgets into one page, there might be a few such lines in the code of your shop page. In this case the store ID used in each of those lines must exactly your store ID.
 
The situation when some browsers reflect the CSS changes in your Ecwid store and others don't is caused by the fact that there are a few app.ecwid.com/script.js lines in the source of your shop page and they use different store IDs. The CSS theme of each shop is loaded with those lines, and in some browsers the newly loaded CSS may override your CSS theme, while in others it won't.
 
Most commonly, Ecwid users insert the line 

<script type="text/javascript" src="http://app.ecwid.com/script.js?1003"></script>

by mistake, while copying the code from the other articles of the knowledge base or from the posts in the community. This line loads the script and style of Ecwid demo store which has almost no customizations, and hence your own CSS theme doesn't work.
 
In order to  correct this and make your shop page always load the style of only your shop, you should check the source of your shop page and

  • either leave the very first occurence of <script type="text/javascript" src="http://app.ecwid.com/script.js?1003"></script> that has your store ID.
  • or  change all the app.ecwid.com/script.js lines in the source of your shop page so that they all refer to your store ID and not to any other number.

Once all the app.ecwid.com/script.js lines in the source of your shop page have the same store ID in them (or, which is the same, there is just 1 such line) your shop page will always load only your own theme.

Was this article helpful?
0 out of 0 found this helpful
Questions?
Get help
  • Presales Chat

    Need help choosing the right Ecwid plan? Our Sales team has the answer you’re looking for.

  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7