I once had a customer inform me, with total confidence, that the reason I'd laid out the sale prices "wrong" on the website I was building for them was because I must be left handed. Not a design decision. Not years of experience. Not anchoring, scanning behaviour or accessibility. Apparently strikethrough placement is dictated by which hand you write with.
They were right about the left handed part. Everything else, they got spectacularly wrong.That's a story for another day. What matters here is the actual reason behind the layout, and whether there even is a right answer.
Short answer: both orders work. The order itself is not what drives sales. But it is not a coin toss either. There are three real reasons to pick one over the other, and I will walk through them here.
The two approaches
Marks & Spencer show the sale price first, then the original price with a strikethrough. Shopify's Horizon theme defaults to the same pattern. Perhaps their UX designers are left handed too. 🤣
John Lewis do it the other way round. Original price first, sale price second.
Neither is wrong. Each is solving for a slightly different priority.
Reason 1: anchoring
If a shopper sees £42 before they see £29.40, that £42 becomes the reference point. The saving feels bigger by comparison. This is standard behavioural pricing. Lead with the original price and the discount does more psychological work.
Lead with the sale price instead, and the shopper reads the real cost first. The strikethrough price becomes supporting evidence rather than the headline.
Reason 2: scanning speed
Most shoppers are not reading your price, they are scanning it. On mobile especially, the number that matters is the one they will actually pay. Putting that number first means it is the first thing the eye locks onto, with no need to filter out a crossed-out figure before finding the real one.
This is why product listing pages, where speed of scanning matters more than storytelling, often favour sale price first.
Reason 3: accessibility
Strikethrough text does not always behave the way you expect for screen reader users. Depending on how it is marked up, it can be read as "deleted" or skipped entirely. If the original price is coded correctly with an s or del tag and proper ARIA labelling, either order works. If it is not, putting the sale price first at least means the number a shopper needs is not dependent on the strikethrough being announced correctly.
This is a markup issue as much as a design one. Worth checking regardless of which order you choose.
What actually matters more than the order
Consistency across the site matters more than which pattern you pick. If your category pages, product pages and basket all show pricing differently, that is what erodes trust, not whether the £42 comes before or after the £29.40.
Structured data matters more too. Google and AI shopping tools do not read your page visually, they read your schema.org Product and Offer markup. Get price, priceCurrency and, where relevant, priceValidUntil set up properly, and the visual order on the page has no bearing on how the discount is understood by search engines or AI assistants recommending products.
My take
If I am building this from scratch, I lead with the price the customer will pay. It is faster to scan, it is what most shoppers actually need, and it works better on mobile, where most traffic now sits. The anchoring benefit of showing the higher price first is real, but it is a smaller effect than getting the shopper to the right number quickly.
Whichever way you choose, the job is to build it properly. Pick one pattern, apply it consistently everywhere pricing appears, and make sure the underlying markup is accessible and structured correctly. That is what earns trust and converts, not the position of a strikethrough.
If you want a second opinion on how your pricing is presented, or a proper look at your product page markup, get in touch. I'll do my cack handed best.