Product labels

Product labels are visual indicators that highlight important and promotional product details.

What are product labels?

Product labels are visual indicators that highlight specific attributes of a product. They are used to communicate important details such as low stock, new arrivals, products with low inventory or products that are sold out or have price reductions. These labels help customers to identify and understand key aspects of a product quickly, making their shopping experience more efficient. By utilizing product labels effectively, Shopify store owners can enhance product visibility, create a sense of urgency and drive sales. When enabled, the labels are displayed over the product image in product cards and can also be shown on the product form.

Product cards are limited to displaying only two labels at any one time. Having more labels would have an impact on the product image presentation and could negatively affect conversion.  For this reason, there is a priority order in which the labels are displayed. Preorder has the first priority, followed by Sold out, Low stock (for single variant products), Sale, New and Custom. 

Tip

Mini product cards such as those shown in the complementary product block do not display labels as there is insufficient space.

How to set up product labels

In order to fully set up product labels they must first be enabled and configured within the Theme settings. 

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Select the labels that are to be active on the store. For example, to enable the New product label select the Show "New" label setting. 
  3. Choose the rules to manage the labels, for example the Sale label type, New label method or Low stock threshold.
  4. Set the Background, Text and decide whether to Show border for each label type.

Tip

Labels can have coloured borders. They can also have partially transparent backgrounds.

Sale label 

Sale labels can be shown for products that are on sale. In Shopify a product is on sale when the price is lower than the Shopify Compare-at price. Prices are set using the product editor in the Shopify admin area. Choose to show the reduction as text, a percentage discount or value. 

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Select Show "Sale" label.
  3. Set the Type for this label, choosing from Simple text, Percent off or Money off.
  4. Set the Background and Text colors.
  5. Choose to Show border and select the color for the Border.

Sold out label 

Displays on products when inventory is zero and inventory tracking is enabled on the product set up in the Shopify admin area. 

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Select Show "Sold out" label.
  3. Set the Background and Text colors.
  4. Choose to Show border and select the color for the Border.

Low stock label

This label is only used for single variant products and shows the quantity in stock. It displays a label over the image on the product card when the stock level is below the Low stock threshold set in the Product labels settings.

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Select Show "Low stock" label.
  3. Set the Background and Text colors.
  4. Choose to Show border and select the color for the Border.

Note

The Low stock label is only shown for products with one variant.

New label

A New label can be useful to alert customers to new designs and product drops. The Beautify theme offers three methods for controlling which products show a New Label. The Collection method uses the collection name or "handle" and offers the advantage of speed to setup. The Tag method gives individual control on a product by product level. The Date method is automatic and so requires no ongoing maintenance. It uses the creation date of the product to determine if the New label is shown

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Select Show "New" label.
  3. Choose the logic the theme will use to show the "New" label. Select the "New" collections for the collection method or add a "New" tag for the tag method or set the Days ago created for the date method. 
  4. Set the Background and Text colors.
  5. Choose to Show border and select the color for the Border.

Preorder label

This label displays on a product if that product is using a product page template that contains the word 'preorder' in the name of the template. The Beautify theme comes with a Preorder template already configured to assist with this set up. Templates are assigned to products in the Shopify admin under each product or by bulk editing products (search Edit products in bulk in Shopify's help guides). 

Steps

  1. Open the Theme Editor, click on Theme settings and open the Product labels settings.
  2. Go to the Preorder label settings. The label is shown based on the template name so it cannot be switched on and off in the settings. 
  3. Set the Background and Text colors.
  4. Choose to Show border and select the color for the Border

Custom labels

The Beautify theme includes the option to create custom labels in three different color choices. The labels are managed using a metafield which means individual products can display different text.

The three custom labels use product metafields with the namespace and key 'theme.label', 'theme.label_2' or 'theme.label_3' and should have a single value of type Single line text. Edit the metafield in the product to add custom text to the label you wish to show.

Note

Custom labels are a more complex feature that requires a base level understanding of how metafields work. For support on metafields, refer to the Shopify metafields guide.

Steps

  1. In the Shopify admin area, create Single line text product metafield with the namespace and key 'theme.label',
  2. In the Shopify admin area, create Single line text product metafield with the namespace and key 'theme.label', 'theme.label_2' or 'theme.label_3'. Choose the type One value. Do not select List of Values or you may get additional characters around your label. By default, Shopify creates new metafields with the namespace 'custom'. To change this to theme, click on the namespace.key text (probably custom.label) and edit it to be theme.label. 
    Label-initial-state.png
    Theme-label-screenshot-new.png
  3. In the Shopify admin area, go to Products and open the product where you wish to show a label.
  4. Scroll down to the Product metafields section and enter the label text required for that specific product in the relevant metafield.Exclusive-label.png
  5. Open the Theme Editor, click on Theme settings and open the Product labels settings. There are three different custom labels - Custom label 1, Custom label 2 and Custom label 3 each of which offers a different color scheme.
  6. Select Show custom label for the relevant label. 
  7. Set the Background and Text colors.
  8. Choose to Show border and select the color for the Border.

How to show product labels on the product page

Add the Product labels block to show product labels on the product page.

Steps

  1. Open the Theme Editor and select Products from the dropdown at the top and choose a product template (e.g. default product).
  2. Add the Product labels block in the Product section.
  3. Choose whether to Show sale label. As the price discount is displayed next to the price in the price block, this label may be superfluous.
  4. Open Theme settings > Product labels where you can choose which labels are shown and set the colors. These settings apply to the product labels on the product page and on the product card. 

Tip

The same product label text will be displayed for all product variants. 

FAQs

How do I change the label text?

To change the Sale, Sold out, Preorder, Low stock or New label text, go to Edit default theme content, search for the text or look in the Products > Labels tab. Update the text to reflect your preferences. 

Caution

When editing the Sale label or Low stock label text be sure not to change the liquid code shown in between double curly brackets e.g. {{ amount }}

The text shown on Custom labels is edited in the appropriate metafield: 'theme.label', 'theme.label_2', 'theme.label_3'.

Bring your business ideas to life with Shopify

Can't find what you're looking for?

Our support staff are here to answer your queries, so don't hesitate to write to us!

Contact us