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.

QUIZ | Best Option to Design my Ecwid Store?​

Knowing the best way for you to design your Ecwid store to match your brand may still seem a bit confusing. Take the quiz below to determine exactly your specific needs.
0%

Have You Used Ecwid’s Design Panel to Customize Your Store Design?

In your Ecwid Control Panel > Head over to the Design tab > Choose options to design your Ecwid Store.

Would You Like to Add, Change, Edit or Remove Default Ecwid Items in Your Store?

Here are some examples: Change the colour or size of a text. Hide a default Ecwid title in your online store. Re-position an item in your store like the add to cart bag.

Would You Like to Edit Functionalities in Your Ecwid Store?

Examples: Have a drop-down to select product quantities. Oblige customers to select a certain quantity of products to be able to checkout. Display slider buttons to scroll between products. Change the way bulk pricing works.

Are You Looking to Add New Pages Your Ecwid Site?

Like a blog, contact page, about us page etc.

CSS
Customize Your Store Using the Ecwid Design Panel
Check out solution #1. in this article: The Ecwid Design Panel​ and learn how to design your online store quickly and easily. In your Ecwid Control Panel > Head over to the Design tab > Choose options to design your Ecwid Store.
Customize Your Store Using Ecwid CSS Codes
Check out solution #2. in this article: Customize Your Store Using CSS Codes​ and learn how to design your online store quickly and easily. Ecwid CSS allows you to customize the look and feel of your Ecwid store. I promise you will not actually have to code or program anything! All the code you need is available in my Ecwid CSS eBook.
Customize Your Store Using a CMS (Content Management System)
Check out solution #4. in this article: Customize Your Store Using CSS Codes​ and learn how to design your online store quickly and easily. You can use a CMS or a content management system. You might have already heard of WordPress, Wix or Weebly. These are all content management systems, and they allow you to create and design websites.
Ask Ecwid for Custom Development
It seems your needs go beyond just designing your Ecwid store aesthetically. If you are looking to change the way Ecwid works, you should request custom development from their team. Simply fill in the form here: https://ecwidcom.typeform.com/to/vIlijv

Share your Results:

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. 

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. 

Ecwid CSS Code Examples

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. 

Get More Ecwid CSS Codes

Here are some examples of free Ecwid CSS Codes. Get my Ecwid eCommerce CSS Codes eBook for more!

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. 

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.

 

Latest Blog Articles

Ecwid
Daniella.io

I Tested 10 eCommerce Solutions, This was my Favorite

I remember when I started selling online. I had so many questions! What platform I should choose? How can I be sure yo get paid? I did not know where to start, it was very overwhelming! I was very afraid I would get started with a platform and realize I wasted months because I made the wrong choice. You no longer have to be afraid of wasting time – I did the time wasting for you. I have tested (over) 10 eCommerce solutions since I started selling online and I did find the best one, a hidden gem called Ecwid.

Read More »
Ecwid
Daniella.io

WordPress vs Wix for Ecwid eCommerce Users

Both Wix and WordPress are popular site builders, and Ecwid users can use either of these options to create their business-oriented sites. However, despite being in the same niche, there is still a world of difference between WordPress and Wix. But what are these differences? More importantly, which site builder is the better option for you as an Ecwid user? Take the personalized quiz and find out!

Read More »