Ecwid CSS Themes & Ecwid CSS Codes

 

This article will show you how to fully customize your Ecwid store with Ecwid CSS themes and Ecwid CSS codes! This article also provides awesome Ecwid tips and tricks to make sure your code is clean and your store looks great.

 

WHERE TO GET ALL THE CSS CODES YOU NEED TO DESIGN YOUR STORE

 

Click on the eBook below!  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. Hit the Buy Now Button and receive the codes you need in your inbox instantaneously!

 

 

CUSTOMIZE YOUR ECWID STORE USING CSS

 

 

Hi, this is Daniella from Daniella.io and today I will show you how to customize the look and feel of your Ecwid store. We will be using Ecwid CSS code, but I promise you will not actually have to program anything. All the code you need is available in the card at the top right of this video, or in the link in the description.

CSS is stands for Cascading Style Sheets. It is code that describes how HTML elements are to be displayed on screen. All you have to do is open your seller Control Panel, head over to Configuration and click on Design.There are a few ways you can customize your store :
  • You can use a paid app available in the Ecwid App store
  • Or you can create your own theme for free by based off of Ecwid’s standard theme.

I am going to show you how to create your own theme.We are going to make minor changes to the standard theme that is activated by default on your Ecwid store.So let’s click on Create New Theme.Make sure to open the blog post in the description that contains all the Ecwid CSS codes you need to customize your store.

I am going to show you how to change the color and size of prices using this code.You will simply need to know the color codes you want to use.There are tons of online tools that can provide you color codes if you need them. Simply copy-paste the code you need.
Once your color code is pasted, make sure to save and activate your theme. You may have to clear your browser cache or open your site in a different browser if changes are not made right away. 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.

Then choose “Inspect element.” I am using 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.

 

HOW TO CLEAN UP YOUR ECWID CSS THEME CODE

 

Hi this is Daniella from Daniella.io. Before we begin, please check out the links in the description to learn more about how to customize your Ecwid store using CSS. A full tutorial series on Ecwid theme customizations is available on my Youtube channel.So if you are currently customizing your Ecwid store with CSS, you may be lost in all the codes you have added.

If you cannot remember which code does what, then this tip will definitely help you keep your CSS codes organised. 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 this code:

/*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 it.Check out the link in the card above for all the CSS codes you need to create your Ecwid theme! If you liked this Ecwid CSS themes tip, please subscribe.

 

HOW TO CREATE A CUSTOM ECWID CSS THEME

 

Hi this is Daniella from Daniella.io and today I am going to show you how to create a custom Ecwid CSS Theme. Before we begin, please check out the links in the description to learn more about how to customize your Ecwid store using CSS. A full tutorial series on Ecwid CSS customizations is available on my Youtube channel. 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.If you liked this Ecwid CSS tip, please subscribe.

HOW TO CUSTOMIZE BUTTONS IN YOUR ECWID STORE

 

Hi this is Daniella from Daniella.io. In this video, I am going to show you how to customize buttons in your Ecwid store.

Simply click on the link in the description 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 color with the word “Green” or with your brand’s color 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;
}

 

Check out the eBook that contains all the CSS codes you need to edit your Ecwid store available at Daneilla.io/store or in the link in the description. The eBook will save you a ton of time and provide you with all the codes you need to fully customize your store!If you liked this Ecwid CSS tip, please subscribe.

 

HOW TO CUSTOMIZE FONTS IN YOUR ECWID STORE

 

In this video, I am going to show you how to customize fonts in your Ecwid store.Simply click on the link in the description or head over to support.ecwid.com > click on design > and then “Changing fonts in your Ecwid store.Copy the code you would like to use, and paste it to your custom CSS theme.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: NAME_OF_FONT !important;
}

You can also change the size and color 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 color with the word “Green” or with your brand’s color codes. Check out the eBook that contains all the CSS codes you need to edit your Ecwid store available at Daneilla.io/store or in the link in the description. The eBook will save you a ton of time and provide you with all the codes you need to fully customize your store!If you liked this Ecwid CSS tip, please subscribe.

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. Hit the Buy Now Button and receive the codes you need in your inbox instantaneously! Click on the eBook below! Create your own Ecwid CSS themes now!

 

GET THE ECWID CSS EBOOK NOW
CLICK ON THE IMAGE BELOW