Product labels & badges

by Admin on Jan 26, 2024

What are labels and badges?

Product labels and badges in the Eurus Theme are visual indicators added on product cards and product pages, presenting key information and ongoing promotions. These labels aim to assist customers in quickly identifying important details about the products.

Types of product labels and badges in Eurus theme:

There are 4 types of labels available in the Eurus Theme, each serving a specific purpose:

  • Sale Label: Automatically displayed for products currently on sale.
  • Sold Out Label: Automatically displayed for products that are out of stock.
  • Image Label: Allows the upload of custom images to be used as labels.
  • Text Label: A customizable text input for various purposes.

 How to set up labels and badges?

1.Setting up all types of labels and badges:

To configure labels, navigate to Theme editor > Overlay group > Product labels and badges > Add a label block. Key setup features include:

Content:  Admin can add content to the label by inputting text into the content field and selecting an icon in the Icon configuration.

In addition to text, admin can also use the following codes in the content:

  • {sale} for the discount percentage.
  • {sale_amount} for the discount amount.
  • {qty} for the total quantity in inventory.
  • <br /> to insert a line break.
  • <b>your content</b> for bold text.

Sale label automatically displays on all discounted products (The products are set “Compared at price”).

For example: You use the code Save {sale} for the sale label. The product “Solid Wood Side Table” is 25$ for price and 30$ for “Compared at price” (discount 17%). Using the {sale} variable in the content will lead to this  result on the storefront’s sale label:

Example Content: "20% off today only!"

Result:

Or
Example Content: "Hurry! Only 15 items left in stock"

Result:

Icon Configuration: Choose an icon from our 21 premade icons, or choose None to display no icon. Admin also can custom icon (SVG code).

Display Options: Define where each label appears on the product card, with options to place it in the top left, top right, bottom left, bottom right, or using a custom positionAdditionally, admin can fine-tune label placement with Horizontal and Vertical position settings, specifically applicable when using the Custom position.
For more details of how to customize the position of  product labels, please refer to our video guide.

 

Admin also can preview these adjustments in real-time within the theme editor, ensuring seamless customization and a visual understanding of the label positions on their storefront.

Styles: Admin has the flexibility to customize label styles (square/rounded corners/rounded). Additionally, admin can adjust font size scale, label size, label opacity, and color according to their preferences. These customizable features empower administrators to tailor the visual appearance of labels on their storefront.
Please refer to our 
video guide to customize label styles.

 2.Select products/collections to apply Image and Text labels:

When selecting products or collections to apply Image and Text labels, there are two key configuration options:

Apply to Products:

  • Choose specific individual products to which you want the Image and Text labels to be applied.
  • Useful when you have particular products that require custom labels.

Apply to Collections:

  • Select specific collections to which you want the Image and Text labels to be applied.
  • Ideal for applying consistent labels to an entire collection of products.

Note: If both collections and individual products are selected, the labels will appear on items that meet either of the criteria. This follows a logical OR configuration. This provides a flexible and targeted approach, allowing you to precisely control where your Image and Text labels are displayed

3.Set up Schedule for Text label & Image label

Admin also can schedule to display text labels and image labels on selected products by using the config group “Schedule”.

Check the “Enable schedule” box to enable schedule, then you can choose the time zone you want to set the schedule on and set up exact time to start/stop showing the text/image labels.

How to show labels and badges on product cards?

Enable the display of labels on product cards by activating in the section and enabling each label block.

  • Step 1: Enable it in the section by clicking the Enable product labels and badges checkbox.
  • Step 2: Tick the Show on product card config for each label block (sale label, sold out label, etc.).

Tips:

Keep in mind that due to the limited space on product cards, it's recommended not to display more than three labels on a single product card to avoid covering the product image.

How to show labels and badges on product pages?

By adding the block in the Product labels and badges section, the labels only show on product thumbnails. In order to show labels on product page and other product sections (Quick view, Feature product), follow these steps:

  • Step 1: Enable it in the section by clicking the Enable product labels and badges checkbox.
  • Step 2: Enable the Show on product page config for each label block
  • Step 3: Go to the needed section, add a 'Labels and badges' block anywhere you'd like, then click Save.

Conclusion

Product Labels and Badges feature in the Eurus Theme provides a powerful and versatile tool to enhance your storefront's visual appeal and communicate essential information to customers. With 4 distinct types of labels—Sale, Sold Out, Image, and Text—store owners can effectively highlight promotions, stock status, and customize product representation.

For more details of how to set up product labels, please refer to our video guide.