Add or edit a css class onto a single specific product

Store Design
,
1

I’ve been trying to find a way to affect a single specific product regardless of where it’s shown on the site. I want just this one product to have a different background/hover affect via CSS.

Since we can’t add a css class/id to a product in backend, here’s what I’ve attempted and failed so far.

  • created a JS file (file in assets directory linked in theme.liquid) that targets the “x-data” of the product then changes the background of the product on hover (no go)
  • created a JS file (file in assets directory linked in theme.liquid) that targets the “href=/” of the product then changes the background of the product on hover (no go)
  • in css changing the nth-child for the product I want. This works, but it will only work on pages where that product exist in that exact spot (kind of a hack)

What other options are there? To help clarify, think of it like this. If I have 10 products in my shop. I want a hover effect on all of them (throughout the site) EXCEPT a specific one of those 10. It gets different hover effect.

Thanks for any additional brain power you might have. =D

2

Hi @roborob ,

You just need to add the product handle class to each product item, then you can css it, it will work separately.

Which theme are you using? I can help you check it in detail.

3

That’s doable?! That would be perfect if I could target a class per product.

The theme I’m using is called Label.

Thanks in advance for any direction you might have.

4

I’m trying to accomplish this too!! How do I get a product card to have a unique class based on the handle? @namphan would love your instruction :slightly_smiling_face:

5

Hi @roborob ,

Can I send you a collaborator invite? it will help me check the files to change and add the code for you

6

Hi @btuttle ,

Please send me the theme name, I will check it for you