Add or edit a css class onto a single specific product

Store Design
,

Topic summary

Goal: apply a unique CSS hover effect to one specific product everywhere it appears on the site, without relying on position or page context.

Attempts so far:

  • JavaScript targeting the product’s x-data attribute to change hover background (unsuccessful).
  • JavaScript targeting the product’s anchor href (unsuccessful).
  • CSS nth-child targeting (works only when the product stays in the same order; not reliable).

Proposed approach: add a product handle–based class to each product card/item so CSS can target that one product consistently. A “product handle” is the product’s unique URL-friendly identifier; adding it as a class enables precise styling. “theme.liquid” is the main layout file that can include assets; “x-data” is a JavaScript attribute often used by frameworks for state.

Current actions:

  • The theme in use is “Label.”
  • A collaborator invite was requested to inspect and modify theme files.
  • Another participant asked how to add a handle-based class and provided interest; their theme name was requested.

Status: no code solution posted yet; pending theme-specific implementation and access. Discussion remains open.

Summarized with AI on December 15. AI used: gpt-5.
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