Adding unique class to product card based on tags

Shopify Discussion
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.