My sale products are not showing the SALE badge or the crossed-out compare-at price on mobile. They display correctly on desktop, and they also appear in Chrome’s mobile emulator, but on a real iPhone (Safari and Chrome) the badge and compare-at price disappear completely.
Please try using an incognito window to check, because I can see the badge and compare-at-price appear on my iPhone.
Hey @JoeyRoo , Welcome to shopify Community!
Thanks for sharing the issue - I’ve seen this happen before. The sale badge and compare-at price disappearing on real mobile devices is usually caused by a small theme or CSS condition specific to iOS Safari.
Once I get store access, I’ll run a quick check and fix the logic so the sale badge displays properly across all devices (desktop + real mobile).
Just let me know when access is ready and I’ll take care of it.
Best,
Rajat
This usually happens when the mobile stylesheet or a responsive class is overriding the sale/compare-at elements — iOS Safari tends to be stricter with hidden overflow and parent containers.
A few things you can check:
-
Look for
display: none;orvisibility: hidden;rules applied to
.price__sale,.price-item--regular,.badge, or similar — especially inside mobile media queries (@media screen and (max-width: 749px)). -
Check for
overflow: hiddenorposition: absoluteon the price wrapper, which can cause iOS to clip the badge even if it shows in emulators. -
If your theme uses lazy-loading or JS hydration, sometimes the sale logic doesn’t fire on iOS.
Turning off “Hide sold-out/compare price” in Theme Settings → Product might help.
If you can drop your URL (or preview link), I can point you to the exact file/line to fix — this one is usually just a small CSS override hiding the element on iPhones if you’re comfortable with coding.
I fixed the issue. We had a setting set for one of our international markets so it wasn’t showing for Europe markets where I am based. Thanks for the other suggestions though
Thank you for the update.