Badges are small labels drawn over an item's artwork. They are set per theme, from the Theme Editor, in the Badges section.
They appear in every view that shows an artwork: the grid of tiles, the list view, and the item page.
Turn badges on
Open the Badges section and enable Display badges on listings. Nothing is drawn until this is on, whatever the individual badges are set to.
Then enable the badges you want, one by one. A badge that is not enabled never appears.
Position and direction
Position places all the badges in one corner of the artwork: top left, top right, bottom left or bottom right.
Direction sets how several badges on the same artwork line up:
Vertical — stacked one under the other.
Horizontal — side by side, wrapping before the edge of the artwork.
In both cases the first badge of the list sits nearest the corner, and the order in the editor is the order on the artwork.
When each badge appears
Each badge has its own rule, which you cannot change — it reads your listings.
Preorder: Listings marked as preorder
Second hand: Listings marked as second hand
Last copy: Listings with a single copy left in stock
Discount: Listings with a compare price higher than their sale price
New: Listings in new condition, not second hand
Note: New describes the condition of the record, as the opposite of Second hand. It does not mean recently added to your catalogue.
An item with several listings shows a badge as soon as one of its listings for sale meets the rule — a release available both new and second hand can therefore carry both badges.
When no badge shows
Two cases, both intentional:
The item is sold out. Its card already reads "Sold out", so no badge is added on top.
Only sold-out listings match. Listings that are not for sale are ignored by every rule.
Label
By default a badge shows its own wording, translated into each visitor's language.
To change it, use the Label field. You can either:
Pick an entry from the list. These come from the shop dictionary, so every visitor reads the badge in their own language.
Type your own text. It is shown exactly as typed, in every language.
Clearing the field restores the badge's default wording.
Shape
Six shapes are available: Pill, Square, Rounded, Circle, Sale tag and Star.
Circle and Star are fixed-size and let the text wrap over several lines, which suits a short word such as "Sale". Sale tag draws a point on its left edge.
Colors
Background color and Text color are picked from your theme's color palette, so your badges stay consistent with the rest of the shop.
Leaving a color unset falls back to a black background and white text.
Going further with Custom CSS
Each badge carries its type, shape and corner as attributes, so you can style any of them individually from the Eshop Editor:
/* Every badge */
#app .badge { letter-spacing: 0.08em; text-transform: uppercase; }
/* One type only */
#app .badge[data-badge-type="discount"] { font-weight: 700; }
/* All the badges of a corner */
#app .badges[data-badge-position="topLeft"] { gap: 6px; }The colors chosen above are passed as the --badge-bg and --badge-color properties, so a rule of your own can reuse them.