Badges

Theme settings - Badges

Badges are visual labels used on product cards/product page to convey important information at a glance. They enhance the shopping experience by drawing attention to key details about the product's status, such as promotions, stock levels, or unique features.

• Custom badge: A personalized label that highlights unique product features or categories, such as "New Arrivals" or "Limited Edition." Requires adding a specific tag in the product settings.

• Sale badge: Indicates products currently on sale. Designed to attract attention and boost conversions by showcasing promotions.

• Sold out badge: Appears on products that are out of stock or when all variants are unavailable. Helps manage customer expectations by clearly indicating unavailable items.

A. Settings:

1. Badge position

• Top left: Displays the badges on the top-left corner of the product image.

• Top right: Displays the badges on the top-right corner of the product image.

• Below image: Positions badges beneath the product media, aligning with the content block of the product card.

2, Sale badge

The Sale badge can be customized to display the type of discount or a custom message.

• Show discount amount: When checked, replaces the default "ON SALE" text with the specific discount amount. For example: "SAVE 11%".

• Discount type: Defines the format of the discount displayed on the badge:

  • Percentage: Displays the percentage discount, e.g., "SAVE 11%".

  • Amount: Displays the discount in the store’s currency, e.g., "SAVE $100":

  • Text: Displays static text, e.g., "ON SALE".

• Background: Choose the background color of the sale badge.

• Text: Choose the text color for the sale badge.

3, Sold out badge

• Background: Choose the background color of the sold-out badge.

• Text : Choose the text color for the sold-out badge.

4, Custom badge

• To display a custom badge, add the tag _theme_custom_text in the product settings. Replace "custom_text" with the desired badge text.

• Background: Choose the background color of the custom badge.

• Text: Choose the text color for the custom badge.

How to create custom badges?

• Navigate to the product settings in your Shopify admin.

• Add a tag starting with "_theme_" followed by your custom badge text.

Example: A tag like "_theme_NEW ITEM" will display the badge "NEW ITEM".

• Save the product, and the badge will appear on its product card.

B. Badge priority rules

When a product qualifies for multiple badges, they are displayed based on a predefined hierarchy:

• Custom badge: Always takes the highest priority. If a product has a custom badge tag, it will appear first.

• Sold out badge: If a product is out of stock (or all its variants are out of stock), the Sold out badge will display, overriding the Sale badge (even if the product is on sale).

• Sale badge: Displays only if Sold out badge is applicable.

Example scenarios:

• A product tagged with _theme_new_arrivals, marked as on sale, and out of stock: The Custom badge ("NEW ARRIVALS") will display firstly. The Sale badge will also display, appearing alongside the Custom badge

• A product that is out of stock and on sale: Only the Sold out badge will appear, as it takes priority over the sale badge.

• A product that is on sale and in stock with no custom badge: The Sale badge will display.

Note: This priority system ensures badges provide clear and relevant information to the customer.