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:
- Introduction to CSS is a video tutorial from the Ecwid team.
- CSS Beginner Tutorial gives you just enough to get started.
- CSS Examples guides you through the basic features of the language with practical examples that you can try along the way.
CSS recipe collection (index)
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
- Change the color of all Large buttons at once
- Change the color of Add to bag button
- Change the color of Buy Now button
- Change the color of Checkout button
- Change the color of Continue button
- Change the color of Place Order button
- Change the color of Smaller buttons
- Change the color of Add More button
- Change the color of Go to Checkout button
- Change the color of Continue Shopping on cart page button
- Place the Buy Now buttons on the same level
- Hide the Add to cart button on all product pages
Fonts
Product grid (Store front page)
- Change the price font color and size in the product grid
- Disable zoom effect for product thumbnails
- Place “Track orders”, “Favorites”, “Shopping bag”, “My Account” icons on the top of a storefront page
- Hiding product images
Category page
- Center products in categories
- Change the price color on a specific category page
- Disable zoom effect for the category thumbnails
- Display the same number of categories per row
- Disable hover effect for category titles
- Hide category thumbnail images and titles
- Hide category images
- Hide category cards in the store front page
Product details
- Change font color and size
- Change the color of "On sale" tag
- Display the gallery images full size on mobiles
- Remove the name below the detailed image in a gallery
- Open “Show More” section on product pages
- Show “Related Products” on the top of a page
- Hide the price for specific products
- Hiding prices from customers who are not logged in
Cart
- Change the "Remove product" button style
- Remove the quantity field
- Expand the discount coupon field
- Show empty shopping bag on Instant Site (original version)
Search box
- Change search widget design
- Change the Search button styles
- Move the search box
- Change Search box on Instant Site (original version)
Checkout
- Removing the delivery time from the names of shipping methods
- Changing credit card logos under payment options at checkout
- Showing credit card logos in the store footer
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.
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 (button color, snow white) and “#000000” (text color, black) with the color codes you want to appear in your store.
.ec-size .ec-store .grid-product__buy-now .form-control__button {
background: #FFFAFA;
color: #000000;
}If you have added a Buy Button to your website or blog, its layout may also have a Buy Now button. To change the color of this button, you can use the following code (replace the color codes with those that you need):
.ecsp .ecwid-btn--primary,
.ecwid .ecwid-btn--primary {background-color:#2A54D8;}
.ecsp .ecwid-btn--primary:hover,
.ecwid .ecwid-btn--primary:hover {background-color:#2A54D8;}
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*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
background-color: #FFFFFF;
}
/*Button color on hover*/
.ec-size .ec-store .ec-form__row--continue .form-control__button:hover {
background: #FFFFFF;
}
/*Text color*/
.ec-size .ec-store .ec-form__row--continue .form-control__button {
color: #000000
}
/*Text color on hover*/
.ec-size .ec-store .ec-form__row--continue .form-control__button: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*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
background-color: #FFFFFF;
}
/*Button color on hover*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button:hover {
background: #FFFFFF;
}
/*Text color*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button {
color: #000000
}
/*Text color on hover*/
.ec-size .ec-store .ec-cart-step--payment .form-control__button: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, and Continue Shopping on cart page. Here are the codes for changing such buttons. Replace #FFFFFF (white) and “#000000” (black) with the color codes you want to appear in your store.
To change the colors of the Add More and Go to Checkout buttons:
/*Button color*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
background-color: #FFFFFF;
}
/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
background-color: #FFFFFF;
}
/*Text color*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button {
color: #000000;
}
/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__controls .form-control__button:hover {
color: #000000;
}
To change the color of the Continue shopping button:
/*Button color*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Button color on hover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Text color*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Text color on hover*/
.ec-size .ec-store .ec-confirmation__continue .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 .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
background-color: #FFA500;
}
/*Button color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button:hover {
background: #FFA500;
}
/*Text color*/
.ec-size .ec-store .details-product-purchase__add-buttons .form-control--secondary .form-control__button {
color: #000000;
}
/*Text color on hover*/
.ec-size .ec-store .details-product-purchase__add-buttons .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*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
background-color: #FFFFFF;
}
/*Button color on hover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
background-color: #FFFFFF;
}
/*Text color*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button {
color: #000000;
}
/*Text color on hover*/
.ec-size .ec-store .ec-confirmation__continue .form-control__button:hover {
color: #000000;
}
Place the Buy Now buttons on the same level
When your product titles have different lengths, the Buy Now buttons might be not aligned on the storefront page. To align the Buy buttons in a grid view:
.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;
}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, .ecwid h1 {
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, .ecwid h1 {
color: #262626 !important;
}
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.
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-value.ec-price-item {
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”, “My Account” icons on the top of a storefront page
Bottom navigation menu buttons “Track orders”, “Favorites”, “Shopping bag”, “My Account” 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,
.ec-size .ec-store__category-page .ec-store__content-wrapper > div {
display: flex;
flex-direction: column;
}
.ec-size .ec-store__category-page .ec-footer {
order: -1;
}
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 {
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) 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 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 certain number of categories per row
You can specify how much the categories will take up of the total page width. For example, if you set the width for categories as 20% from 100% of the page space, you'll get 5 categories in a row, or if you set the width as 25% - it will result in 4 categories per row, and so on.
Display the certain number of categories per row:
.ec-size .ec-store .grid__categories .grid-category:nth-child(n+1) {
width: 20% !important;
}
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:
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 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.
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*/
.ec-size .ec-store .product-details .product-details__product-title {
color: #FFA500;
}Price font color and size:
/*Product price in the product page*/
.ec-size .ec-store .ec-price-item {
color: #FFA500;
}
.ec-size .ec-store .ec-price-item {
font-size: 20px;
}SKU color:
/*Product SKU in the product page*/
.ec-size .ec-store .product-details__product-sku {
color: #FFA500;
}
Quantity color:
/*Quantity label in the product page*/
.ec-size .ec-store .details-product-purchase__place {
color: #FFA500;
} Price per unit font color and size:
/*Price per unit fields in the product page*/
.ec-size .ec-store .product-details__price-per-unit-block {
font-size: 20px;
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 {
color: RED;
}Display the gallery images full size on mobiles
Add the following selector and property:
.ec-size:not(.ec-size--s) .ec-store .product-details .product-details__gallery {
width: 100vw;
margin-left: calc(env(safe-area-inset-left) - var(--global-tile-padding) * 1px);
}
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--s .ec-store .product-details__product-description::after {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed~.product-details-module__btn-more {
display: none;
}
.ec-size.ec-size--s .ec-store .product-details-module__content--collapsed::after {
content: none;
}
#productDescription img {
display: inline;
}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 .ec-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're based in a country where a Price incl. tax note is displayed next to the product price, you will also need to add the following CSS code to hide this text from storefront:
body.ecwid-customer-loggedOut .product-details__product-price-taxes { display: none; }
Cart
Change the "Remove product" button style
Your customers can remove a product from a shopping cart using the Remove (X) icon. It is shown right to the product in the shopping cart.
You can adjust the height and width of the sign, the thickness of its lines, the rounding of its corners as well as change the color of the sign to make it more noticeable.
Here’s the code you need to add to your store:
.ec-size .ec-store .ec-cart-item__control-inner svg {
opacity: 1.5;
color: red;
width: 30px;
height: 30px;
border-radius: 10px;
}
.ec-size .ec-store .ec-cart-item__control-inner svg g {
stroke-width: 2px;
}
In the “color” line, type any color you want your sign to be.
The more the width and height are, the bigger the sign will be.
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__wrap { visibility: visible }
.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 (original version)
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:
.float-icons__icon--cart.off:not(.off2) {
opacity: 1;
height: 48px;
padding-top: 12px;
transform: translateX(-8px);
pointer-events: auto;
}
@media (min-width: 414px) {
.float-icons__icon--cart.off:not(.off2) {
height: 68px;
padding-top: 16px;
transform: translateX(-16px);
}
}
@media (min-width: 768px) {
.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 or move it.
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*/
}Move the search box
Depending on the desired position of the search widget, enter the corresponding values for margin-left and margin-top to move it.
/* to move the search widget*/
.ecwid-search-widget {
max-width: 170px; /* change width as needed*/
position:relative;
margin-left: 400px; /* change left margin as needed*/
margin-top: 10px; /* change top margin as needed*/
}Change Search box on Instant Site (original version)
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 "USPS 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).
Showing credit card logos in the store footer
In case you need to show what cards you accept in your store (for example, to get Google approve your account for Google Shopping), you can add card logos to the footer using the following CSS code:
where you should replace https://example.com/your_image.jpg with an URL to your image with logos.