Use Advanced CSS to Style Your Store

  • Updated
Follow
You can easily customize the look and feel of your Shop by using Cascading Style Sheets (CSS).

 

How to Add Custom CSS

To add custom styles to your store:
  1. Click Design from your Shop App dashboard.
  2. Next, click Create Theme to start your new, unique theme.
  3. On the next page, click Add New CSS Theme and give it a name.
  4. Add the custom CSS necessary, then click Save.
  5. Click Activate in the top right corner to activate the new theme on your site!

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.

 

CSS Codes by Category

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.

 

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; 
}

 

Change 'Add to Bag' Button Color

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 'Buy Now' Button Color

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; 
}

 

Change 'Checkout' Button Color

/*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 'Continue' Button Color 

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 'Place Order' Button Color

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 'Add More' Button Color

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 'Go to Checkout' Button Color

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 'Continue Shopping' Button on Cart Page

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 'Clear Bag' Button Color

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 all '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

 .details-product-purchase__controls {
display: none;
}

 

Fonts

You can set the default font family and its color for your 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 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;
}

 

 

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 { 
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. 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;
}

 

Categories

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 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. 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

@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

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;
}

 

Hide Category Cards on the Main Shop 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 Mobile

.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;
}

 

Remove the Name Below the Detailed Image in a Gallery

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;
}
#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 .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:

.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;
}

 

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 From Cart Page

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

 

Expand the Discount Coupon Field

.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; 
}

 

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*/
}

 

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 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;
}

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).

 

Show Credit Card Logos in the 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:

.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 Menu to the Top Bar of the Storefront

/* 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; }

Comments

0 comments

Article is closed for comments.