Ecwid CSS Codes​ to Design Your Store

If you are reading this post it’s probably because you are like me, you do not code. I am more of an entrepreneur/marketer and I do not have time to spend trying to learn code CSS to design my online store. I would rather be teaching how to use Ecwid on YouTube. But of course, you still want to design your Ecwid store to match your brand.

In this article, I will teach you exactly that, how to design your Ecwid store, no coding skills required. If you would like to learn more about what Ecwid CSS Codes are vs. an Ecwid theme vs. custom development, then click on that link.

What is Ecwid CSS?

Ecwid allows you to design you store using CSS or Cascading Style Sheet code which styles the HTML code. Thanks to Ecwid CSS codes, you can customize the look and feel of your whole Ecwid store. Codes allow you to change, add, remove and edit change different items like titles and colours using various codes.

The video below demonstrates how to change your Ecwid store design using these codes made for Ecwid stores.

Create Your Custom Ecwid CSS Theme

I am going to show you how to create your own Ecwid CSS theme and edit specific Ecwid elements to your liking. We are going to make minor changes to the standard theme that is activated by default on your Ecwid store. To design your Ecwid store using Ecwid CSS codes:

  1. In Your Ecwid Control Panel
  2. Click on Design > Scroll to the bottom of the page
  3. Click on Create Your CSS Theme
  4. Click on Add New CSS Theme
  5. Copy the code you need, and paste it to the interface
  6. Make sure to Activate your theme and Save your changes
  7. Refresh your storefront and check out your new design!

If changes do not apply automatically, make sure to clear your browser cache. Here are some examples of free Ecwid CSS Codes. Get my Ecwid eCommerce CSS Codes eBook for more!

Change the Color of Ecwid Prices

Here is is the code to change the colour of prices :

div.ecwid-Product div.ecwid-productBrowser-price {
color: #ffffff

You will simply need to replace #fffff with the colour codes you would like to use. There are a lot of online tools that can provide you colour codes if you need them. 

Ecwid Hide Price Code

.ec-size .ec-store .product-details__product-price {
display: none

Ecwid Hide Category Images Code

.ec-size .ec-store .grid__categories * 
display: none

You may have to clear your browser cache or open your site in a different browser if changes are not visible to you right away. 

More Ecwid Codes

Those were some examples of Ecwid CSS codes you can find online. Get my Ecwid eCommerce CSS Codes eBook for more!

More Codes

Manually Find Ecwid CSS Codes

If you didn’t find all the necessary code you need to fully customize your store on Ecwid’s support site, on their forums, or in my eBook, you can find what you need by right-clicking on an element that you want to modify. Right-click and choose “Inspect Element.” I use Chrome but every browser has an option for something similar. 

This is where you can find the information on the element you want to modify. You can even test it out for fun directly in your browser, but you still need to copy/paste this info to Ecwid and to activate it for the changes to be permanent.

Keep Your Ecwid CSS Codes Clean

You should keep your code clean to make it easy to find and delete or edit codes in the future. Here are some ways you can make sure your code stays clean and easy to read.

If you come back to your Ecwid CSS theme in the future and cannot remember which code does what, then there is a problem. Messy code will make it difficult to edit or delete codes in the future. This tip will definitely help you keep your CSS codes well organized. 

All you have to do is add a title between a backslash, star, star, backslash as such: /**/

You can name the code that follows this title without affecting your CSS theme. In this example, the code that follows edits the colour of the Checkout button. We can, therefore, name our code – for example:

/*Checkout Button Color*/
button.ecwid-btn--primary.ecwid-btn--checkout {
background: red;

The next time you return to your CSS theme, you will know what each code is for and will easily be able to edit or delete your code.

Customize Buttons

Here is how to customize buttons in your Ecwid store. Simply head over to > click on design > and then “Changing buttons in your Ecwid store.

There are many buttons in your Ecwid store, therefore be sure to choose the codes for the button you would like to edit. The large buttons in your store include Add to Bag, Continue Shopping on the product page, Continue, Checkout, and Place Order. Smaller buttons include the Add More, Go to Checkout, Continue Shopping on the cart page, and Clear Bag button for example.

Simply copy/paste the code you need from Ecwid’s Knowledgebase or from my Ecwid CSS eBook, and paste it to your theme. Edit the code to match your liking. In this case, we will change the Buy Now button to Green. Simply replace the colour with the word “Green” or with your brand’s colour codes.

/*Text color*/ .ec-store .form-control--small .form-control__button {
color: white;
/* Buy now buttons color in grid view */
.ec-size .ec-store .form-control--secondary .form-control__button {
   background-color: red;
   color: red;
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
   background-color: green;
   color: #56725d;

Customize Fonts in Your Ecwid Store

This section demonstrates how to customize fonts in your Ecwid store. Here is how to change the font family of your entire Ecwid store. Now I do not recommend using Comic Sans as a font in your store, but since everyone knows this font, here is what it would look like:

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: COMIC_SANS !important;

You can also change the size and colour of fonts in your store. Just copy/paste the code you need from Ecwid’s Knowledgebase or from my CSS eBook, and simply replace the colour with the word “Green” or with your brand’s colour codes. 

Create a Custom Ecwid CSS Theme

If you would like to create a custom Ecwid CSS themes for your Ecwid store, all you have to do is head over to and search for CSS. There you will find knowledgebase articles and forum articles containing Ecwid CSS codes. Simply copy/paste the codes to create your theme. Once you are ready, you can activate your changes.

However, if you would like to save a ton of time searching through Ecwid’s forums and Knowledge Bases, please check out the CSS eBook available at for all the CSS codes you need to create your custom Ecwid CSS themes. 

If you enjoyed this tutorial, be sure to subscribe to my YouTube channel for more up to date Ecwid design tips and tricks.