Hello!
I want to move the sales badge from the price to the top left corner on the product image on the product page. Can somone point me on how to solve that?
I’m using
Best regards
A user seeks to relocate the sales badge from the price area to the top left corner of the product image on their Refresh theme product page. \n\nAfter initial back-and-forth about sharing store details, a solution is provided involving custom CSS code added to the theme.liquid file. The code uses absolute positioning to place the badge over the product image and ensures responsive display across devices.\n\nTwo issues emerge after implementation:\n- The badge displays on all product pages, even those without sales\n- The user requests showing percentage discount instead of static \
Hello!
I want to move the sales badge from the price to the top left corner on the product image on the product page. Can somone point me on how to solve that?
I’m using
Best regards
Hey @HappyR1337 ,
Can I have the link to your store? Thanks!
I can’t message you in private. But I’m using latest version of Refresh Theme.
Hey @HappyR1337 ,
It’s abit difficult to do it that way, because your theme settings may have changed parts of the code.
An analogy is (I’m not being rude, this is the only way I can explain it):
If I tell my mechanic that my that my Toyota Prius is broken, but I can’t show him the car so I want him to look at another Prius and fix mine. It’s not helping either one of us.
You can just post the link here, everybody does it that way.
In the default refresh theme, it’s already placed the way you want it. So had I looked at the refresh theme myself, I’m not seeing what you are seeing.
If you are concerned, just post it here then edit reply later and remove it.
Hehe, I understand what you mean ![]()
Shop url: -
pass: -
But notice that I’m not talking about the product in collection view, it’s the main product page that I want to move it to the top left corner of the product image.
Hey @HappyR1337 ,
It’s abit of a “hack” solution, but it works. Had to do it this way to make it responsive on all devices.
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.
Screenshot is for reference only, the correct code to paste is the one shown above.
That’s awesome and it dose the trick! But is it possible to also have the % in the badge instead of the static text?
Edit: noticed now that it shows on every product page, even ones that dosen’t have a sale.
Hey @HappyR1337 ,
It won’t be possible to show the percentage, that would require tweaking the template code and that’s going to take alot of work.
Can you remove the code, I will check again, seems like every product has the sales content, but one’s that don’t have a sale are just visually hidden.
Ah okay! Iv’e removed the code ![]()
Hey @HappyR1337 ,
You still have some leftover code. Please delete that.
Then follow the same instructions above and add this instead
It works! Awesome work m8, thanks a lot ![]()