Hi, I added this code: How to Show Percentage Discount in Sale Badge for Shopify Dawn Theme – CRO Templates Library to show sale percentage badge on the product card on my website: amaltasstudio.com. The badge shows up for a second and then disappears when the image ratio changes from 1:1 to portrait. I would like to stick to the portrait ratio ideally. If not, then I just want the ratio to be consistent as my images are all different sizes, and most importantly for the badge to show up. Thank you!
This happens on mobile.
Did you use any customized code to change the image from 1:1 to portrait?
I checked on your site and saw the issue happen on mobile and desktop both,
beside, i check your code example so the code is ok,
I guess on your site using an app filter or sort relevant to collection page. On first DOM load the badge still show up, but when DOM finished load the collection reload again and remove the code you added.
You can check again the app you using currently on collection page, if you don’t familiar with code, you can let me know, i will check and detect help you with collaborator member.
Hi,
Hope this will help
Move the badge HTML to the card level (not inside the image), give it absolute positioning with a high z-index, and set your grid to Portrait + Crop for consistent tiles.