Ecwid CSS Cookbook

You can easily customize the look and feel of your Ecwid store using Cascading Style Sheets (CSS). This cookbook has CSS recipes collection designed to help you make the Ecwid store look the way you want. The cookbook isn't exhaustive. By modifying the HTML templates and CSS stylesheet, the number of things you can do is limited only by your imagination.

If you're new to CSS, check out the following tutorials to get you up to speed:

Consider hiring the Ecwid custom development team if you aren’t comfortable editing the codes.

Table of contents

This cookbook is organized into sections covering elements of the Ecwid storefront. Each section includes CSS codes that you can paste directly into your store. Use the code as-is or edit it to make it your own.

Learn how to add CSS codes to your Ecwid store

Buttons

Fonts

Product grid (Store front page)

Category page

Product details

Cart

Search box

Checkout

Buttons

There are many large and small buttons in your store like “Add to bag” or “Continue” buttons. You can change them all at once or individually.

Change the color of all Large buttons at once

The large buttons in your store include Add to Bag, Continue Shopping on the product page, Continue, Checkout, Place Order. Use the following CSS code to update all the larger buttons at once. Modify "#F0F8FF" and “black” in the example to any color you like:

/*Button color*/
.ec-size .ec-store .form-control--primary .form-control__button 
{ background-color: red;}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
background: #F0F8FF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary .form-control__button {
color: black;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary .form-control__button:hover {
color: black;
}
Here you can view different color and shade combinations and pick any color and its hex number: CSS Colors.
If your Ecwid store is added to a Wix website, set the fonts in the Ecwid app settings.

Change the color of Add to bag button

Replace #FFA500 (orange) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control__button:hover {
color: #000000;
}

Change the color of Buy Now button

Buy Now buttons are displayed on category pages. Replace #FFFAFA (snow white) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.ec-size .ec-store .form-control--small .form-control__button {
background: #FFFAFA;
}

/*Text color*/
.ec-size .ec-store .form-control--small .form-control__button {
color: #000000;
}

Change the color of Checkout button

Replace #FFFFFF (white) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button  {
background-color: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
background-color: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--primary.ec-cart__button--checkout .form-control__button:hover {
color: #000000;
}

Change the color of Continue button

Replace #FFFFFF (white) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--continue {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--continue {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--continue:hover {
color: #000000;
}

Change the color of Place Order button

Replace #FFFFFF (white) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
background: #FFFFFF;
}

/*Button color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
background: #FFFFFF;
}

/*Text color*/
button.ecwid-btn--primary.ecwid-btn--placeOrder {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn--primary.ecwid-btn--placeOrder:hover {
color: #000000;
}

Change the color of all Smaller buttons at once

You can also change the smaller buttons like Add More, Go to Checkout, Continue Shopping on cart page, Clear Bag. Here are the codes for changing all these buttons at a time. Replace #FFFFFF (white) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFFFFF;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFFFFF;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}

Change the color of Add More button

Replace #FFA500 (orange) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.ec-size .ec-store .form-control--secondary .form-control__button {
color: #000000;
}

/*Text color on hover*/
.ec-size .ec-store .form-control--secondary .form-control__button:hover {
color: #000000;
}

Change the color of Go to Checkout button

Replace #FFA500 (orange) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
background: #FFA500;
}

/*Button color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
background: #FFA500;
}

/*Text color*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button {
color: #000000;
}

/*Text color on hover*/
.form-control--primary.form-control--flexible.details-product-purchase__checkout .form-control__button:hover {
color: #000000;
}

Change the color of Continue Shopping on cart page button

Replace #FFA500 (orange) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--continueShopping:hover {
color: #000000;
}

Change the color of Clear Bag button

Replace #FFA500 (orange) and “#000000” (black) with the color codes you want to appear in your store.

/*Button color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
background: #FFA500;
}

/*Button color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
background: #FFA500;
}

/*Text color*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag {
color: #000000;
}

/*Text color on hover*/
button.ecwid-btn.ecwid-btn--secondary.ecwid-btn--clearBag:hover {
color: #000000;
}

Place the Buy Now buttons on the same level

When your product titles have different lengths, Buy Now buttons might me not aligned on the storefront page. To align the Buy buttons in a grid view:

Buy Now buttons.png

.grid-product__wrap {
  display: flex;
}
.grid-product__price {
    flex: 1 0 auto;
    align-items: flex-end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
}

Hide the Add to cart button on all product pages

Hide the Add to Bag button on all product pages using the CSS code below:

.details-product-purchase__controls {
display: none;
}
Note that when you hide the Buy Now and Add to Cart buttons, your customers can’t buy your products. Learn more about Using Ecwid as an online catalog

Fonts

You can set the default font family and its color for the entire store.

Change all fonts

Change the font family for the whole store. Please, replace the NAME_OF_FONT with an actual font name:

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
font-family: NAME_OF_FONT !important;
}

Change the font color

Сhange the color of all the fonts at once. Modify "#262626" (very dark gray) in the example to any color you like:

.ecwid div, .ecwid span, .ecwid a, .ecwid p {
color: #262626 !important;
}
Here you can view different color and shade combinations and pick any color and its hex number: CSS Colors.
If your Ecwid store is added to a Wix website, set the fonts in the Ecwid app settings.

Product grid (Store Front page)

The product grid is a layout that contains multiple products and can be found in the following places:

  • The category pages.
  • The Featured Products collection section on the home page.
  • The related products grid below the main product on a Product page.

Add “Sort by” option

Add the “Sort By” option on your storefront page and category pages to allow your store visitors to sort the products in the storefront page:

Sort By.gif

.ec-size .ec-store.ec-store__category-page--0 .grid__sort {
    display: block;
}

Change the price font color and size in the product grid

Change the price font color or size in product grid. Change "blue" and "20px" to any color and font size you wish.

/*Product titles on catalog page*/
/*Change font color*/
.ec-size .ec-store .grid-product__title-inner {
color: blue;
}

/*Product price on catalog page*/
/*Change font color*/
.ec-size .ec-store .grid-product__price-amount {
color: blue;
}

/*Change font size*/
.ec-size .ec-store .grid-product__price { 
font-size: 20px !important; 
}

Disable zoom effect for product thumbnails

When you put a mouse cursor on a product thumbnail, you see the zoom effect. This feature is enabled for all Ecwid stores by default. If you want to disable it for your online store, you can use the CSS codes below:

.ec-size .ec-store .grid-product__wrap-inner:hover .grid-product__picture {
    transform: none;
}

Place “Track orders”, “Favorites”, “Shopping bag”, “Sign In” icons on the top of a storefront page

Footer menu buttons “Track orders”, “Favorites”, “Shopping bag”, “Sign In” are located at the bottom of the storefront page by default. To move them to the top of the page:

.ec-size .ec-store__category-page .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-grid {
order: 2;
}
.ec-size .ec-store__category-page .ec-pager {
order: 3;
}
.ec-size .ec-store__category-page .ec-footer {
order: 1;
}

Hiding product images

To hide product images in product grid:

.ec-size .ec-store .grid-product__image {
  display: none;
}

Category

Stores with diverse product lines use categories to organize products and help buyers find what they are looking for. You can apply style changes to one category and/or to all categories at ones.

To apply style changes to all category details pages of your Ecwid store use .ec-store__category-page CSS class.

If you don’t have any categories yet, all your products belong to a default “Store Front page” category. To apply style changes to all products belonging to a Store front page category use ec-store__category-page--0 CSS class.

Center products in categories

Center products on category pages (works best if you have a few products in a category):

.ec-size .ec-store .grid__products {
    @for $i from 2 through 10 {
        $k: $i - 1;
        @for $j from 1 through $k {
            &[data-cols="#{$i}"][data-items="#{$j}"] {
                justify-content: center;
            }
        }
    }
}

Change the price color on a specific category page

Change the price color on a specific category page. Change “4002” to your unique category ID. Replace #FFA500 (orange) and with the color code you want to appear in your store.

.ec-store__category-page--4002 .grid-product .grid-product__price-amount {
color: #FFA500;
}

Disable zoom effect for the category and product thumbnails

When you put a mouse cursor on a category thumbnail, you see the zoom effect. This feature is enabled for all Ecwid stores by default. If you want to disable it for your online store, you can use the CSS codes below:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__bg-image {
    transform: none;
}

Display the same number of categories per row

Display the same number of categories per row:

@mixin grid-category-settings($count-per-row-list, $max-count-per-row: false) {
    $i: 1;
    @each $count-per-row in $count-per-row-list {
        &:nth-child(n+#{$i}) {
            width: 100% / $count-per-row;
            @if ($max-count-per-row) {
                $scale: $max-count-per-row / $count-per-row;
                $w: min(100%, 100% / $scale * 1.2);
                .grid-category__spacer {
                    $d: 16px * ($scale - 1) / $scale;
                    width: calc(#{$w} - #{$d});
                }
                .grid-category__image-spacer {
                    $d: 16px * ($scale - 1) / $scale;
                    width: calc(#{$w} - #{$d});
                }
            }
        }
        $i: $i + $count-per-row;
    }
}
.ec-size .ec-store .ec-grid .grid__categories {
    &[data-cols="1"] {
        .grid-category {
            @include grid-category-settings(2, 2);
        }
    }
    @for $i from 2 through 10 {
        &[data-cols="#{$i}"] .grid-category {
            @include grid-category-settings($i, $i);
        }
    }
    &.grid__categories--large-items {
        &[data-cols="1"] {
            justify-content: center;
            .grid-category {
                max-width: 480px;
                @include grid-category-settings(1, 1);
            }
        }
    }
}
.ec-size .ec-store .ec-grid .grid__categories {
    justify-content: left;
}

Disable hover effect for category titles

Modify the following selector:

.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
    transform: none;
}

Hide category thumbnail images and titles

For categories with no images, Ecwid shows a gradient as a placeholder image in the storefront:

Screenshot_2019-12-29_at_17.35.03.png

You can add your own images. Or you can hide category cards images and titles completely (for example, if you use the horizontal menu as your store navigation):

.ec-size .ec-store .grid__categories {
display: none;
}

Hide category images

To display only category names without images across the store:

.ec-size .ec-store .grid__categories--appearance-below .grid-category__image {
display: none;
}

.ec-size .ec-store .grid-category__image,
.ec-size .ec-store .grid-category__spacer {
display: none;
}

Make sure that the "Display category name below the image" option is selected in the Category name position section in the preset appearance options of your store.

Hide category cards in the store front page

If you want to have a more compact view for your first store page (for example, to display only horizontal menu and featured products there), you can hide the category cards from the store front page. At the same time, you can keep category cards in your category pages so that customers can see subcategories there, if any.

.ec-size .ec-store.ec-store__category-page--0 .ec-grid .grid__categories {
display: none;
}

Product details

The product page displays a product image, name, price, description, etc. You can change the look and feel of the content, as well as hide some components.

To apply style changes to all products belonging to a one certain category use .ec-store__product-page--c12345 CSS class. Change “12345” to your unique category ID.

Change font color and size

Change font color and size on the product page. Сhange #FFA500 (orange) and "20px" to any color and font size you wish.

Titles color:

/*Product titles in the product page*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details .product-details__product-title {
    color: #FFA500;
}

Price font color and size:

/*Product price in the product page*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-price-item {
    color: #FFA500;
}
html#ecwid_html body#ecwid_body .ec-size .ec-store .ec-price-item {
    font-size: 20px; 
}

SKU color:

/*Product SKU in the product page*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .product-details__product-sku {
    color: #FFA500;
}

Quantity color:

/*Quantity label in the product page*/
html#ecwid_html body#ecwid_body .ec-size .ec-store .details-product-purchase__place {
    color: #FFA500;
} 

Change the color of "On sale" tag

Modify the color of the ON SALE tag. Change RED in the background-color and border-color to the color you want:

/* change on sale label color */

.ec-size .ec-store .label--notice { 
   background-color: RED; 
}
.ec-size .ec-store .label--notice::after,
.ec-size .ec-store .label--notice::before {
border-color: RED; 
border-right-color: transparent;
}

Display the gallery images full size on mobiles

Add the following selector and property:

.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
    width: 100vw;
    background-size: contain;
}

Remove product SKUs

Product SKU (stock keeping unit) is an identification code for a product and it helps track the item for inventory. Product SKUs are displayed in Ecwid in the following places:

  • product details page
  • Place Order page
  • Thank you for your order page
  • invoice page

If you want, you can hide the SKU on these pages.

Product details page:

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

Place order page:

table.ecwid-Invoice-itemsTable .ecwid-productBrowser-sku {
display: none;
}

Thank you for your order page:

div.ecwid-Invoice span.ecwid-Invoice-productDescr-sku {
display: none;
}
To learn how to edit the Invoice template read Editing the invoice template

Remove the name below the detailed image in a gallery

Remove the text under the detailed image:

div.pswp__caption__center { 
display:none;
} 

Open “Show More” section on product pages

The Show More option allows to keep a compact view of product page if a product has a long descriptions. Use this code to show a full detailed description of the product:

.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed {
max-height: none;
}
.ec-size.ec-size--xl .ec-store .product-details__product-description::after {
display: none;
}
.ec-size--s.ec-size.ec-size--xl .ec-store .product-details-module__content--collapsed ~ .product-details-module__btn-more {
display: none;
}

Show “Related Products” on the top of a page

The Related Products are shown on the bottom of the product pages by default. To move them to the top of the product pages:

.ec-size .ec-store__content-wrapper {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__content-wrapper .product-details {
order: 2;
}
.ec-size .ec-store__content-wrapper .ec-footer {
order: 3;
}
.ec-store__content-wrapper .related_products {
order: 1;
}

Hide the price for specific products

Hide the price on the specific product page. Change "123456" to your unique internal product ID for the product: (How to get Product ID?)

.ec-store__product-page--123456 .product-details__product-price {
    display: none;
}

Hiding prices from customers who are not logged in

You can hide prices from visitors who are not logged in. Your catalog will be available to all visitors, but only registered customers will see prices and shop. This is particularly helpful if you want to keep wholesale pricing private.

Below is a CSS code for hiding prices and Add to Bag and Buy Now buttons. In this case, only registered customers will be able to place orders. Not logged in customers will be able only to view your catalog.


/*Hide price in the catalog page*/
body.ecwid-customer-loggedOut .grid-product__price { 
     display: none; 
} 

/*Hide Buy Now buttons in the catalog page*/
body.ecwid-customer-loggedOut .grid-product__button.grid-product__buy-now {
    display: none;
}

/*Hide price in the product details page*/
body.ecwid-customer-loggedOut .details-product-price__value,
body.ecwid-customer-loggedOut .details-product-price-compare__container {
    display: none;
} 

/*Hide Add to Bag in the product details page*/ 
body.ecwid-customer-loggedOut .details-product-purchase__add-buttons {
    display: none;
} 
If you want only registered customers to view your storefront, use the Required Login for Storefront Access app.

Cart

Change the "Remove product" button style

Your customers can remove a product from a shopping bag using the Close (х) icon. It appears when you hover over the product on the Shopping Bag page.

You can adjust the height and/or width to make it a little more noticeable. You can also change the image to make the icon look as you need:

div.ec-cart-item__control a.ec-cart-item__control-inner { 
   display: block; 
   background:transparent url(LINK_TO_YOUR_CUSTOM_IMAGE) no-repeat scroll center center; 
   height:40px; 
   width:40px; 
} 

Remove the quantity field

To hide Qty from the cart page:

.ec-size .ec-store .ec-cart-item__count {
display: none;
}

Expand the discount coupon field

You can expand the discount coupon (and gift card) box in the cart:

.ec-size .ec-store .ec-cart-coupon:not(.ec-cart-coupon--applied) .ec-cart-coupon__button--apply { 
display: block; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__wrap { 
display: flex; 
align-items: center; 
height: auto; 
}

.ec-size .ec-store .ec-cart-coupon .ec-cart-coupon__text { 
display: none; 
}

Show empty shopping bag on Instant Site

By default, the shopping bag icon on Instant Site displays if the cart contains a product. If you wish you can show the cart icon even if the cart is empty:


.starter-site .float-icons__icon--cart.off:not(.off2) {
    opacity: 1;
    height: 48px;
    padding-top: 12px;
    transform: translateX(-8px);
    pointer-events: auto;
}

@media (min-width: 414px) {
    .starter-site .float-icons__icon--cart.off:not(.off2) {
        height: 68px;
        padding-top: 16px;
        transform: translateX(-16px);
    }
}

@media (min-width: 768px) {
    .starter-site .float-icons__icon--cart.off:not(.off2) {
        padding-top: 24px;
        transform: translateX(-24px);
    }
}

Search box

A search widget helps your customers search products in your store. You can change the look of the search box itself.

Change search widget design

Add or modify the following selector and properties. Change size and replace color codes like #000000 with the color code you want to appear.

/*  Input box styles */
input.ecwid-search-widget__input[type="text"] {
 width: 100px; /* change width as needed*/
 height: 20px; /* change height as needed*/
 border: solid 1px red; /* change border color */
 background-color: #000000; /* change background colour */
 font-size: 12px; /* change font size in search field */
 color: #000000; /* change font color in search field */
}

Change the Search button styles

Add or modify the following selector and properties. Replace the image/button_search.png with the real absolute path to the background image. For example: "http://www.example.com/images/button_bg.png"

/* "Search" button styles */
button.ecwid-search-widget__btn {
 width: 20px; /* change width as needed*/
 height: 10px; /* change height as needed*/
 border: solid 1px #ffffff; /*change border color */  
 background: transparent url(image/button_search.png) no-repeat bottom center !important; /*add background image*/
}

Change Search box on Instant Site

Replace #F3F6F9 with the color code you want to appear.

.ec-minicart.ec-minicart--pill .ec-minicart.ec-minicart--rect { 
border: 1px solid #e6e6e6; 
}
.search-panel .text-field { 
background-color: #F3F6F9; 
border: 2px solid #DC230A; 
}

Checkout

Remove the delivery time from the names of shipping methods

Some shipping carriers (like USPS, FedEx, etc) append delivery time to the names of the shipping methods. If you're using an online shipping carrier in your Ecwid store, you can see that shipping methods are displayed like this "U.S.P.S. Priority Mail (1-3 days)" on checkout. It is possible to hide this delivery time via CSS:

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

Changing credit card logos under payment options at checkout

Logos under payment options help customers see straight away what options they can use to make a payment. You can use a CSS code to show different logos, for example to show more explicitly what credit or debit cards customers can use. 

Use this CSS code: 


/* Hide current logos of the payment method */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
div.ec-cart-accept__icons {
    display: none;
} 

 /* Add custom logo for the payment method */
.ec-size .ec-store .ec-cart-step--payment .ec-radiogroup__item:nth-child(X) 
.ec-radiogroup__info:after { content: ''; background: url('https://example.com/your_image.jpg') no-repeat; background-size: contain; height: 40px; width: 60px; /* The width should be adjusted depending on your logo */ display: block; }

where you should replace https://example.com/your_image.jpg with an URL to your logo and X in :nth-child(X) with the number of the payment method on checkout. For example, if 3 payment methods display at checkout and you want to show new logos under the second method, you should put "2" in the code, like this: :nth-child(2).

You can use the following credit card logos: 

Was this article helpful?

Awesome! Thanks for your feedback!

Sorry about that! We are here to assist you by email or chat.

Contact support