You may or may not have heard about the Body Class. If you are familiar with other platforms like Wordpress and have built or augmented themes there, you will know how powerful they can be.
In a nut shell, the body class is a list of classes that are dynamically loaded in the Body element of the HTML of every page.
<body class="ex-product ex-loggedin ex-a-1431905 ex-u-1237271 ex-schema-default ex-sku-kf73660 ex-product-jeminiintrobavarianbeechpanelenddesk1200mmkf73660 ex-pack-1 ex-category-officedesks ex-brand-jemini ex-company-vow ex-catalog-1009 a1431905 u1237271 product loggedin a-1431905 u-1237271 default kf73660 jeminiintrobavarianbeechpanelenddesk1200mmkf73660 1 officedesks jemini vow 1009 ">
⚠️ Important : You will notice that the body classes are duplicated. For example "ex-product" and later on simply "product". Make sure to use the body classes with the "ex-" prefix as these are less likely to come into conflict with other libraries you might add to your page.
Documentation - Full list of Classes
What are they
These classes are automatically added to pages based on the content of the page that you are currently viewing. If you land on a product page, you get the product body classes (sku, manufacturer, product name, etc). If you land on a category page you get classes that refer to that category.
You can think of them as "hooks" that allow you to target certain page types (e.g. all products pages, all category pages, or the home page, etc.). They also allow you to target very specific pages (e.g. particular product with a particular sku/item code).
To use body classes you need to know a little CSS. It is very easy so don't be intimidated. Here is a really simple example.
How To Example
Let's say we want to change the background color of a particular product page. We don't want this color to be on all products, just on this specific product.
We can use the Sku/Item Code that is in the body class as our "hook".
To write the css would look like this.
body.ex-sku-kf73660 .page-content {
background-color: cadetblue;
}
This is what it looks like: The background of the page-content will turn from white to cadetblue.
Code breakdown
So lets look at that code in detail.
body - This tells the browser look first for the body element
.ex-sku-kf73660 - Then next look to see if the body class contains "ex-sku-kf73660". As KF73660 is the sku/item code of this product.
.page-content - Then look to see if the "page-content" section exists on this page.
If all of the above is true, then apply the background-color: cadetblue to the page-content.
Conclusion
If this seems all a bit much, don't worry, you don't need any of it. This is really intended for frontend developers, web designers, and people with some CSS background.
Documentation - Full list of Classes
Pretty powerful, right!