A badge is a small tag drawn over a swatch — New, Sale, a flame, a star. Shoppers see it in the swatch row before they click anything, so it is the one place you can say something about a colour without taking up a line of the product page.
Open Swatchfy → Variant badges.
Press Create badge.
Either press one of the ready-made badges above the fields, or fill them in yourself.
Name is yours alone — it names the badge in your list and never reaches a shopper. Badge shows is the decision that changes everything under it:
Badge shows | What a shopper sees |
Text | A word on a coloured chip. You choose Text color, Background and Shape. |
Icon or emoji | The mark on its own — no chip, no background, no shape. |
That difference is not a styling default you can override. A text badge is a chip and an icon badge is a bare mark, so the chip settings simply are not there in icon mode, and Shape disappears with them.
Badge text is capped at 12 characters so it fits on a swatch, and emoji count. 🔥 Trending is a text badge, not an icon one — that is how the ready-made Top pick, Trending, Premium and Loved are built.
Shape is Pill, Rounded, Square or Corner ribbon. The ribbon tucks into the corner and tilts; the other three sit where you put them.
Background has an opacity slider. A half-transparent chip lets the swatch colour read through instead of covering it, which is often better on a small tile than a solid block. Text color has no slider on purpose — half-transparent lettering on a 40px chip is unreadable rather than styled.
Two ways to set the mark, and they share one slot, so choosing either replaces the other:
Choose icon — 18 icons that ship with the app. These are tinted by Icon color.
Choose emoji — a grid to pick from, plus a field to type or paste any emoji you like. The grid is a starting point, not a list of what is allowed.
An emoji brings its own colours, so the colour field disappears when you pick one. There is nothing to set.
Under Show this badge on, pick an option and tick the values. A badge with nothing ticked reads Not assigned in the list and draws nothing.
The values you can tick come from your last sync. If one is missing, open Variant swatches and press Sync data, then come back.
Some badges should follow the product rather than a list you keep updating. Swatchfy → Settings → Badges → Automatic badges has two:
Rule | When it draws |
Sold out | On values that cannot be bought. |
On sale | On values where every variant has a compare-at price above its price. |
Every, not any — a colour where one size is discounted and three are not is not on sale, and a badge saying so sends a shopper to a price they will not find.
Each rule carries its own badge: switch it on and its text, colours and shape are right there in the panel. It does not point at a badge from your list, so there is nothing to create first.
Sold out is off by default and usually should stay off. Your sold-out styling — the strike-through or dimming from Appearance — still applies underneath, so switching the rule on gives a value both treatments at once. Turn it on only if you want both.
One swatch draws one badge. The order is fixed:
Sold out, if the rule is on and the value cannot be bought.
The badge you assigned.
On sale, if the rule is on.
Your own badge beats the sale rule because you chose it deliberately. Sold out beats everything because a shopper who cannot buy the thing needs to know that before anything else.
Where a badge sits and how big it is are set once for the whole shop, not per badge: Swatchfy → Settings → Badges → Swatch badges.
Setting | What it does |
Corner | Which of the six positions the badge sits in — three along the top, three along the bottom. |
Horizontal offset / Vertical offset | Nudges it in or out of the corner. Negative values let it overhang the swatch. |
Horizontal padding / Vertical padding | The space inside a text chip. Icons and emoji ignore it — they have no chip. |
Text size | Drives the whole badge, marks included. |
One position for every badge is deliberate. Badges set individually end up in different corners of the same row, which reads as a mistake rather than a design.
If your storefront is translated, each badge's text can be too. Beside Badge text there is a Language for this text picker: choose a language and type the wording for it. Leave one empty and that language falls back to your default text — a shopper never sees a blank badge.
Icons and emoji need no translation.
On the product page:
swatch rows
dropdown rows, where the badge sits inline at the end of the line instead of overlapping the value name, and on the closed dropdown for whichever value is selected
Not on collection or product cards. A card swatch is small, and that corner usually already holds your theme's own sale badge — two tags fighting over one corner reads as a fault rather than a feature.
Not on product group rows. A group links separate products, and a badge is assigned to an option's values — there is nothing on a group member to assign one to.
