Ecwid 201: Take Your Ecwid Store to the Next Level

by Daniella L.

Table of contents:
Back to the library

§1 Ecwid CSS. Fully Customizing Your Ecwid Store

Ever since I started providing Ecwid tutorials, I have received requests non-stop for CSS tips. Ecwid is very flexible in the sense that it allows you to customize your store to match your brand. However, without any CSS knowledge, making these changes can become very tedious and frustrating for newbies.

So, here is (almost) everything you need to easily make your store look exactly the way you want it to. All you will need to do is copy and paste the few lines of code provided here to get it to look the way you want it to!

How to Customize Your Ecwid Store

Step 1: Creating Your Theme

It is super easy to create your custom theme in Ecwid. All you have to do is open your seller dashboard, head over to Settings > Design > CSS Theme.

Tip: Create your new theme based on the theme that looks the most like your brand colors or the colors on your website. If your website is dark, you may wish to use the red theme which uses darker colors. If your website is light, you could use the beige or standard theme as a base to create your custom theme.

Create a new theme: based on the red or beige theme if you have very few changes you wish to make.

Duplicate: the red or beige theme if you wish to make many changes to the look of your store.

Create a new theme by clicking on “New CSS Theme.” Rename your theme to whatever you wish. Ecwid will use the base theme you had Add code to this theme.

Tip: New Ecwid Feature for WordPress Users! (2016). If you use the Ecwid Plugin on a WordPress site you can use Ecwid’s Chameleon skin feature. Chameleon skin will adapt to the design of your theme by detecting predominant colors and fonts. You can enable Chameleon on the “Advanced” tab in the Ecwid plugin settings in your WordPress backend.

Step 2: Customizing Your Theme

You can change, add, remove and edit change many different items using various CSS styles. All you need to do add some CSS code to your active theme. You can add and edit different styles to all of the following labels including font, font size, color, etc.

If you are totally new to CSS you may never heard of Color Hexes. Color hexes are codes used to identify a color. Knowing the codes you want is key if you wish to change the colors of your Ecwid store. Here are a few resources to know and choose your color hexes:

Get Color Hex from Image: if you do not know what your color codes are you can use this reverse tool to upload your logo or image to easily extract your color codes.

Color hex pickers:

Popular flat design color codes:

You can change, add, remove and edit change many different items using various CSS styles. All you need to do add some CSS code to your active theme. You can add and edit different styles to all of the following labels including font, font size, color, etc.

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

How to Change Items

Here are a bunch of codes you can use to change items that appear in your Ecwid store. All you need to do is create a new theme (Settings > Design > CSS Themes > New Theme) and paste the codes you wish to use in your store.

Important: do not forget to replace #FFFFFF (white) with the color codes you want to appear in your store!

Change the color of prices in your store:

div.ecwid-productBrowser-price {
color: #FFFFFF;
}

Change the “In Stock” label color:

div.ecwid-productBrowser-details-inStockLabel {
color: #FFFFFF;
}

Change border that appears when you hover over a product:

div.ecwid-productBrowser-productsGridproductTopFragment-mouseover {
border: solid 1px #FFFFFF;
border-bottom: none;
}
div.ecwid-productBrowser-productsGrid-productBottomFragment-mouseover {
border: solid 1px #FFFFFF;
border-top: none;
}

Change default product and description text size:

div.ecwid-productBrowser-details-descr {
color: #FFFFF; font-family: “Arial”;
}

Change product price font:

div.ecwid-productBrowser-price {
font-size: 20px;
}

Change the text color of your product options:

div.ecwid-productBrowser-details-optionPanel label.ecwid-fieldLabel {
font-weight: bold; color: #FFFFFF;
}

Change the product title hover color:

table.ecwid-productBrowser-productsGrid-v2
div.ecwid-productBrowser-productNameLink:hover a { 
color: #FFFFFF;
}

Change product browser category label colour (size, font…):

div.ecwid-productBrowser-subcategories-categoryName {
font: normal 19px “trebuchet MS”, helvetica,
verdana, sans-serif;color: #FFFFFFF;
margin-top: 15px;
text-align: center;
}

Change Sign in pop up background color:

div.ecwid-popup {
border: solid 18px #FFFFFF;background-color:
#FFFFFF;padding: 5px;
}

Change Sign in pop up header font or color:

div.ecwid-popup-headLabel {
font: 30px georgia, “times new roman”, times, serif;
color: #YOUR_COLOUR;
margin: 0 0 12px 0;
min-width: 240px
}

Change the Position of the Mini-Cart
Change Product Titles

How to Add Items

Add drop shadow effect to product images:

.ecwid-productBrowser-productsGrid-productTopFragment img { 
background:transparent url(http://kb.ecwid.com/f/
shadow-1000x1000.gif) no-repeat scroll right
bottom;
padding:5px 10px 10px 5px;

.ecwid-productBrowser-details-thumbnail img {
background:transparent url(http://kb.ecwid.com/f/
shadow-1000x1000.gif) no-repeat scroll right
bottom;
padding:15px 20px 20px 15px;
}

Add border around products
Add GIFS as product images
Add tabs to product descriptions
Add a sale price view

How to Remove Items

Remove delivery time from names of shipping methods. If you select automatic shipping methods for your products such as Fedex, USPS or UPS, delivery time may also be displayed at checkout. You can hide this information with the following code:

span.ecwid-shippingOption-days,span ecwid-Invoice-ShippingDetails-transitTime {
display:none !important;
}

Remove breadcrumbs. A breadcrumb is a string of links that show your path on a site. On the left you can see an example of a breadcrumb in an Ecwid Store (usually found at the top left of your store). You can remove breadcrumbs with the following code:

div.ecwid-productBrowser-categoryPath {
display:none;
}

Remove “Sort By” drop-down menu:

div.ecwid-results-topPanel-sortByPanel {
display:none !important;
}

Remove “view as” link:

div.ecwid-results-topPanel-viewAsPanel
display:none !important;
}

Remove category title:

div.ecwid-productBrowser-subcategories-categoryName{
display:none;
}

Remove the Mini-Cart:

div.ecwid-minicart {
display:none !important;
}

Remove the tax line:

table.ecwid-productBrowser-cart-taxAmountPanel,
tr.ecwid-Invoice-Summary-taxRow {
display:none !important;
}

Remove available quantity:

div.ecwid-productBrowser-details-qtyAvailInfo {
display:none;
}

Remove sign in:

div.ecwid-productBrowser-auth
display: none;
}

Remove Continue Shopping button
Remove category icons from the store
Remove cart “Drag and Drop” text

How to Edit Buttons

Digging Deeper: Find Exactly What You Want to Edit

Check out this Youtube video to find out how to dig deeper into the CSS you would like to edit.

Troubleshooting

If you are having issues with your CSS code, check out these tips on Ecwid’s Help Center. If ever you are really stuck, all you have to do is activate one of Ecwid’s default themes (Standard, beige or red).

If, after following this easy tutorial, you still feel like CSS is too complicated for you, you have the following choices:

  • Leave your store as is with Ecwid’s default standard theme.
  • Use another one of Ecwid’s free themes (beige or red).
  • You could also check out Ecwid’s App Market under Design for various design customization offers (free to $3,000).
  • You could also upgrade to an annual Unlimited plan to benefit from twelve hours of customization by Ecwid’s design team.
  • Check out Ecwid’s custom services for more.

§2 Five Ecwid Hacks for Penny Pinchers

If you loved the hacks in Chapter 4 (Ecwid 101), here are a few penny-pinching ideas and bits of code to personalize the look and feel of your Ecwid Store.

Although there are many benefits to having a paid Ecwid account, some of us cannot afford one during the first months of testing our sales online. Here are some Ecwid hacks for the first time online sellers and startups looking to save money.

How to Only Sell 10 Products Even if You Have 100

So you have hundreds of products to sell but Ecwid is limiting you to only ten. There is a way to add 100 products to your store without having to upgrade your account.

  • Businesses on a tight budget.
  • Products that have no variations or that are unique.

How to: Get out a pen and paper and find a way to categorize your products. Let’s say for example you are selling women's clothing. You have 10 shirts, 20 skirts, 50 pants, and 20 dresses. Instead of making 100 separate products you are going to create one product for each category.

Tip: Do not use Ecwid categories for this tip. Delete the two demo categories and head directly over to the products section to create your “categories.”

Add your first product called “Shirts.”

Head over to the Options tab and add as many options as you need (size and color for example). If your products are unique or your stock is limited (since it is a paid feature to have stocks), you can create unique products by making an option with the exact name of your product including its variations (for example: Grey size M, Blue size S, etc).

Note: You will have to manually delete the products once they are out of stock.

Fill in product descriptions so that your clients know exactly what they are purchasing. Then head over to the Gallery section and upload all the shirts you are selling. Name each shirt using the reference in your description.

Tip: Use your SKU to name your products in your description, option choices and gallery names so that your clients are sure of what they are purchasing.

Next, head over to the Design tab and add the following bits of code!

This code will hide the product price in your storefront making the products actually look like categories:

.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-price {
display: none !important;
}

This code will enlarge the text on a product image:

div.pswp__caption small, div.pswp__caption__center {
font-size: 30px !important; line-height: 40px
!important;
}
div.pswp__caption__center div {
display: none !important;
}
div.pswp__caption__center small div {
display: inline !important;
}

This will make it easier for your client to understand which image goes with which product, especially if you are offering 10 different dresses in different sizes.

How to Charge Extra Costs at Checkout

Ecwid offers a paid handling fee option available with a venture plan (minimum). But you can easily add any fee for free.

So you want to charge a handling fee at the checkout but you do not want to pay a recurring monthly fee to do so? Easy. Head over to Settings > Taxes and add a new tax but name it Handling Fees for example. Choose the concerned zones (make sure you had set up your zones in the Zone tab). Set the rate and you are done.

This tip is best for:

Anyone wanting to charge extra fees at checkout.

How to: You can name your fee whatever you want. It could be a gift wrapping service or a fee for extra packaging.

Tip: You could even chargeback Paypal fees if you wanted to by adding a “tax” called “Paypal Fee” and charging back the current Paypal fee rate.

How to Offer Local Pickup Without a Paid App

There is an app in Ecwid’s app market that can enable you to do this for five dollars a month. There is little to no value to spending five dollars or any dollar for such an option unless you only function with local pickup and have a bunch of pickup locations. So here is how to do it, for free.

This tip is best for:
  • Small business offering local pickup
  • Those who have one or few pickup locations

How to: Go to Settings > Shipping > New shipping method > Flat Rate. Do not define any shipping time and name the method Free Local Pickup for example.

You can set a weight limit if needed (you can use a Custom Table to set up weight limits). Make the rate $0. Hit Save.

You could also add a mandatory field where your client needs to specify when they want to come pick their product up. All you have to do is head over to Settings > General > Cart and scroll down to Order Comments. Name the order note Local Pickup Date and Time to allow your clients to specify when they will come pick up their order. You can make this option mandatory (recommended if you only function with local pickup).

Create a Website Using Ecwid

So you are on a super tight budget and you want to save money on purchasing a website, an SSL etc. Then you can use Ecwid’s Starter Site as a website. Create your Ecwid account, head over to Settings > General > Starter Site. Click on Change Starter Site URL to customize the name of your starter site.

Tip: With a Venture plan, you can connect your own domain to your store and therefore make it look more professional. More on how to here.

How to Use Ecwid as a Product Catalogue

If you would like to use Ecwid to show products that you cannot actually purchase, you can follow these steps to set up a product catalogue:

This tip is best for:
  • Those who would like to create an online catalogue.
  • Creating a lookbook.

How to: Head to Shipping > Settings and disable all payment and shipping methods. Then head over to Design and create a new template or add the following code to your current template:

To deactivate mini cart widget:

div.ecwid-minicart {
display:none !important;
}

To hide the “Add to Cart” buttons and the “Qty” fields:

td.ecwid-productBrowser-productsTable-buy,.ecwid .ecwid-btn--addToBag, div.ecwid-productBrowser-details-qtyPanel
display:none;

Now go check out your store! You just created a product catalogue in no time.

Tip: You could also hide the prices on the store home page by adding the following code:

To hide the priced on all category pages:

div.ecwid-productBrowser-price {
display: none !important;
}

To hide the price on the main store page:

.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-price {
display: none !important;
}

Now go check out your store! You just created a product catalogue in no time.

Tip: You could also hide the prices on the store home page by adding the following code:

To hide the priced on all category pages:

div.ecwid-productBrowser-price {display: none !important; }

To hide the price on the main store page:

.ecwid-productBrowser-CategoryPage-0 div.ecwid-productBrowser-price {display: none !important; }

§3 The Best of Ecwid’s Blog

Everything you need to take your store one step further, all in one place. For further reference, check out support.ecwid.com. Follow Ecwid’s blog to receive tips and tricks every month.

How to Use Content to Attract Customers to Your Store

Posted Sep 21, 2015 by Lina Vashurina, Ecwid Team.

"A couple of months ago, we wrote about how to properly photograph your products. We received a lot of feedback, and the most common question was, “How do I remove the background from photos without Photoshop?” Today we will try to answer this question. Indeed, one does not always have the opportunity to take pictures with a good background (white, grey, plain or branded). How to solve the situation if the photos have already been taken, and the results are not satisfactory?

Continue reading

Simple Product Photography Tips to Beautifully Showcase on Your Store

Posted Feb 19, 2015 by Lina Vashurina, Ecwid Team.

As a merchant, your products (and selling your products) are the key to your success. How you visually showcase them online can make all the difference in converting visitors into customers.

Continue reading

How to Optimize Product Images: Step-By-Step Instructions and An Overview of Services

Posted Oct 20, 2015 by Lina Vashurina, Ecwid Team.

Pictures draw the attention of the buyer. In order to keep that attention, you need beautiful pictures that load quickly. Hence, you will need to optimize your images. This article will tell you how.What should the size of the image be? How can you make your online store structured and beautiful? How can you reduce the picture size but keep the details? Let us help you.

Continue reading

Make Facebook Work for Your Small Business

Posted Apr 17, 2015 by Jesse Ness, Ecwid Team.

Whether you employ half the city or you’re just starting out, you can operate your very own Facebook Business page. In short, the biggest reason to set up shop on Facebook is because it’s where your customers are. It’s one thing to draw your customers to your brand, but it’s another to show up where they are already hanging out.

Continue reading

How To Write A Welcome Email That Sells

Posted Mar 29, 2016 by Lina Vashurina, Ecwid Team.

Customers who receive welcome emails are more likely to continue interacting with your brand, shopping at your store, and reading your newsletters. Your customer has already decided to take the leap and sign up with your service, so now is your chance to make a great first impression with a strong welcome email.

Here we’ll discuss examples of welcome emails and give you ideas, tips, and techniques for you to implement today in your own welcome emails to impress your own customers.

Continue reading

How to Price Your Products? A Science Backed Answer

Posted Jul 10, 2015 by Lina Vashurina, Ecwid Team.

Pricing is one of the most important considerations for any business. How much you charge for a product directly affects how much you can sell. Getting the pricing right can result in massive revenue boosts.

In this post, we’ll look at some strategies for pricing your products using proven theories. You’ll learn about pricing science, statistical models, and pricing optimization based on psychological principles.

Continue reading

How to Use Content to Attract Customers to Your Store

Posted Mar 10, 2016 by Kristen Pinkman, Ecwid Team.

Facebook is the world’s largest social network and a leading platform for targeted advertising. However, it may be difficult at first to navigate the Facebook for Business page and its many options for your intended purpose and outreach.

Continue reading

How to Create an Online Store Without a Website

Posted Aug 18, 2015 by Lina Vashurina, Ecwid Team.

According to research from PWC, 45% of people are buying more goods from their favorite brands after looking at them in social networks, especially when they can interact with representatives from the brand. Shop owners are using social networks to talk about products, communicate with existing customers, and attract new customers.

Continue reading

Stay up to date!

Get free ecommerce tips, news and inspiring ideas right to your inbox