Full-width % off banner on sale items: +19% purchase conversion

WinnerCollection page

Showing the discount as a full-width percentage banner on sale items in the mobile collection page lifted purchase conversion by 19% and revenue per user by 26%.

Swanky ran this test for a fast-fashion shoe retailer on Shopify Plus, and it was published as a Convert.com case study.

The retailer wanted to sell stock earlier, before it needed deep markdowns.

+19% purchase conversion
  • Purchase conversion rate: +19% for the full-width banner, at over 95% confidence.
  • Revenue per user: +26%, at over 98% confidence. Shoppers bought earlier, before items reached deeper discounts.
  • Product page visits: both variants, banner and corner badge, raised them about 5% over the control.
  • The corner badge variant's purchase result was not reported, so we can't say how it did on sales.

The change

Control (A)
header
filters
product card
Small 'sale' iconREPLACED
Old and new price
Variant (B)
header
filters
product card
Full-width % off bannerNEW
Old and new price

A small sale icon becomes a full-width banner showing the percentage off.

Simplified mockup drawn by LiftArchive from the shared screenshots.

Control

On the mobile collection page, sale items carried a 'sale' icon and showed both the old and new price.

Variant

Each sale item had a full-width banner across the product image showing the percentage off, in a larger, easier-to-read font. A second variant used a smaller corner badge with the percentage.

Why it likely won

Our reading of the result, not the practitioner's claim.

  • A percentage saves shoppers the mental math of comparing two prices.
  • On a small screen, a full-width banner in a large font is much easier to notice than a small corner icon.
  • Shoppers who see the saving clearly may buy sooner, so less stock is left for the bigger markdowns later.

Caveats: The test ran for 12 days on about 5,000 visitors split three ways, and 54% of visitors were new, many from paid search. The source is a testing-tool vendor's case study and is several years old.

Who ran it

Swanky ran this test for a fast-fashion shoe retailer on Shopify Plus and published the results (Convert.com case study). The numbers are theirs; the summary and commentary on this page are ours.

Read the original case study on Swanky →

How to run this test on your store

Hypothesis
If we show the discount as a large percentage banner on sale items in mobile collection pages, then more shoppers will buy because the saving is obvious at a glance.
Primary metric
Purchase conversion rate
Guardrails
  • Revenue per user
  • Average discount per order
  • Full-price product sales
Who should test it
Stores that run frequent sales or markdowns and get most traffic on mobile. It may not suit premium brands that avoid loud discount messaging, or stores whose discounts are too small for a percentage to impress.

Questions

Should I show the discount as a percentage or a price?

Showing a percentage can make the saving easier to grasp.

In this test it lifted purchases 19% over showing old and new prices with a sale icon.

Does the size of the sale badge matter?

It did here. Both percentage designs got more product page visits, but only the full-width banner was reported to lift purchases.

Can clearer discounts raise revenue?

Yes, if shoppers buy earlier at a smaller discount.

Revenue per user rose 26% in this test.

Similar tests