1. 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.
2. Types of product labels and badges in Eurus theme:
There are 5 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.
- Pre-order Label: Indicates products available for pre-order.
3. How to set up labels and badges?
a) 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:
For each product card, you can decide to put the label ON the product image, or OUTSIDE the product image, with several options:
- ON the product image:
- Top left
- Bottom left
- Top right
- Bottom right
- Custom position
- OUTSIDE the product image:
- Below image
- Bottom of card
- Next to price (for Sale label only).
Note: For the Pre-order label, you can only have the options to put it ON the product image.
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.
b) 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
c) 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.
d) Set up Pre-order label
To set up the Pre-order label, please follow these steps:
- Choose an icon to display in front of the label text.
- If you want to use a custom icon, input the SVG code under the "Custom Icon" option. For support with custom SVG code, reach out to customer support.
- Enter the text for the Pre-order label. You can use special codes such as {sale} for discount percentage, {qty} for total quantity, {price} for product price, etc. Use HTML tags like <br /> to break lines or <b>your content</b> for bold text.
- Select the label type (Square/Rounded corners/Rounded). Set the font size scale for both desktop and mobile versions by using settings “Desktop font size scale” or “Mobile font size scale”
- Upload images if you prefer to use a visual label instead of text.
- Adjust the size and opacity settings for both desktop and mobile versions.
- Choose the label’s position on the product image (Top left/Bottom left/Top right/Bottom right/Custom position) and customize horizontal and vertical position as needed (Used with Custom position only).
- Configure the background, text, and border colors for both light and dark modes to match your store's theme.
By following these steps, you will be able to successfully set up and customize Pre-order labels for your Shopify store.
4. 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.
5. 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.