hello, how can someone give me the code to change my sold out badge to look like this where its In the middle and the product photo is blurred ? thanks
website is www.exoticsouls.world
Topic summary
A user seeks CSS code to center a “sold out” badge over product images with a blur effect. GemPages support provides step-by-step instructions:
Solution provided:
- Navigate to Online Store → Theme → Edit code
- Open the theme.liquid file
- Paste custom CSS markup before the closing
</body>tag
Follow-up requests:
- How to display badge text horizontally instead of stacked vertically
- How to change only the sale badge color to green (with reference images showing desired styling)
Another user (HELDERWRLD) requests similar assistance for their store, providing website URL and password, with example images showing their desired badge appearance.
Status: Initial solution confirmed working; additional customization questions remain unanswered.
Hello @ExoticSouls
It’s GemPages support team and glad to support you today.
You can follow these steps:
- Go to Online Store → Theme → Edit code
- Open your theme.liquid theme file
- Paste below code before :
If you require any further information, feel free to contact me.
Best regards,
GemPages Support Team
thank you, worked great. I have two more questions tho.
- how can I change the text to be straight across instead of on top of each other?
- Can you give me code to change only the sale badge to a green color?
Thanks for the help!
Hello @GemPages
Can you help me on this too?
Website: https://c04baf-2.myshopify.com/
Code: Diversusoficial
I want it to be like the example bellow:
