Add Sale Badges to Shopify Product Images the Safe Way

Add Sale Badges to Shopify Product Images the Safe Way — PantherCodX guide cover

The safe way to put a sale badge on a Shopify product image is to render it at the display layer rather than editing the file. The storefront draws the badge on top; the stored image and the one your product feed submits stay exactly as photographed. Everything below follows from that one choice — how to turn badges on for hundreds of products at once, how to make them switch off by themselves, and why the image Google sees should not be the image your shoppers see.

Why editing the file is the expensive option

Opening a photo, adding "20% OFF" and re-uploading takes a minute. It creates three costs that arrive later.

  • Reversal. When the promotion ends somebody has to re-upload the clean version of every image. Forty products with four images each is a job nobody schedules, which is why stores carry sale badges for months after the sale.
  • Your feed. Google Merchant Center disallows promotional overlays on product images, and the file you baked the badge into is the file your feed submits. What that means in practice is worth reading before your next promotion.
  • The original. Unless a clean copy was filed somewhere disciplined, the unbadged photo is gone.

A display-layer badge is a rule rather than a file. Switching it off is a toggle, the stored image never changed, and the feed keeps sending the clean original.

Choose the rule, not the products

Badging products one at a time works until there are fifty of them. Then it becomes a task that is never quite finished and never quite undone.

Describing the products instead scales and stays correct on its own:

  • Compare-at price. Anything where the compare-at price is higher than the price is on sale by definition. A badge driven by this is right forever, with nobody maintaining a list — and it disappears the moment the discount does.
  • Collection. Everything in Sale gets the badge; a product leaving the collection loses it.
  • Tag. The tags your merchandisers already maintain drive the badges for free.
  • Inventory level. "Only a few left" under a threshold. The most honest scarcity badge available, because it is literally true.

The first and last are the ones worth setting up properly, because they are self-maintaining. Every badge you drive from a rule is a badge nobody has to remember.

What the badge should say

A badge has room for about three words and roughly a third of a second of attention.

Name the benefit, not the category. "20% OFF" beats "SALE" because it answers the question the shopper was about to ask. On higher-priced items "SAVE £40" can beat the percentage, because a number needs no arithmetic. Below about £20 the percentage usually looks bigger than the saving, so it wins.

Be specific only where you can be truthful. "Only 3 left" is far stronger than "Low stock" — and only usable driven by real inventory. A scarcity badge that is not true is the fastest way to lose a returning customer, and shoppers do check.

Do not badge the obvious. A "NEW" badge on a store where everything launched last month says nothing. Badges work by contrast; when most of a grid carries one, none of them register.

The test: if the badge could sit on every product in the collection without looking odd, it is not carrying information.

Position, and the crop that eats it

Corners are right for promotional badges — top-left reads first in left-to-right languages, and a corner leaves the product visible.

The risk is cropping. Collection cards, cart thumbnails and social previews all crop to different ratios, and a corner is the first thing to go. A badge that looks perfect on the product page can be half-missing in the cart drawer.

So check three places before calling it done: the product page, the collection grid, and the cart. Those are different aspect ratios and usually different image sizes.

Centre placement survives every crop and covers the product, which is why it belongs to watermarks rather than badges. Image protection is a different job with different rules.

Legibility on a phone

A badge designed against a desktop grid gets scaled hard on mobile, and two things break.

  • Text size. What reads comfortably at 400px is unreadable at 150px. Fewer words at a larger relative size beats a full phrase.
  • Contrast. Badges over busy or light photography disappear. A solid backing shape is far more reliable than text with a drop shadow.

Test against your actual product photography rather than a mockup. Studio shots on white are forgiving; lifestyle images are not.

Make it end by itself

Every store has seen a "Black Friday" badge still sitting on products in January. It happens because removal is a separate task from creation, and only one of them has a deadline attached in anyone's mind.

Two fixes, and you should use both:

  • Set the end date when you set the start date, while you are still thinking about the promotion.
  • Drive it from compare-at price where you can, so the badge is tied to the discount itself rather than to a calendar.

A stale sale badge is worse than no badge. It tells returning customers your promotions are meaningless and trains them to wait for the next one.

Badges in more than one language or currency

A badge is text on an image, which makes it the element most likely to stay in English after everything else has been translated.

Baked-in badges make this combinatorial — forty products, four images, six languages. Display-layer overlays make it a text problem, which is tractable. Two things to check:

  • Does the overlay text follow the customer's language, or is it one string for everyone?
  • Does the layout survive a longer word? "SALE" is four characters; its German and French equivalents are not. A badge sized exactly to the English string breaks on translation.

Currency has the same shape. "SAVE £40" is wrong for a customer shown euros, which is an argument for percentage badges on multi-currency stores even where an absolute saving normally reads better.

Setting it up

  1. Pick the rule first — compare-at price for sale badges, inventory for stock warnings, collection or tag for anything editorial.
  2. Write three words. Name the benefit.
  3. Place it in a corner, then check the collection grid and cart drawer, not just the product page.
  4. Set the end date now, not later.
  5. Open the product's media in admin and confirm the stored file is exactly what you uploaded. That is the check that proves nothing was baked in.

With Watermark the free plan covers three active products with text, image and watermark overlays — enough to see how a badge sits on your own photography. Unlimited products, trust badges, scheduling and smart rules are on the $4.99 plan.

Mistakes worth avoiding

  • Editing the original file. Fast today, expensive in February, and a feed problem in between.
  • Three badges on one thumbnail. The product becomes the fourth thing you notice.
  • Only checking the product page. Cart and social crops differ.
  • A scarcity badge that is not driven by stock. Shoppers check, and they remember.
  • No end date. The January Black Friday badge.

Where to go next

The full picture of display-layer overlays — what they cost in page speed, how trust marks differ from promotional badges, and the honest limits of watermarking — is in the guide to watermarking Shopify product images. If you are about to run a promotion across a feed-connected catalogue, read the Merchant Center rules first.

Frequently Asked Questions

Can I add a sale badge without editing the product photo?

Yes. A display-layer overlay is rendered by the storefront on top of the image, so the stored file and the one your product feed submits never change. Turning the badge off is a toggle rather than re-uploading every image, which is what makes it survivable at catalogue scale.

How do I badge hundreds of products at once?

Describe the products instead of choosing them. A rule on compare-at price badges everything that is genuinely discounted and unbadges it when the discount ends — correct forever with nobody maintaining a list. Collection, tag and inventory level work the same way.

What should a sale badge say?

Name the benefit, not the category: "20% OFF" beats "SALE" because it answers the question the shopper was about to ask. On higher-priced items an absolute saving reads better than a percentage. And do not badge the obvious — if the badge could sit on every product in the collection, it is not carrying information.

Why does my badge look cut off in the cart?

Collection cards, cart thumbnails and social previews crop to different ratios, and a corner badge is the first thing to go. Check the product page, the collection grid and the cart drawer before calling it done — they are usually different aspect ratios and different image sizes.

How do I stop a sale badge staying up after the sale?

Set the end date at the same time as the start date, while you are still thinking about the promotion. Better still, drive the badge from compare-at price so it is tied to the discount itself rather than to a calendar nobody checks.

Continue Reading

Schedule Badges to Appear and Vanish With the Sale
ecommerce-tips

Schedule Badges to Appear and Vanish With the Sale

Watermark Hundreds of Shopify Products in One Pass
bulk-editing

Watermark Hundreds of Shopify Products in One Pass

Shopify Watermark Apps Compared: Feed-Safe Options
app-comparison

Shopify Watermark Apps Compared: Feed-Safe Options