Product labels – User Guides

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 pre-order, new in, sold out or price reductions. These labels help customers to quickly identify and understand key aspects of a product, 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.

How to set up product labels

Overlay labels show over the product image. In order to show product labels, they must first be enabled and configured within the Theme settings.

Steps

Open the Theme Editor, and click on the Theme settings and open the Product cards settings.
Within the Overlay labels settings, set the Label location for the overlay label on the product card.
Select the Overlay labels that are to be active on the store. For example, to enable the Sale product label select the Show sale label setting.
Choose the rules to manage the labels. For example the reduction type or text in Sale label content.
Within Theme Settings, open the Colors settings to choose text and background colors for each label.

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 Compare-at price. Product prices are set using the product editor in the Shopify admin area. For support on Sale prices, refer to the Shopify Setting sale prices for products guide. Choose to show sale Text or show the reduction as a Percent or Value.

On the product page, a reduction label is shown for every variant where the price is less than the Compare-at price.

On the product card, a reduction label is shown on products where the price is less than the Compare-at price for the lowest priced variant.

Sold out label

This label will be shown when inventory is zero for all variants, Shopify manages the inventory, and customers cannot purchase out-of-stock items. Refer to the Shopify Help Center for more information — Set up inventory tracking

Inventory 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 Inventory threshold set in the Overlay labels settings.

Steps

Open the Theme Editor, and open Theme settings > Product cards.
Within the Overlay labels settings, select Show inventory label.
Set the Inventory threshold for this label.

Note

The Inventory label on the product card is only shown for products with one variant.

New in label

A New in label can be useful to alert customers to new designs and product drops. The Mode theme offers three methods for controlling which products show a New in 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 as it uses the creation date of the product to determine if the New label is shown so requires no ongoing maintenance.

Steps

Open the Theme Editor, and open Theme settings > Product cards.
Within the Overlay labels settings, select Show New in label.
Choose Collection, Date or Tag as the New in method.

Collection method

Create a collection that includes the word 'New' and any products in it will display a New in label.

Note

This method uses the URL handle of the collection so may pick up any collections with New in the title e.g. New York Collection

Tag method

Go to the Shopify admin area and add New (case sensitive) as a tag for the products you wish to display the label.

Date method

Uses the product creation date. Any product that has been created (not published) will show the label as long as it falls within the number of days you have set on the New in date limit slider.

Custom label

Add labels with custom text to individual products using Shopify's metafields functionality. This is done by creating a product metafield with the namespace and key called theme.label, and using the Single line text type to create the name of the custom label.

Note

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

Steps

In the Shopify admin area, create a Single line text product metafield with the namespace and key 'theme.label'.
In the Shopify admin area, go to Products and open the product where you wish to show a label.
Scroll down to the Product metafields section and enter the label text required for that specific product in the Label metafield.
Open the Theme Editor and go to Theme Settings > Product cards and within Overlay labels check the Label location. This applies to all overlay labels.
Set the Custom text and Custom background colors for the label in Theme Settings > Colors.
Go to a Collection page or a section that displays product cards and view the product label on the product card.

Preorder label

This label is shown if that product is using a preorder template. Templates are assigned to products in the Shopify admin under each product or by bulk editing products (search Edit products in bulk in the Shopify Help Centre).

FAQs

How do I change the overlay label text?

To change the 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 reduction label or stock label text be sure not to change the liquid code shown in between double curly brackets e.g. {{ amount }}

Custom label text is edited in the metafield.

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!