Template: A Guide to Styling Specific Shopify Templates
If you’ve spent any time building on Shopify, you’ve probably run into a moment where you want one product page (Template) to look nothing like the others. Maybe you’re rolling out a "Flash Sale" and want a punchy red banner screaming at the top of the page. Or you’ve got a "Wholesale" section and you want it stripped down—just the essentials, no fluff.
Back in the day, we leaned on product.template_suffix to pull this off. It still works, but Shopify’s moved on. Now, the template object is where the magic happens.
Let’s dig into how you can use template.suffix to totally overhaul your store’s look for specific products, without blowing up your whole layout.
First off, what’s a "suffix" of template anyway? Every time you whip up a new template in Shopify (like `product.premium-product.liquid`), the bit after the dot—premium-product—is your suffix.
This little tag tells Shopify, “Hey, if someone’s looking at this special version of a product page, hit it with these custom styles.”
Here’s how we used to do it:
{% if product.template_suffix == 'premium-product' %} ... {% endif %}
It works, but it gets clunky fast. These days, you use the global template object, which is way more flexible:
- {{ template.name }} gives you the base type (like 'product').
- {{ template.suffix }}hands you your custom bit (like 'wholesale').
- {{ template.directory }} helps you stay organized if you’ve got subfolders.
Let’s talk about how to actually use this for styling.
The bread and butter here is the humble if statement or a case switch. They let you swap out HTML or CSS classes depending on which template is loaded.
Say you’ve got a special landing page for your Berberine supplement and you want the title to stand out, maybe for tracking or just to flex a bit.
{% if template.suffix == 'premium-product' %}
<h1 class="special-title">{{ product.title }}</h1>
{% else %}
<h1 class="regular-title">{{ product.title }}</h1>
{% endif %}If you assign your product to the "premium-product" template, boom—special class. Everything else sticks with the regular styling. No need to bloat your CSS with a bunch of overrides.
If your store has more than a couple of special pages—Premium, Sale, Wholesale, whatever—your if statements stack up quick. That’s where a case tag keeps things sane:
{% case template.suffix %}
{% when 'premium' %}
<h1 style="color: gold;">{{ product.title }}</h1>
{% when 'sale' %}
<h1 style="color: red;">{{ product.title }}</h1>
{% else %}
<h1>{{ product.title }}</h1>
{% endcase %}It reads like a menu. Shopify checks the suffix and serves up the right flavor.
Here’s a good trick: slap the template name right onto your <body> tag in theme.liquid. Then you can target your CSS to specific template, no more Liquid edits every time you want a new style.
<body class="template-{{ template.name }}{% if template.suffix %}-{{ template.suffix }}{% endif %}">So Shopify spits out something like <body class="template-product-wholesale">. Now your CSS can just hit .template-product-wholesale h1 { color: blue; } and you’re done.
Why go through all this instead of just using a page builder? Well, page builders might look simple, but they usually slow your site down. A few lines of Liquid are:
- Faster. No extra JavaScript dragging things out.
- Cleaner. Your SEO stays sharp. No messy overlays.
- Scalable. Set it once and every product you assign to that template just works.
Here’s a real-life scenario: you’ve got a wholesale template, and you want to hide the "Gift Wrap" option. Use the suffix to control what shows up:
{% if template.suffix == 'wholesale' %}
<p>Wholesale Pricing Applied: Bulk Shipping Only.</p>
{% elsif template.suffix == 'gift' %}
<p>This product includes a complimentary gift box!</p>
{% else %}
<p>Standard shipping rates apply.</p>
{% endif %}Bottom line: getting comfortable with template.suffix opens up a world of customization for your store. You’ll be able to roll out special promos, tailor experiences for different customers, and keep everything fast and tidy—no pricey apps required.
So the next time you’re launching a promo or a new collection, don’t just accept the default look. Create a suffix and give your pages that extra touch. Your customers will notice.
