Product labels & badges

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.

✍️ How to locate the Product labels and badges section in Theme Editor:

1. Open the Theme Editor in your Shopify admin (Online store > Themes > Customize).
2. In the left-side panel, scroll down to find the Overlay group.
3. Click on the Product labels and badges section.
4. From here, you can customize its settings.

2. Types of product labels and badges in Eurus theme:

There are 6 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.
• New product label: Show a label on the product and set an expiration date for it.

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: 3 options:

1. Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
2. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
   
3. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)

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).

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:

• Set up the icon: 3 options

1. 1. Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
   2. Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
      
   3. Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our 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.

e) Set up New Product Label

The New Product Label helps highlight recently added products based on the activation date. Follow these steps to enable and customize it:

Step 1: Add the block

In the theme editor, under Overlay >  Product labels and badges section > Add the New Product Label block.

Step 2: Set the duration & position of the label:

On the New product label setting panel:

⭐ For duration:

• Under Show label within the number of days since, you can set the start date of your label by choosing:

• • Option 1: Product creation date (default): Counts from when the product was first created in Shopify Admin.

• • Option 2: Product activation date: Counts from the most recent activation date (useful if a product was deactivated and reactivated).

• Set the Number of days (e.g., 30) to display the label.

⭐ For position:

• Toggle Show on product card and Show on product page as needed.

Step 3: Apply the Label

Select specific Products or Collections where the label should appear in the Apply to products and Apply to collections settings.

Step 4: Customize label content

• Icon: 3 options
• Choose your favorite Icon from the drop-down list. Choose "None" if you don't want any icons.
• Find your preferred one in the Icon list, copy and paste its exact name to the “Use another icon” field. (Note: Make sure to choose Icon > "Use another icon" to activate this function.)
• Add a Custom icon (SVG code). (For assistance with custom SVG code, please contact our support.)
• Content: Add a custom label text like “New” and use dynamic codes such as {sale} for discounts.

Step 5: Adjust display settings

• Label type: Choose the shapes of the label: Square, Rounded corner, or Rounded.
• Font size & label size: Adjust for desktop and mobile views.
• Positioning: Select a preset position or define custom horizontal and vertical placements.
• Opacity: Adjust transparency for visibility.

• Color: Define background, text, and border colors for both light and dark mode.

Step 6: Save the changes & preview.

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.

6. Using metafields for labels & badges.

To learn more about setting up the product labels & badges with metafields, check out this guide.

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