Add or edit a css class onto a single specific product

[roborob]

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

[namphan]

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.

[roborob]

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.

[namphan]

Hi @roborob,

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

[btuttle]

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 🙂

[namphan]

Hi @btuttle,

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