Please remember that CSS can be tricky, and you should only create a custom theme if you or someone in your business is familiar with editing CSS by hand. Saving invalid CSS could cause issues with your store and even stop customers from being able to check out.
Below is a list of the different design elements that you can modify by using CSS. You can click the links below to jump to each category:
Remember: You will want to "preview" any CSS styling you add before you Publish it on your website. Some of the CSS codes below may interfere with one another, so ensure that there are no discrepancies before publishing the code.
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.
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;
}
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;
}
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;
}
/*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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
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;
}
.details-product-purchase__controls {
display: none;
}
You can set the default font family and its color for your entire store.
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;
}
С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;
}
The product grid is a layout that contains multiple products and can be found in the following places:
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;
}
When you put a mouse cursor on a product thumbnail, you see the zoom effect. 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;
}
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;
}
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 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 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 “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;
}
When you put a mouse cursor on a category thumbnail, you see the zoom effect. 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;
}
@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;
}
Modify the following selector:
.ec-size .ec-store .grid-category__wrap-inner:hover .grid-category__title-inner {
transform: none;
}
If you do not add any images to your categories, then they will instead display a gradient-color swuare as a placeholder. If you do not want to add your own images, then 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;
}
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;
}
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 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;
}
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;
}
.ec-size:not(.ec-size--xs) .ec-store .details-gallery__thumb .details-gallery__thumb-img {
width: 100vw;
background-size: contain;
}
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:
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;
}
div.pswp__caption__center {
display:none;
}
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;
}
#productDescription img {
display: inline;
}
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 on the specific product page. Change "123456" to your unique internal product ID for the product:
.ec-store__product-page--123456 .product-details__product-price {
display: none;
}
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;
}
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;
}
.ec-size .ec-store .ec-cart-item__count {
display: none;
}
.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;
}
A search widget helps your customers search products in your store. You can change the look of the search box itself.
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 */
}
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*/
}
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 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;
}
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;
}
You will want to 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).
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:
.footer-new .ec-likely:after {
content: '';
background: url('https://example.com/your_image.jpg') no-repeat;
background-size: contain;
height: 100px;
display: block;
}
You will want to replace https://example.com/your_image.jpg with an URL to your image with logos.
/* move footer to the top */
.ec-size .ec-store__content-wrapper { display: flex; flex-direction: column; }
.ec-size .ec-footer {order: 1;}
.ec-size .product-details, .ec-size .ec-grid { order: 2; }
.ec-size .ec-pager { order: 3; }
.ec-size .ec-store .ec-store__content-wrapper .ec-footer { order: 1; }
.ec-size .ec-store .ec-store__content-wrapper .ec-cart { order: 2; }