Ecwid is one of the most popular e-commerce platforms with a user base of  over 1 million merchants. One of the main reasons that impacts their popularity is the customizability. This shopping cart offers a great variety of unique design solutions. In order to use them, you simply need to change CSS in Ecwid. Each online seller has the possibility to use different codes, that instantly affect their store's theme, font, colour and other features accordingly. In this article, we will explain how to change CSS in Ecwid.

change CSS in Ecwid

What is CSS?

CSS stands for Cascading Style Sheets. Basically, it determines how the various HTML elements are displayed on your screen. CSS helps determine the style of your web-store, including the design, colours, layouts, display variations for different devices, etc. HTML was originally created to define the contents of a web-page, not to format it. So, as time went by, more and more formatting of web-pages was required. As a result, it became difficult to do on HTML and that is where CSS comes in. It helps HTML focus more on page content, while it deals with page formatting.

How to change CSS in Ecwid

In fact, changing CSS in Ecwid is very easy and you can do it in a matter of seconds. Ecwid comes with a default CSS theme that gives your website its default view. However, if you’d like to change the appearance of your website, there are some premade CSS themes available for purchase from the Ecwid store. On the other hand, if you want to customize the website's appearance specific to your needs or edit only certain parts of the website, you can do this by editing the default CSS code which is completely free.

To customize only a particular element in your store:
  1. First, find the code for the customization you are looking for (you can find codes for this on the Ecwid website or on various websites online. You can also write your own code if you know how to).
  2. Afterwards, open your Ecwid control panel, go to Configurations and select Design.
  3. The page displays the current CSS theme (if you haven't added any themes, it’s usually only the default one).
  4. Then, click on Add new CSS Theme, which will create a blank page for you to add the codes. (Note: All the codes from the default CSS are currently loaded. If you add any codes, only that element will change and all the other elements will be similar to the default one).
  5. Finally, Enter the codes for the elements you want to change and press Save.

When you reload your webpage, the elements will have changed based on the changes you made in the CSS.

Goda Jurgaityte
Goda Jurgaityte |

Senior Copywriter at Multiorders. Goda is a writer, marketer and lead of the e-commerce blog for ambitious entrepreneurs. Being on top of e-commerce news allows her to teach you how to grow an audience, manage your store or start an online business. The best business advice has inspired hundreds of small business owners, and some of the biggest brands in commerce, to start and grow their business.

All collections > E-commerce

182 articles in this collection