Many of us use the <body>
class for CSS and JavaScript hooks and just like in WordPress it’s pretty easy to add a number of useful classes to our <body>
element in Shopify.
Here are a few ideas that you might find useful placing in your main (or alternate) layout file:
Add the currently rendered template name to the body class
<body class="{{ template | handleize }}">
In this example, we are using template
to return the name of the currently used template. Some examples of this are:
<body class="index">
<body class="product">
<body class="collection">
This can be really useful when you need to target a specific alternate template for example.
Add the currently rendered product handle to the body class
Building on this we may wish to add the current product handle
to our body class. To keep things neat and tidy we can use an if
statement to conditionally add the product handle only when we are viewing a product:
<body class="{{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">
Note how I include the space before the {{ product.handle }}
output tag.
If you are using alternate product templates you may wish to use the contains
operator instead:
<body class="{{ template }}{% if template contains "product" %} {{ product.handle }}{% endif %}">
Add the current page title to the body class
Some themes also add the current page title to the body element in the form of an id, building on the above our code would now look as follows:
<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}">
Note in this example we are using the Liquid filter handleize
to ensure that the id
or class
that we add is URL safe and therefore easy to reference in our CSS and JS files. For example, it will turn a page title of “Blue Jeans” into “blue-jeans”.
Add the currently viewed collection’s name to the body class
For good measure, we could even add in a check for collections and add that too:
<body id="{{ page_title | handleize }}" class={{ template }}{% if template == "product" %} {{ product.handle }}{% endif %}{% if template == "collection" %} {{ collection.handle }}{% endif %}">
It’s pretty easy to adjust this logic for your own purposes. Again you may wish to use the contains
operator if you are utilising alternate templates.
Summary
Hopefully you’ve seen how flexible Liquid is in the above examples. Being able to add a variety of classes to the <body>
element gives us useful hooks that we can use in CSS and JavaScript.
Read more
- Best Practices for Developing Scalable (and Sustainable) Shopify Themes
- Working with Product Variants When Building a Shopify Theme
- A Beginner's Guide to Sass with Shopify — Part 1: Getting Started With Sass
- An Overview of Liquid: Shopify's Templating Language
- How to Create a Sticky Add to Cart Button On Scroll
- Introducing Online Store 2.0: What it Means For Developers
- Build Forms on Shopify: How to Use Liquid to Build Robust Forms for Shopify Themes
- How to Manipulate Images with the img_url Filter
- 11 Easy-to-Learn Tips For Using Liquid (Shopify's Template Language)
- Understanding Date Formats in Liquid and Shopify