Customizing specific pages with CSS

You can change the design of individual pages in your Ecwid store, be it a certain product details page, a checkout step page, or a customer account page. Using CSS classes, it’s possible to construct CSS rules that apply only to specific pages in your Ecwid storefront.

Based on page

Product details page

A typical product details page has a product name, an image and a right panel, which consists of product price, SKU, Add To Bag button, etc:

Apply design to all product details pages

If you wish to apply styles to all product details pages of your Ecwid store, then you need to use the following class in your CSS:

.ec-store__product-page

Apply design to some product details pages

If you want to hide prices on the specific product details page, you will need to use the following code in your CSS Theme:

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

Where the "123456" is the unique internal product ID for the product. How to get Product ID?

If you want to apply styles to several product details pages, but not all of them, you can use the following code:

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

Where the "123456", "121221", "123234" are the unique internal product IDs for the product. As a result, you will hide SKUs on three product details pages.

Apply design to all product details pages in one category

To apply in bulk style changes to product details pages of all products belonging to a certain category, you can use this CSS class:

.ec-store__product-page--c12345

where you should put the necessary category ID instead of 12345.

For instance, you wish to temporarily hide Add to Bag buttons on product details pages of products assigned to the category with ID 12345. Here is an example of CSS code that you can use to achieve it:

.ec-store__product-page--c12345 .details-product-purchase__controls {
display: none;
}

Category page

A typical category page displays all products in that category in grid view:

The CSS changes for category pages work in a similar way to the product details pages.

Apply design to all category pages

If you wish to apply styles to all category details pages of your Ecwid store, then you need to use the following class in your CSS:

.ec-store__category-page

For example, if you want to change the color of your price on category pages to dark blue, then you will need to use this code in your CSS Theme:

 .ec-store__category-page .grid-product .grid-product__price-amount {
color: darkblue;
}

Apply design to some category pages

If you want to change the color of your price on a specific category page, you will need to use the following code in your CSS Theme:

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

Where the "4002" is the unique internal category ID for the category. How to get the Category ID? If you want to apply styles to several category pages, but not all of them, you can use the following code:

.ec-store__category-page--4002 .grid-product .grid-product__price-amount,
.ec-store__category-page--4006 .grid-product .grid-product__price-amount,
.ec-store__category-page--4008 .grid-product .grid-product__price-amount {
color: darkblue;
}

Where the "4002", "4006", "4008" are the unique internal IDs for the category. As a result, you will change the price color to darkblue on three category pages.

Other pages

You can apply custom design to other pages as well:

• cart & checkout pages
• account settings pages

Cart & Checkout pages

To apply design to cart and checkout page, use the following CSS classes:

.ec-size .ec-store .ec-cart

Thank you for your order page

To apply design to Thank You page only, use the following CSS classes:

.ec-size .ec-store .ec-confirmation

Customer profile pages

To apply design to the customer's profile pages (available for your customers after they sign in to your shop), use the following CSS classes:

Account settings page:

.ecwid-productBrowser-AccountSettingsPage 

Orders page

.ecwid-productBrowser-OrdersPage 

Based on customer

In some cases, you may want to hide prices or SKUs for customers that haven’t created an account in your store yet, or maybe highlight some of your items for customers that belong to a specific customer group. Fortunately, this is totally possible to achieve using CSS. Let us show you how:

Not logged in or doesn’t have account

When a customer visits your store for the first time, he doesn’t have an account in your store and he is searching for a product he needs. You may want to apply custom design for this type of customers. In order to do that, you will need to use the following class in your CSS Theme:

body.ecwid-customer-loggedOut

For example, if you want to turn your Ecwid store to an online catalog for the customers, that visit your store for the 1st time or haven’t logged in to their account in your store yet, you can easily do that by adding the following code to your CSS Theme:

/* Hide prices and add to bag buttons for logged out customers */
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .grid-product__button,
body.ecwid-customer-loggedOut .product-details__product-price,
body.ecwid-customer-loggedOut .details-product-purchase__controls {
	display: none;
}

Logged in

You may want to apply custom design for customers who logged into their account in your store and are browsing your online catalog. In order to do that, you will need to use the following class in your CSS Theme:

body.ecwid-customer-loggedIn

Let’s say you want to display the prices for this type of customers in green, in this case, you will need to apply this code to your CSS Theme:

body.ecwid-customer-loggedIn div.grid-product__price .grid-product__price-amount {
 color: green;
}

You can also block access to your storefront unless a visitor signs into their account. Learn more

Belongs to customer group

When a customer registers in your Ecwid store, he is assigned to a default customer group General with ID ‘0’. If you wish to apply custom design to all customers who are assigned to that customer group, then you will need to use the following class:

body.ecwid-customer-group-0

However, if you have multiple customer groups in your store and you have a large client base with discounts assigned to a specific customer group, you may want to highlight the advantages of their membership in your store using custom design for this type of customers using the following code:

body.ecwid-customer-group-12345

Where the "12345" is the unique customer group ID. You can get it by logging into the account that belongs to that customer group and viewing any page in the "Inspect element" tool in your browser. To change the price color to green on category pages for all customers in a specific customer group, use the following code:

body.ecwid-customer-group-12345 div.grid-product__price .grid-product__price-amount {
color: green;
}

We’ve just shown you a tiny glimpse of what you can achieve with custom CSS Themes and various page and customer types, so now go ahead and try it for yourself!