Changing design in certain pages only

Last updated

You can modify the layout separate pages in your Ecwid store. You may want to have a specific design for some of your products or categories.

If you need a unique custom design for your store or need multiple style changes, we can help. Please fill in this form: Custom design for Ecwid store. We will be glad to help you with designing your Ecwid store.

Introduction 

Ecwid supports dynamic classes for each page in the storefront. Be it a category page, a product details page, a checkout step page or a page of the customer account, there are page-specific classes added to the topmost<div> element of the product browser widget. With these classes, it is possible to construct CSS rules that apply only to a specific page or pages in Ecwid storefront.

To find out an exact class of the product browser's enclosing <div>, you would need to use the developer tools available in your browser:
WebInspector for Chrome/Safari and other WebKit browsers, Firebug for Firefox, Dragonfly for Opera, Developer Tools for IE.

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’s 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:
 

.ecwid-productBrowser-ProductPage

Apply design to some product details pages

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


.ecwid-productBrowser-ProductPage-123456 .ecwid-productBrowser-sku {
    display: none;
}


Where the ‘123456’ - 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:
 

.ecwid-productBrowser-ProductPage-123456 .ecwid-productBrowser-sku,
.ecwid-productBrowser-ProductPage-121221 .ecwid-productBrowser-sku,
.ecwid-productBrowser-ProductPage-123234 .ecwid-productBrowser-sku {
    display: none;
}


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

Category page

A typical category page displays all products in that category in Grid, List, and Table views:



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:


.ecwid-productBrowser-CategoryPage


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


.ecwid-productBrowser-CategoryPage .grid-product__price {
    color: green;
}

.ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value { 
color: green; 
}

Apply design to some category pages

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


.ecwid-productBrowser-CategoryPage-4002 .grid-product__price { 
color: green; 
}

.ecwid-productBrowser-CategoryPage-4002 .ecwid-productBrowser-price-value { 
color: green; 
}


Where the ‘4002’ - unique internal category ID for the category. How to get the Category ID?

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


.ecwid-productBrowser-CategoryPage-4002 .grid-product__price, 
.ecwid-productBrowser-CategoryPage-4006 .grid-product__price, 
.ecwid-productBrowser-CategoryPage-4008 .grid-product__price { 
color: green; 
} 

.ecwid-productBrowser-CategoryPage-4002 .ecwid-productBrowser-price-value, 
.ecwid-productBrowser-CategoryPage-4006 .ecwid-productBrowser-price-value, 
.ecwid-productBrowser-CategoryPage-4008 .ecwid-productBrowser-price-value { 
color: green; 
}


Where the ‘4002’, ‘4006’, ‘4008’  - unique internal category IDs for the category. 
As a result, you will change the price color to green on three category pages.

Other pages

You can apply custom design to other pages as well:

  • cart page
  • checkout pages
  • account settings pages

Cart page

To apply design to cart page only, use the following CSS class:

.ecwid-productBrowser-cart

Checkout pages

To apply design to checkout pages, use the following CSS classes:

Shipping address step:

.ecwid-productBrowser-CheckoutShippingAddressPage


Payment details step:

.ecwid-productBrowser-CheckoutPaymentDetailsPage


Place order:

.ecwid-Checkout 


‘Thank you for your order’ page

div.ecwid-Invoice 

Customer profile pages

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

Account settings page:

.ecwid-productBrowser-AccountSettingsPage 


Orders page

.ecwid-productBrowser-OrdersPage 


Address book page

.ecwid-productBrowser-AddressBookPage

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 at 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 .ecwid-productBrowser-productsTable-buy,
body.ecwid-customer-loggedOut .ecwid .ecwid-btn--addToBag,
body.ecwid-customer-loggedOut .ecwid-productBrowser-details-qtyPanel,
body.ecwid-customer-loggedOut .grid-product__price,
body.ecwid-customer-loggedOut .ecwid-BuyNow {
    display: none;
}

Also, you can hide SKU in your Ecwid store for users, who hasn't registered an account in your store yet:

/* Show SKU for registered users only */
body.ecwid-customer-loggedOut div.ecwid-productBrowser-sku, 
body.ecwid-customer-loggedOut td.ecwid-productBrowser-productsTable-sku,
body.ecwid-customer-loggedOut span.ecwid-Invoice-productDescr-sku,
body.ecwid-customer-loggedOut div.ecwid-OrdersList-OrderBox-sku {
    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 .ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value {
    color: green;
}

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’ - unique customer group ID. You can get it by logging into the account that belongs to that customer group and viewing any page in ‘Inspect element’ tool in your browser.

To change price color to green on category pages for all customers in a specific customer group, use the following code:

body.ecwid-customer-group-1794001 .ecwid-productBrowser-CategoryPage .ecwid-productBrowser-price-value {
    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! If you have any difficulties applying the code - check out our guide on how to change Ecwid design or contact us here.

Was this article helpful?
11 out of 17 found this helpful
Questions?
Get help
  • Forums

    Join the Ecwid community. Discuss support topics and store ideas with other Ecwid users.

  • Contact us

    Still have questions about Ecwid? Let us know! We will be glad to help you with your Ecwid store.

  • Status Monitor

    Get real time status updates on Ecwid services here, 24/7