Collections: Add 'New', 'On Sale' and other labels to your products

Product labels

The Venue theme originally shipped with automatic product labels that display 'Sold Out' when a product is out of stock and 'On Sale' when a product is reduced in price. These are displayed on product grids such as collection pages and home page collections.

From  V4.1.0 / 24 January 2019 we added the ability to add custom labels such as 'Best Seller' or 'Hot'. We also added some other useful features listed below. 

Pro tip: Your store can display a mix of 'Sold Out' 'On Sale" and custom text labels at the same time.

A. Display a label when a product is 'sold out' or 'on sale'

1

Log in your Shopify store admin.

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Once you are in the theme editor screen click the Theme Settings tab, then click the Products section

5

When the Products section is open scroll down until you see the Product Labels area, simply make sure the Enable product labels checkbox is checked. This is all you have to do to enable/disable both 'Sold Out' labels and 'On Sale' labels.

6

As an extra step you can change the 'Sold Out' label style to display a percentage discount (-50%) instead of the words 'On Sale'. Use the drop down to do this.

7

Remember to save and then check your work on your live store.

If you want to use a different term than 'Sold Out' you can change the text in the languages area of your theme - please see the article linked at the bottom of this page

B. Display a label when a product has been newly added to your store and control the time period.

1

Log in your Shopify store admin.

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Once you are in the theme editor screen click the Theme Settings tab, then click the Products section

5

When the Products section is open scroll down until you see the Product Labels area, simply make sure the Enable product labels checkbox is checked. 

6

Scroll down and make sure the Show 'New' label is also checked. You can now decide how long a product is considered 'New' i.e if every time you add a new product to your store you'd like it to display a 'New' label for two weeks, move the Number of days slider to 14day.

After 14 days the label will be automatically removed.

7

Remember to save and then check your work on your live store.

If you want to use a different term than 'New' (such as 'Just Added') you can change the text in the languages area of your theme - please see the article linked at the bottom of this page.

C. Display some custom text in a product label

Custom label text is a powerful way to promote certain aspects of your products to customers, such as 'Last Few' or 'Bestseller'

1

Log in your Shopify store admin.

2

Click on Online Store then Themes in the side menu to get to the themes area of your admin.

3

Click the Customize button next to your active theme to go to the theme editor.

4

Once you are in the theme editor screen click the Theme Settings tab, then click the Products section

5

When the Products section is open scroll down until you see the Product Labels area, simply make sure the Enable product labels checkbox is checked.

6

Scroll down until you see the Custom label text text box. Add the custom word(s) you want to appear in your labels here. It's best to keep these as short as possible as too many or very long words might overlap a lot of your product image. If you leave this text box empty this feature will be disabled.

7

Next use the collection picker to select which collection of products on your store you wish to display custom labels. A powerful way to do this might be to set up an automated collection based on certain conditions. 

8

Remember to save and then check your work on your live store.

D. Change the color of your product labels

We will soon be releasing an update to the Venue theme where you can control the color of your labels independently of your brand and button colors. In the meantime you can use the following CSS snippet to control the label background and text color. 

To find out how you add custom CSS to your theme please see the article linked at the bottom of this page.

.label--brand {
	background: #da1111;
}
.label--brand .label__text {
	color: #fff;
}