Product badges, also known as product labels or product stickers, are an effective way to highlight specific products in your store, attracting customer attention and providing valuable information.

Default badges

Sale: define the text and background colors for the 'Sale' badge.

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> This badge will be displayed if the ‘Compare-at price’ field for product is not empty. For more information on setting sale prices in Shopify, refer to this article.

</aside>

Sold out: define the text and background colors for the 'Sold out' badge.

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> This badge will be displayed when a product is not available (i.e., 0 products in stock).

</aside>

Custom badges

You can add and customize up to four custom badges to your products. To enable custom badges, you need to create a product metafield specifically for badges:

1. Open your Shopify admin.

2. Go to Settings → Custom data → Products.

3. Click ‘Add definition’.

4. Enter ‘Badge’ as the metafield name, resulting in the **custom.badge ’**Namespace and key' (important!).

5. Select the type ‘Single line text’ with ‘List of values’.

6. Click ‘Save’.

   

Once the metafield for badges is created, you can proceed to add specific badges to each product:

1. Open the desired product.
2. Scroll down to the metafields section.
3. Enter the names of your badges into the 'Badge' metafield.
4. Click ‘Save’.

Finally, connect the metafield with the custom badges settings:

1. In your Shopify admin go to ‘Online store’ → ‘Themes’ → ‘Customize’.
2. Go to ‘Theme settings’ → ‘Product badges’ → scroll down to the ‘Custom badges’.
3. Enter the names of the badges that you added to your products.
4. Click ‘Save’.

<aside> <img src="/icons/info-alternate_gray.svg" alt="/icons/info-alternate_gray.svg" width="40px" /> Please note that the name of each badge should match the name defined in the badge metafield to ensure proper association between the metafield and the custom badges settings.

</aside>

Remove badges

You can remove the sale badge by adding the following code to your Custom CSS section in Theme Settings:

.card__badges-item--sale {
  display: none;
}

Please note that this code will remove the badge everywhere in the store.

If you'd like to remove it from the Collection page exclusively, please go to Theme Editor → Collection page template → select the Collection page section and add the code to the Custom CSS field:

https://staylime.zendesk.com/attachments/token/igHTrE4lN2XlYtxKtMndDUiTd/?name=Screenshot+2024-05-22+at+17.01.37.png

© 2024 Staylime Inc.

Terms of service

Support policy

Refund policy

Getting started

FAQ

Get support