Hi,
I would like to add opacity for sold items on the product list. I saw the code provided in this solution, but still dont’ understand where to implement it. Can someone help?
Thank you so much!
The website URL: https://vintage.kyoto/password
Password: kvw2525
Hi @Ulalala
You can add this code to your theme.liquid file, after in Online Store > Themes > Edit code to do that
Thank you so much, it worked!! 
However I would like to the color to be something more like the following. Could you help?
The image is from this solution, which didn’t work in my case by the way.
Thank you so much!
Hey @Ulalala ,
Try this
This will give you
If you don’t want the huge “SOLD OUT” text, just paste this only.
Either of this should be added this way:
Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.
Please try to update code to this and check if it is ok
Hi @Ulalala ,
You can try this code by following these steps:
Step 1: Go to Online Store->Theme->Edit code.
Step 2: Search file theme.liquid
Step 3: Paste the below code at the bottom of the file → Save
Hope my solution works perfectly for you!
Best regards,
Oliver | PageFly
Thank you again so much! The opacity is now perfect!!!
I didn’t think about the sold out idea, but it is great. I would like to make it a little smaller like 15px and in gray with a little thinner font such as the sold sign which is already at the left bottom corner. Could you advise me on how to do it?
Also I’d like the text to be in the same position as the one your image. This is what it looks now after I pasted your code:
Thank you so much!
Hey @Ulalala ,
You can replace the previous code with this. I left a comment on the side of the code for you to change the color and the font size according to what you need!
@ThePrimeWeb Thank you!
It looks much better now!! I think I need 2 more adjustments 
How could I change the background color to different opacity levels? It might be better to higher the level to make it more visible. But I’d like to try and see how different levels look on the website.
“Sold” sign is now located a little lower than the very center of the image. How could I put it in the center of the image?
Thank you so much for your help
Hey @Ulalala ,
If you want to test out different opacity levels, see the part
background-color: rgba(255, 255, 255, 0.4); ← The last part 0.4 is the opacity. 0 is invisible, 1 is fully visible, play around within that range.
The fix for centering is here,
Thank you so much! It worked perfectly. Thank you so much for your prompt response and help!!
Thank you so much for your help!
Hi,
Is there a newer piece of code that will work on Dawn 13.0.1?
I’m trying out Dawn Theme version 13.0.1 before publishing and want to implement this fade of apacity on Sold out items, but this solution isn’t working. I successfully added it to an earlier version of Dawn but when I made a duplicate of my site and upgraded to 13.0.1 the coding wasn’t copied over as, it said they aren’t compatable.
Thanks for your help!
Carol.