Product Labels & Badges
Labels draw attention to individual items: The store itself adds labels such as “New,” “Top,” or a sale badge; you create your own badges like “Organic” or “Handmade”; and product labels display information such as an energy efficiency rating with an explanation. This guide explains where each label comes from, how to control the color, order, and number of labels, and what legal requirements you need to keep in mind.
At a Glance
- Automatic: The store generates “New,” “Top,” the “Sale” badge, “Free Shipping,” “Bundle,” “FSK 18,” and “B-Grade” based on the item’s properties.
- Custom Badges: Under Products → Product Badges, you can create badges with text, symbols, or images, custom colors, and a dedicated page listing all items.
- Product labels: Under Products → Product Labels, as an image or text, with a description that opens when clicked.
- Number: By default, lists display a maximum of three badges per item on desktop and two on mobile. The “Sale” badge appears first, followed by custom badges.
- Be honest: Labels are promotional statements and must not mislead customers.
In this guide
Not covered in this guide: Creating products, delivery times, and the basics of product tags (Guide: Creating & Managing Products), special offers and strikethrough prices (Guide: Prices & Customer Groups), as well as labels for the Google product feed (Guide: Google Merchant Center & Product Feed).
What Does Each Label Mean?
A badge is a small icon displayed on the product image or next to the price. A product label is a marker with an image or text that includes an explanation. The table shows where each label comes from and where you can set it up.
| Label | Where it comes from | Where to set it up |
|---|---|---|
| “New” | “Top New” label or the item’s creation date | Item screen, Products → Top New Products, see “New” label |
| “Top” | "Highlight" label | Product screen, Products → Highlights |
| Sale badge, such as “Special Offer -20%” | Special offer or category discount | Products → Special Offers, Product Template, see Sale Badge |
| “Free Shipping,” “Bundle,” “18+,” “B-Grade” | Product Attributes | Product Details, see Automatic Labels |
| Custom badges | Your assignment to the product | Products → Product Badges, see Custom Badges |
| Product label | Your assignment to the item | Products → Product Labels, see Product Labels |
| “High Demand” | Number of page views in 24 hours | Settings → Design → Product Detail View, see “High Demand” |
Badges appear in the list at the top of the product image, and the price label appears next to the price; the lamp has reached the maximum number of three badges, so its own badge appears only on the product page. Click to enlarge.
In category lists, search results, and product blocks, the badges appear on the product image; on the product page, they appear above the price. Clicking a badge opens the page with all items that carry it; see Badge Pages.
Automatic Badges
These badges do not require separate management. The store applies them as soon as the item meets the condition and removes them when the condition is no longer met.
| Badge | Appears when … | Click leads to |
|---|---|---|
| "New" | "Product as New Release/Top Pick (Top-New)" is enabled and falls within today’s "Top-New from/to" time frame, or the item was added in the last few weeks; see the "New" label | "New Products" page |
| “Top” | "Product as Highlight" is enabled and falls within the "Highlight from/to" time period today | "Our Highlights" page |
| Sale Badge | A special offer or category discount applies and the customer sees prices; see “Sale Badge” | "Special Offers" page |
| "Free Shipping" | "Free Shipping" is enabled in the "Prices" tab, and the "Free Shipping" shipping module is available for the visitor’s country of delivery and this store.from 4.9.135 | "Free Shipping" page |
| "Bundle" | The item is an active bundle, and “Show bundle products in category listings” is enabled for the bundle; only in lists and product blocks | "Bundle Products" page |
| "FSK 18" | the “FSK 18” toggle in the “General” tab is enabled | "FSK 18 Products" page |
| "B-Grade" | "Used/Defective (B-Grade)" is selected in the "General" tab | "B-Grade Products" page |
| "Exclusive Offer" | the item is assigned to the logged-in customer as a personal offer. Such assignments originate from imported data; there is no form for this in the backend. | “Custom Offers Just for You” page |
Change Text
“New,” “Top,” “Free Shipping,” “Bundle,” “FSK 18,” “B-Grade,” and “Exclusive Offer” are fixed store texts. You can change them under Tools → xoLanguage by entering a custom value, such as changing “New” to “New Arrival”; see the Languages & Translation Guide.
Colors
The colors of the automatic badges are determined by the design, with sufficient contrast. There is no setting for this in the backend; see Colors.
“Product Promotion” in the product listing does not add a badge. It adds the product to the promotion page; see the guide on Creating & Managing Products.
Controlling the “New” Label
“New” can be applied in two ways: You can mark an item manually, or the store can automatically mark every item that was recently created. Both can apply at the same time.
Manually on the product
In the product screen, under the “General” tab, enable “Product as New Arrival/Top Pick (Top-New).” Use “Top New from/to” to set the time period. Empty fields mean: no start date and no end date. After the end date, the badge disappears automatically, but the toggle remains on.
For multiple items
Under Products → Top-New Products, you’ll find all marked items with “Start” and “End” dates. Use “Add” to select an item and set “Starts on” and “Ends on.” “Delete” removes the mark, but the item remains in the system.
Automatically by creation date
If Settings → Design → Product Listing → New Arrivals and Shopping Tips “Top-New” is set to “ true ” (default), every item created in the last few weeks will display “New.” The number of weeks is determined by “Duration of ‘New’ Product Label” in the same group; the default is 4.
Typical Settings
| You want to… | Here’s how |
|---|---|
| Show only selected items as new | "New Arrivals and Shopping Tips 'Top-New'" on false and manually mark the items |
| Shorten the duration of the “New” label | Reduce the “Permanent ‘New’ Product Label” duration, for example to 1 week |
| Exclude a single new item | This can only be done manually: Go to “New Arrivals and Buying Tips ‘Top-New’” on false and mark the remaining items manually |
| Turn off “New” entirely | Set the automatic feature to false and delete all markings under Products → Top-New Products |
This same setting determines which items the “New Arrivals & Buying Tips” block displays: those marked with true and newly created items, or—with false —only the marked ones. After a large import, the automatic feature will mark all newly created items as “New”; see the guide “Create & Manage Products.”
Sale Badge and Strikethrough Price
If the customer pays less than the regular price for their customer group, the store displays a red badge with the offer name and the savings as a percentage, such as “Special Offer -20%.”
- The badge appears for special offers and category discounts.
- If the savings amount to 0 percent when rounded, the store hides the badge.
- If a customer group does not see any prices, no badge appears.
- It has the highest priority and always appears first; see Order & Number.
The Prices & Customer Groups guide explains where the offer name, strikethrough price, MSRP, and “The offer ends on …” come from, and what to consider when comparing prices to previous ones. To create special offers, go to the “Special Offers” section there.
Creating Custom Badges
Custom badges highlight features that the store doesn’t recognize, such as “Organic,” “Handmade,” or a certification seal. You create a badge once and assign it to as many items as you like.
- Under Products → Product Badges, open the “Insert” tab.
- Enter a “Badge Class,” such as
bio. This field is required and serves as a technical name. Use lowercase letters, numbers, and hyphens, and create a separate class for each badge. - Select the appearance: a “Badge Icon” from the icon selection, the two colors, and, if desired, a “Badge Image.”
- Enter the “Badge Text” in the tab for each language. In the default language, you need either text or an icon. The store will fill in empty fields for other languages with the value from the default language.
- Click “Insert” to save. Then assign the badge to the product; see “On the Product.”
The “Bio” badge in the badge template: Class, icon, both colors, top position, text, title, and the details for the badge page in the language tab. Click to enlarge.
The fields in the badge template
| Field | Meaning |
|---|---|
| “Badge Class” | Required field, technical name. The shop capitalizes it, replaces spaces with hyphens, converts umlauts, and removes other characters, including underscores. |
| “Badge Icon” | Icon preceding the text, selected from the icon library |
| “Badge Character/Text Color,” “Badge Background Color” | Badge colors; see Colors |
| “Additional CSS” | Additional styling; instructions separated by semicolons, for example text-transform: uppercase; font-weight: 700 |
| “Badge Position” | “Left” or “Right” at the top of the product image in lists |
| “Show badge in the shopping cart” | Displays the badge on the item in the shopping cart and in the sidebar shopping cart; disabled by default |
| "Badge Image" | Image from the “badges” folder in the file manager. If one is selected, the store displays the image instead of the icon and text. |
| “Badge Text” | Label for each language |
| “Badge Icon Title” | Text that appears on mouseover and the alt text for an image badge. If left blank, the store uses the badge text. |
| “Badge Tooltip (mouseover)” | A longer explanation that appears when you hover over the badge |
| “Badge Filter Note …” | Text, meta tags, and URL of the badge page; see Badge Pages |
Left or right
“Left” is suitable for text badges; “Right” is for image badges such as seals or manufacturer logos. If an item has a right-side badge, the tile hides the “Add to Wishlist” and “Compare” buttons in that location. In the list view and in the two-column mobile view, a right-aligned badge shifts to the left. On the product page, all badges appear side by side above the price.
Image Badges
The store displays a badge image as a 35-pixel circle with a white border and crops it accordingly. Use a square image with the motif centered. Enter a “Badge Icon Title”: This serves as the alternative text for screen readers. The form still requires a badge text or an icon. The text labels the badge in the product selection and on the product page.
In the Shopping Cart
“Show badge in the shopping cart” applies only to custom badges, such as “Custom-made” or “Non-returnable.” The shopping cart automatically marks special offers, free shipping, and “FSK 18.”
The list under Products → Product Badges shows the “ID,” class, and a “Preview” for each badge, along with the number of items in the “Products” column. Clicking the number opens the item overview showing exactly those items. “Delete” removes the badge from all items; the store first displays the number of affected items.
Colors and Appearance
You can set the colors of your own badges in the badge template. The colors of the automatic badges are part of the design.
Custom Badges
- Under Products → Product Badges, open the badge by clicking “Edit.”
- Set the “Badge Icon/Text Color” and “Badge Background Color” in the color picker.
- Click “Update” to save. The store will reload the design the next time the page is loaded. If you still see the old color, reload the page using Ctrl + F5.
Automatic Badges
In the default design, “New” is dark blue, the Sale badge is dark red, and “Top” and “Free Shipping” are white with dark text. These colors have been tested for readability and cannot be customized in the backend. Using different colors constitutes a design customization; please contact us if you’d like to make changes.
Pay attention to contrast: Dark text on a light background—or vice versa—remains readable even on mobile devices. For regular text, the Web Content Accessibility Guidelines (WCAG) recommend a contrast ratio of at least 4.5 to 1.
Badges and Labels on Products
You can assign badges and product labels in the product details screen under the “General” tab, below the “Highlight” and “Top New” sections.
In the “General” tab, the item’s badges and product labels are listed under “Highlight” and “Top New”; the pencil and plus icons open the management and selection options, respectively. Click to enlarge.
“Product Badges”
- The “Add Badge” plus button lists all badges that the product does not yet have.
- You can change the order by dragging the entries. This order determines how they appear in the store.
- The trash can icon removes a badge from the item.
- The “Edit Badge” pencil icon opens the badge management window.
“Product Label”
- "Add Label" first prompts you for the label category, then for the value.
- The pencil icon next to a label opens “Edit Custom Label Description”: a custom text specific to this item; see Label Description.
- "Edit Label" opens the label management screen in a new window.
The store will not apply assignments and order until you save the item. If you copy an item as a duplicate, the copy will inherit badges and labels, including custom label descriptions.
Multiple Items at Once
For multiple items, use a CSV importer; see the Import & Export Guide:
- “Product Badges”: the IDs of the badges separated by commas, for example,
1,2,4. The order in the cell is the order on the product. The IDs are listed in the badge list. - “Product Labels”: Pairs of label category and label value, such as
1:1,1:4,2:10. The IDs are listed in the tables under Products → Product Labels.
del, removes all badges or all labels. When importing labels, the item’s individual label descriptions are lost; please re-enter them afterward.Order and Number
To ensure the product image remains visible, the store displays only a limited number of badges. If an item meets multiple conditions, the more important ones take precedence.
Order
- Sale Badges
- “Exclusive Offer”
- “Bundle”
- “New”
- “Free Shipping”
- “Top”
- “18+”
- “B-Grade”
- Custom badges, listed one below the other in the order they appear on the item
Maximum number
Under Settings → General → Maximum Values:
- “Max. Badges per Product Listing (Desktop),” factory default 3
- "Max. Badges per Product Listing (Mobile)", factory default 2
- “Max. Badges on Product Detail Page (Desktop),” default value 5
- “Max. Badges on Product Detail Page (Mobile),” default 3
0 ” means unlimited, not “none.”Badge Pages and URLs
Each badge links to a page listing all items that carry it when clicked. For your own badges, you can design this page yourself, for example, as a “Organic Products” theme page.
The page for a custom badge at the address /badge/organic-products.html, with the text from “Badge Filter Note at the Top” displayed above the product list. Click to enlarge.
| Field in the badge’s language tab | Effect on the badge page |
|---|---|
| “Badge Filter Note (Top),” “Badge Filter Note (Bottom)” | Text above or below the product list, with editor |
| “Badge Filter Note Meta Tags – Title,” “… – Description,” “… – Keywords (comma-separated)” | Page title and description for search engines |
| “Badge Filter Note SEO – URL” | Name in the URL, such as bio-produkte for /badge/bio-produkte.html. If left blank, the page will have a URL with a parameter. |
- The heading reads “Products with the badge” with the badge next to it.
- You can change the “
badge” portion of the URL under Settings → SEO / SEA → SEO Settings → URL Prefix for Product Badges. This only works with “Rewrite” type SEO URLs; see the SEO & Redirects Guide. - The automatic badges link to fixed pages such as “New Products” or “Special Offers”; see Automatic Badges.
Product Labels
A product label consists of a label category—such as “Energy Efficiency Class”—and its values—such as “A” through “G”—each displayed as an image or text. Select the appropriate value on the product page.
1. Create a label category
Under Products → Product Labels, in the “Insert” tab, enter the “Label Name” for each language and set “Price Label,” “Multiple Selections Allowed,” and “Sort Order.” Click “Insert” to save.
2. Create values
Open the category by clicking “Edit.” Under “Label Values,” click “New Entry” to create a value: “Sort Order,” “CSS Class,” and—for each language—“Label Value,” “Label Image,” and “Label Description.” Click “Update” to save.
A label category as a price label with three values; “New Entry” creates another value, and “Edit” opens the image, CSS class, and label description for a value. Click to enlarge.
Where the label appears
| “Price Label” | Display in the store | Typical for |
|---|---|---|
| Yes | Directly next to the price: in lists, on the product page, in the variant list, in the shopping cart, and in the sidebar shopping cart | Symbols that should appear next to the price, such as an energy efficiency rating |
| No | On the product page in the checkout area above the price, not in lists or in the shopping cart | Material, care instructions, certifications |
- If there is no label image, the store displays the text “Label Category: Value,” such as “Material: Genuine Leather.”
- “Multiple selections allowed” permits multiple values from the same category for a single item. Without the toggle, “Add Label” no longer offers the category once a value has been selected.
- A category with no values does not appear as a selection option for the item.
- The labels appear in the order of the categories’ “Sorting,” and within each category, in the order of the values’ “Sorting.”
- If you delete a category or a value, the store will also remove it from all items.
Label Images in the Correct Size
The store displays a label image at its actual pixel size and does not specify a fixed size. Therefore, save images at the exact size you want them to appear in the store, and place them in the “label” folder in the file manager.
- If any edge is larger than 100 pixels, the store will display a warning when you save the value. It will save the value anyway.
- SVG files are also allowed. If an SVG file does not specify a width and height, the browser displays it at 300 pixels wide. Therefore, export SVG files with specified width and height.
- The shop assigns the “CSS class” of an item to the label image. A rule such as `
.eu-label { height: 44px; width: auto; }` in your design’s CSS then limits the height. Please contact us for assistance with this.
Label Description and Link to a CMS Page
Each label value includes a “label description” with an editor. On the product page, it appears when the customer hovers over the label with the mouse, and in a pop-up window when they click on it—even on a mobile device.
Linking a label
A label does not have its own link field. You specify the path to a CMS page—such as “What Do Our Seals Mean?”—in the description:
- Open the CMS page in the store and copy its address.
- Under Products → Product Labels, edit the label value.
- In the “Label Description,” write a short text, such as “More about this seal,” select it, and turn it into a link using the copied address.
- Click “Update” to save. The link can be clicked in the window that opens when you click the label.
Custom Description per Item
If you want an item to display different text—such as the inspection date or a link to the data sheet—open the pencil icon next to the label in the item screen. The “custom label description” replaces the general description of the value for this item. If left blank, the general description applies again.
The “High Demand” Notice
If a product page has been viewed more often than a value you’ve selected in the last 24 hours, the shopping area displays a notice with a flame icon: “In the last 24 hours, … people have viewed this product.”
On the product page, the “High Demand” notice, the price label, and all badges appear above the price—including your own badge, which didn’t fit in the list. Click to enlarge.
Enable and Disable
Under Settings → Design → Product Detail View → High Demand Badge, enter the number of views at which the notification appears. The default setting is 100. Use “ 0 ” to turn off the notification.
What’s Counted
The shop counts the page views recorded by its visitor counter. If someone loads the page five times, that counts as five views. If Settings → Interfaces → SEO/SEA → xoStats (Shop Statistics) → Visitor Counter: Count bots yes/no is set to “ true,” search engines are also included in the count.
%s for the number as is. Alternatively, choose a value high enough that the statement is accurate for your customer base, or disable the message altogether.Other indicators and what they are not
Some notes on the product page look like labels but come from other areas of the store.
Free Shipping
The shop only applies the “Free Shipping” badge when the “Free Shipping” shipping module applies to the item. Setup: Shipping & Delivery Guide.
Reward Points and Free Items
There is no badge for this. The store lists the points or “free starting at…” as text next to the price; see the Bonus Points & Free Products Guide.
AI-Generated Images
You should add the “AI-generated” label directly to the image itself, not via a badge; see the Images & Media Guide.from 4.10
EU Warranty and GARAN Label
The store issues the warranty notice and the GARAN label itself. Do not recreate them as product labels; see the EU Warranty Label Guide.
Google Labels
The custom labels custom_label_0 through custom_label_4 are only included in the product feed for your campaigns. No one sees them in the store; see the Google Merchant Center Guide.
Delivery Time
Delivery time and availability listed on the product page are not badges. You manage them within the product listing; see the guide on Creating & Managing Products.
Keep Labels Accurate
Badges and labels are promotional claims. Under the German Unfair Competition Act (UWG), they must not mislead customers. Therefore, check regularly to ensure that every label is still accurate.
| Labeling | What to Look For |
|---|---|
| “New” | Only as long as the item is actually new to the product lineup. Keep the duration short and check after each import to see which items carry the label. |
| Sale Badges, Strikethrough Price | Special rules apply to the comparison price for price reductions; see the Prices & Customer Groups Guide. |
| “High Demand” | The store counts page views, not people. Adjust the text or disable the notice; see “High Demand.” |
| Seals and Awards | Only with valid proof and as permitted by the issuer. A seal used as a badge image belongs on the items to which it applies. |
| “Free Shipping” | Must match the actual shipping costs. Check the countries listed in the shipping module. |
This section is for informational purposes only and does not constitute legal advice. Consult your legal counsel regarding specific labeling requirements.
If a label is missing or appears incorrect
| You’ll see … | Common cause | Solution |
|---|---|---|
| Your own badge appears on the product page but not in the list | Maximum number of badges in the list has been reached; your badges are at the bottom | Increase “Max. Badges per Product Listing”; see Order & Number |
| Badge is gray instead of your colors | Text and background colors are the same | Select two different colors; reload the page with Ctrl + F5 |
| The “Right” badge appears on the left | List view or two-column mobile view | Intended behavior; “Number of products side by side (mobile)” under Settings → Design → Product Listing |
| The “Wish List” and “Compare” buttons are missing from the tile | The item has a “Right” badge. | Set the badge to “Left” |
| "New" appears on almost all items | Automatic based on creation date, for example after an import | Shorten the duration or disable the automatic setting; see “New” label |
| "New" is missing despite the "Top New" label | The “Top New From/To” time period has expired or has not yet begun | Adjust or clear the data |
| "Free Shipping" is missing | "Free Shipping" module is disabled or not enabled for the visitor’s shipping country | Check the module and shipping zone |
| "Sale" badge is missing | Discount is less than 0.5 percent, or the customer group cannot see prices | Check the offer price and group |
| Label image is huge | Full-size image or SVG without width and height | Reduce image size or save SVG with dimensions |
| The badge page has a URL with parameters | "Badge Filter Note SEO - URL" is empty | Enter a name for the URL |
Frequently Asked Questions
How do I control the “New” label for products?
Can I link a product label directly to a CMS page?
Where do I change the color of the product badges?
Why doesn’t my badge appear in the product list?
Why do all items have the “New” badge after an import?
Can I change the “New” or “Top” text?
How do I assign the same badge to multiple items?
How do I remove a badge from all items?
Why is my label image so large?
What is the difference between a badge and a product label?
Why is “Free Shipping” missing from a marked item?
Does “High Demand” really count people?
Can I also display a badge in the shopping cart?
Further Guides
We’ll help you get set up
We’ll work with you to create badges and product labels, customize colors and label sizes to match your design, and verify which labels appear in your listings.
Contact Support Now