How to add product labels like New or 20% off
Put a small label on your product cards across your store, such as New, 20% off, Bestseller or Sold out, from simple rules you set once.
A small label on a product card helps shoppers spot what's new or on sale while they scroll a collection. You set the rules once, and every card that matches gets its label.
TL;DR
Go to Store Widgets, click Create Widget and pick Product labels. Click Add label for each rule, such as "New" for products added in the last 30 days. Click Publish. Then turn on Nudgesmart site widgets under App embeds in the theme editor. Labels show on product cards across your store.
Step 1 · Create the widget
In Nudgesmart, open Store Widgets and click Create Widget. Pick Product labels. It's under Products & cart.
Widget library with the Product labels widget highlighted under Products & cart
Screenshot coming soon
You can have one product labels widget per store. It holds all your label rules.
Step 2 · Add your labels
In the Content tab, open the Settings section under Product labels. Under Labels, click Add label.
Product labels settings with two label cards: New and a sale label
Screenshot coming soon
Each label has:
- Label text. Up to 40 characters. One or two words read best.
- Show it on products that are. The rule that decides which products get the label.
- Style. Solid (your theme's text colour), Outline, or Accent (your theme's button colour).
The rules you can choose from:
| Rule | What it matches |
|---|---|
| Added to your store recently | Products added in the last few days. Set the number in Days since it was added to your store, from 1 to 365. It counts from when the product was added to your store, not when it was published. |
| On sale (has a compare-at price) | Products with a compare-at price above their price. |
| Sold out | Products with nothing left to sell. |
| Has this tag | Products with the tag you type in Tag. |
| Product type is | Products of the type you type in Product type. |
| Vendor is | Products from the vendor you type in Vendor. |
For a tag, product type or vendor, type it exactly as it is in your Shopify admin.
For a sale label, write {{ percent }} where the discount should go. "{{ percent }} off" shows as "20% off" on a product that's 20% off. The percentage shows only when every option of the product is discounted. If sizes or colours have different discounts, or some aren't discounted, it shows the smallest discount, or none when any option is full price. A product with no percentage moves on to your next label, so add a plain Sale label below it to catch those.
The first label you add is "New", for products added in the last 30 days. The next is a sale label. You can change any of them. You can add up to 6 labels.
Step 3 · Put the labels in order
The first matching rule wins. Each product card shows at most one label, so order matters. Open a label's menu and use Move up or Move down.
For example, with "Sold out" above "New", a new product that has sold out shows Sold out. Put the label you most want shoppers to see at the top.
Step 4 · Choose the corner
Under Corner, choose where labels sit on the product photo: Top, far side (the default), Top, near side, Bottom, far side or Bottom, near side. If your theme already shows its own badge along that top or bottom edge, the label moves to the opposite edge (top to bottom, or bottom to top) so the two don't overlap.
Under More options, Skip when the theme shows its own badge is on by default. Many themes already show their own Sale or Sold out badge. With this on, a sold-out card that already has your theme's badge doesn't get a second one. Sale labels never show next to the theme's own badge, whatever this setting says. Other labels, such as New or a tag label, still show.
Step 5 · Publish and turn it on in your theme
In the Visibility card, click Publish. Then click Add to store and click Turn on.
The theme editor opens on App embeds. Turn on Nudgesmart site widgets, then click Save. To do it by hand:
- In Shopify, go to Online Store → Themes → Customize.
- Click App embeds in the left sidebar.
- Turn on Nudgesmart site widgets.
- Click Save.
Nudgesmart site widgets is the same switch that shows the WhatsApp and chat buttons. If it's already on, your labels show as soon as you publish. Turning it off hides them all.
Where labels show
Labels show on the product cards your theme draws: on collection pages, search results, your home page and in your theme's product recommendations. They're made for product cards, so they don't show in your header, menus or pop-up windows.
A few rules keep them useful:
- One label per card. Never a stack of them.
- A label every product matches is skipped. If every product on a page is on sale, such as in a sale collection, the sale label adds nothing, so it's left off that page.
- Never two discount marks. If your theme already shows a sale badge on a card, no sale label shows there.
Tips
- Keep it to two or three labels. A few labels stand out. A label on every card is just noise.
- Use tags for your own picks. Tag products "bestseller" or "gift idea" in Shopify, and add a Has this tag rule with the Outline style.
- Check a collection page. After you publish, open a collection on your store and look at a product you expect to be labelled.
Common pitfalls
- I clicked Publish and it didn't publish. You need at least one label: "Add at least one label before you publish." Click Add label, then Publish again.
- I published but don't see any labels. Turn on Nudgesmart site widgets under App embeds, then click Save. Then check that some products on the page match a rule. In the theme editor, a note says "No products on this page match your label rules." when none do.
- My tag rule doesn't match. Check the tag is spelled the same as in Shopify, including any spaces inside it. Capital letters and spaces at the start or end don't matter.
- My sale label doesn't show on a sale product. Your theme probably shows its own sale badge on that card. Nudgesmart never adds a second discount mark next to it.
- The "New" label is on an old product. Added to your store recently counts from when the product was created in your store, not when you published it or last edited it.
When a shopper has a code
If your popups give shoppers a discount code, you can add a label that reminds them their code applies. Choose Shopper has a code from your popup as the rule. Write {{ percent }} in the label text, such as "Your {{ percent }} applies", to show the code's discount. It shows on at most two cards per page, and only on cards with no badge of their own. To leave some products out, type a tag under Don't show the offer label on products tagged.
What to read next
How to tag products on a photo with Shop the look
Put numbered product spots on a lifestyle photo. Shoppers tap a spot to see the product and add it to their cart, without leaving the page.
How to add a rotating announcement bar
Show short messages like free shipping, returns and fast replies one at a time in a slim bar near the top of your pages, with a pause button for shoppers.