Adding unique class to product card based on tags

Shopify Discussion

Topic summary

A user successfully resolved an issue with adding conditional classes to Shopify product cards based on product tags.

The Problem:

  • When adding an if statement to check for an ‘interactive-non’ tag in card-product.liquid, the last two CSS classes were merging together without proper spacing
  • The conditional logic was working, but whitespace handling caused formatting issues

The Solution:

  • Remove the dash from the opening Liquid tag (change {%- to {%)
  • This prevents Shopify’s whitespace control from consuming the space between classes
  • The dash in Liquid tags strips all whitespace to the nearest non-space character, which was causing the classes to concatenate

Outcome:
The fix worked successfully, allowing proper class separation when the tag condition is met. The thread is resolved and may serve as a helpful reference for others encountering similar Liquid templating whitespace issues.

Summarized with AI on November 4. AI used: claude-sonnet-4-5-20250929.
1

Hi!

I’m trying to add a unique class to a product card based on tags. I’m 90% of the way there. I updated line 43 of card-product.liquid to have an “if” in the class, looking like this:

<div class="card-wrapper product-card-wrapper underline-links-hover {%- if card_product.tags contains 'non-interactive' -%} non-interactive{%- endif -%}">

My only hangup is that in the final outcome, the last two classes get stuck together like so:

class="card-wrapper product-card-wrapper **underline-links-hovernon-interactive**"

Any thoughts on how to fix this?

2

https://shopify.dev/api/liquid/basics/whitespace – just remove dashes:

{% if card_product.tags contains 'non-interactive' %}
2 Likes
3

This is wrong – adding a dash will eat up all whitespace to the closest non-space character.

4

Thank you @tim_1 !! Worked like a charm. Hoping this will be a good reference for others, too.