Illustrated Guide | Ecwid CSS Codes​ to Design Your Store

Illustrated Guide | Design Your Ecwid Store
With Ecwid CSS Codes

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. I would rather be teaching how to use Ecwid or riding my kick scooter 🙂 But I still want to design my Ecwid store to match my brand. In this article, I will teach you exactly that, 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 the button below.

What is Ecwid CSS?

Ecwid allows you to design you store using Ecwid styles which designs 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.

How to 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.

ECWID CSS CODES

Save time searching for codes in the Ecwid forums and support site! Everything you need is all in one place in this eBook. Learn how to Change, Add, Remove and Edit Items to design your ideal Ecwid eCommerce store in seconds. 

CSS Code Example: 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. 

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. 

How to Manually Find Ecwid CSS Codes

If you didn’t find all the necessary code you need to fully customize your store 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 or 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 color 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. 

ECWID CSS CODES

Save time searching for codes in the Ecwid forums and support site! Everything you need is all in one place in this eBook. Learn how to Change, Add, Remove and Edit Items to design your ideal Ecwid eCommerce store in seconds. 

Customize Buttons in Your Ecwid Store

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Here is  how to customize buttons in your Ecwid store.

Simply click here or head over to support.ecwid.com > 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 product page, Continue, Checkout, and Place Order. 

Smaller buttons include the Add More, Go to Checkout, Continue Shopping on cart page, and Clear Bag button for example.

Simply copy/paste the code you need from Ecwid’s Knowledge base or from my Ecwid CSS themes 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-size.ec-size–xl .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 don’t 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 Knowledge base 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 support.ecwid.com and search for CSS.

There you will find knowledge base 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 daniella.io/store for all the CSS codes you need to create your custom Ecwid CSS themes. 

You can also access the eBook in the card above or in the description below.

ECWID CSS CODES

Save time searching for codes in the Ecwid forums and support site! Everything you need is all in one place in this eBook. Learn how to Change, Add, Remove and Edit Items to design your ideal Ecwid eCommerce store in seconds. 

Subscribe to my YouTube channel to get notified of new content.

By #1 Trusted Ecwid eCommerce Expert Daniella.io

My Mission is to Help You Start & Grow Your Online Business. I remember when I started selling online – I had so many questions! Where do I start? What platform is the best for my needs? How do I setup shipping and make sure I get paid? 

With a background in teaching and over 10 years eCommerce experience, it is now my mission to share these answers with you, and more! 

Every week I release Ecwid tutorial videos with insider tips, techniques, short-cuts and hard-won lessons my clients and I have experienced when it comes to building an online store with Ecwid.