Dynamic Body Classes for Custom Shopify Styling
When working on Shopify themes, developers often need to apply different styles to various pages across the store. For example, product pages, collection pages, and the homepage might all require unique CSS rules. In this guide, we’ll explore how to dynamically add body classes based on the page template or URL, giving you more control over your site’s appearance and layout. This method can be particularly useful when working with custom sections like “Image Banners” or “Featured Collections,” where you might want a different look depending on the page.
Code Example & Explanation
Below is an example of how to add dynamic body classes in Shopify using Liquid code within the theme.liquid file. This code checks the page template or URL and applies specific classes to the <body> element:
<body class="
{% if template == 'index' %}
home
{% endif %}
{% if template contains 'product' %}
product
{% endif %}
{% if template contains '404' %}
page-404
{% endif %}
/* This can help to target a specific product */
{% if request.path contains 'gift' %}
gift-card
{% endif %}
{% if template contains 'page' and template != 'page.about' and template != 'page.wholesale' and template != 'page.contact' %}
page
{% endif %}
{% if request.path contains '/policies/' %}
page policies-page
{% endif %}
{% if template contains 'page.about' %}
page page-about
{% endif %}
{% if template contains 'cart' %}
cart
{% endif %}
{% if template contains 'search' %}
search
{% endif %}
{% if template contains 'account' %}
account
{% endif %}
{% if template contains 'collection.color' %}
collection collection-color
{% elsif template contains 'collection' %}
collection
{% endif %}
{% if request.path contains '/blogs' %}
blog
{% endif %}
">Step-by-Step Breakdown:
Template Detection:
Shopify’s template object is used to detect which page template is being rendered.
If the template is the homepage (index), the home class is added to the body.
For product pages, it adds the product class.
URL-Based Class Targeting:
The request.path is checked to add classes based on specific URL segments. For instance, if the URL contains ‘gift’, the class gift-card is added.
This is helpful for applying unique styles to specific product types, like gift cards.
Special Cases:
Specific conditions, like adding a page-404 class for 404 error pages or page-about for an “About Us” page, allow you to apply precise styles based on the context of the page.
Collection and Policies Pages:
For collections, the script checks for a specific template name, such as collection.color, and adds the collection-color class, otherwise defaulting to the collection class.
Policy pages can be easily targeted with a policies-page class.
This approach ensures that each page can have its own unique styling while maintaining consistency across the store.
Best Practices
- Optimize for Performance: Avoid overloading the
<body>element with too many classes. Be specific in targeting elements that truly need different styling based on the page type. - Security Considerations: While the method is straightforward, ensure that the Liquid code doesn’t expose sensitive data through URLs or body classes.
- Scalability: By using template and path-based class detection, this setup is highly scalable. You can easily add more conditions as your store expands, without touching every individual page or section.
- Common Mistakes to Avoid:
- Avoid applying classes indiscriminately to every page—this can make your CSS cumbersome to manage.
- Make sure not to repeat conditions for templates or URLs, as this can cause conflicts in class assignment.
Interesting Use Cases
Target Specific Sections for Styling:
You can use these dynamic body classes to style custom sections differently depending on which page they’re on. For instance:
body.product .image-banner {
background-color: #f5f5f5;
}
body.home .image-banner {
background-color: #e0e0e0;
}Customizing Checkout or Account Pages:
Use the cart or account classes to apply custom styles to the cart and account pages, such as modifying the layout or adding banners.
Running Page-Specific JavaScript:
Dynamically add scripts that only run on certain pages by checking the body class in your JavaScript:
if (document.body.classList.contains('product')) {
// Product page specific JS
}