I am currently trying to add custom html/css underneath my products on my collection pages. I am adding variant labels to show customers whether a product is sold out or in stock. When trying to link the shopify product/variant by its ID, it applies the css to all of the products. I will link pictures below.
See? I am only trying to link the first shirt but it is adding it to all of the shirts. Can I further specify what products I want to edit that way each one can have different variants marked out?
You have various possibilities to decide for which products show or not the additional details:
For this type of needs I usually prefer to use always Metafields, and keep Tags for user filtering/sorting and collection conditions.
But maybe you can also implement something smarter without using any of those.
Can you explain better the logic behind? When you want to show the sizes labels? If they just represent the variants available you can implement a for loop on the product and extract the size from the name of the variant.
The variant wouldn't be clickable. I am mainly implementing it to show the customer that a certain variant is out of stock. It doesn't need to track inventory or anything. Basically, I just need to be able to say a certain size of a shirt is sold out and I just need a way to link it. Also, I have no expertise in using meta fields and using them to link to products/variants so any help is greatly appreciated.
Thank you for your question.
- your store URL;
- page URL with the issue you mention;
- storefront password (if your store has one).
I'll help you to the best of my ability.
If I understand correctly you want to add the S M etc sizes exclusively to one product and that one product is that tshirt?
If so, what is the link for that tshirt?