Compare At Price and Sale Badge Not Showing in Mobile

Store Design
, ,

Topic summary

  • Issue: SALE badge and crossed-out compare-at price not appearing on real iPhones (Safari/Chrome), while displaying correctly on desktop and in Chrome’s mobile emulator.

  • Initial checks: One participant could see the badge on an iPhone and suggested testing in an incognito window. Others proposed likely causes on iOS Safari such as mobile-specific CSS rules hiding elements, overflow/position clipping, or JavaScript/lazy-loading timing.

  • Suggested diagnostics:

    1. Inspect for display: none or visibility: hidden on price/badge classes within mobile media queries.
    2. Check overflow: hidden or position: absolute on the price wrapper.
    3. Consider JS hydration issues; try toggling relevant theme settings (e.g., Hide sold-out/compare price).

  • Resolution: The store owner identified a market-specific setting that suppressed sale indicators for certain international markets (Europe). After adjusting the international market configuration, the SALE badge and compare-at price displayed correctly.

  • Status: Resolved. No code changes were required; root cause was a Markets configuration, not CSS/JS.

Summarized with AI on December 11. AI used: gpt-5.
1

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.

2

Please try using an incognito window to check, because I can see the badge and compare-at-price appear on my iPhone.

3

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

4

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:

  1. Look for display: none; or visibility: hidden; rules applied to
    .price__sale, .price-item--regular, .badge, or similar — especially inside mobile media queries (@media screen and (max-width: 749px)).

  2. Check for overflow: hidden or position: absolute on the price wrapper, which can cause iOS to clip the badge even if it shows in emulators.

  3. 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.

5

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

1 Like
6

Thank you for the update.