Shopify Product Labels & Badges

  1. Home
  2. Docs
  3. Shopify Product Labels & Badges
  4. General
  5. How to use Advanced Product Labels Plan ($10/month)?

How to use Advanced Product Labels Plan ($10/month)?

Please follow:

1. Enable The Product Labels Pro App

After installing the app successfully, please go to Admin ⇒ Apps ⇒ Product Labels Pro to try adding catchy labels to your product pages.

*Note: After you change your theme, please come to the app again or refresh to let the app work with your new theme.

2. Add new labels/badges to the storefront.

There are two options:

  • Add New Label: The label is the image/text added to the product images.
  • Add New Badge: The badge is the image added outside of the product images, for example, under the product titles/prices/etc.

2.1. Add New Label

There are three tabs to set up the display and conditions of the label at hand.

2.1.1 General settings

Under the General:

  • Set the Status to Enable to display the label for products that meet the conditions of the label. Otherwise, choose Disable.
  • Enter the Label Name to manage the label more easily.
  • Enter an integer number from 0 to 99 to determine the Priority of the label.
  • In Show on Pages, tick to choose the page types you want to show the label on.

Notes:

  • When you set multiple labels for one product, and at the same position, only one label will be shown.
  • 0 is the highest priority.
  • If you checked the Related Products but the label does not show. Please contact us so that we can add the CSS Selector for you.
  • If you want to show the label on the first image rather than all images, please upgrade to the Advanced plan.

2.1.2 Configurations of the label

2.1.2.1. Upload your own label or choose a designed label

Now, switch to the Configuration tab.

  • You can Upload Label a custom label from your device or Select Designed Labels. We have designed many beautiful labels that are ready to use on your website.
  • You can also Delete or Change the Image.

After successfully uploading the label, you can adjust the display of the label on the product page.

  • Accordingly, choose among 9 pre-defined positions in the product thumbnail to show off the label in the most user-friendly way.
  • To optimize the display of the label, you can also pick up the Label Ratio to Fixed (px) or Percentage (%). Then, set the Width and the Height accordingly.

Notes:

  • For image labels, we recommend using the Percentage dimensions.
  • You can skip the width or the height in case the label is distorted on product images.
  • You can upload one image at a time.
  • The image must be in JPG, SVG, PNG, or GIF format.
  • The maximum size allowed is 2MB.
  • For Platinum plan ($20/month), you’re free to position your label/badge, drag and drop to move the label/badge anywhere on the product image as you want. Also, you can adjust the size of the label and the width height will be automatically updated when manipulated here:  CHECK NOW!
2.1.2.2. Create a custom-text label

Otherwise, you can create a custom label as wished.

Simply put, enter the text you want to show as a label. Choose the text stylefont colorbackground colorshadowborder-radius, and opacity freely.

You can position the text label by adjusting its Margin top and Margin left. You can choose the label ratio as above, too.

Excitingly enough, you can search a product to preview the label by clicking on Change Preview Image and select one product.

If you’d like to use Variable, hover your mouse over the question mark icon (“?” icon) in the Content section, there are bunch of variables you could use:

  • {sale}: to automatically show discount percentage for on-sale products
  • {sale_amount}: to automatically show discount amount per on-sale product
  • {inventory}: to automatically display the status: In Stock or Sold Out
  • {inventory_quantity}: to automatically show the total quantity in inventory for each product
  • {start}: Counting up from now until the set timer date (with now as 00h 00m 00s)
  • {end}: Counting down from now to the set timer date (with the set timer date as 00h 00m 00s). For example: ‘5h 40p 2s left to buy’ label, ‘5h 40p 2s left to publish’ label, etc.

When you enter the variable {inventory} or {inventory_quantity} in the Content textbox, a Sold out Textbox/In stock Textbox will appear. With variable {inventory_quantity} if the product does not track quantity, or  the product ticks both ‘track quantity’ and ‘continue selling when out of stock’, the product will display Sold out text: https://prnt.sc/13fgv2c

Countdown Timer: 

  • Countdown Timer format: Displays the time formats to be displayed instead of the {start} / {end} variable on the label.
  • Countdown Timer Date: Set the timer end date.
  • Select actions when time out: Select actions when time out: Set the time to 0h 0m 0s or hide the label

Finally, please ensure that:

  • You can create an image label or a text label at a time.
  • We recommend using the Fixed dimensions to give a consistent display of the text labels on any device.
  • After setting up one config, please reload your frontend 1-2 times to see the latest change on your site.
2.1.2.3. DESIGN YOUR OWN LABEL ON EDITOR

You can even create your own label by going to the Create Your Label.

Step 1: Choose the background of the label.

Please click on the label or choose the arrow icon on the left and choose the icon. Then you can move the label to any place and even rotate the label.

To remove the background, choose the label and use Delete.

Step 2: Add label text

You can choose the font family, text styles, text color, background color of the text, and even add stroke art.

Step 3: Save the label to use later

When you have done with the label, save it to your label lib and get back to the Configuration tab to use the label.

2.1.3. Conditions of the labels

Under the Conditions tab, you can add the label to All Products, Specific Product(s), from Specific Collection(s), or with Specific Tag(s).

Simply, you just need to search for products/collections/tags by their names or browse all products/collections/tags.

Even more, you can segment the applied products by:

  • Customers: Choose to show the labels based on the login status of customers or tags.

=> READ MORE: How to add the tag to customers?

  • Inventory Status:

+ Any: Set this field to Any to show the label regardless of the inventory status.

+ In Stock: Set this field to Instock to not show the label for out-of-stock products (including untrack-quantity product)

+ Out of Stock:  Set this field to Out of stock to only show the label for out-of-stock products. Recommended to add Out of Stock, Sold Out, Pre-order labels.

+ Stock Availability Equal or Greater than: Display labels with stock availability equal or greater than a specified quantity

+ Stock Availability Equal or Smaller than: Display labels with stock availability equal or smaller than a specified quantity

  • Discount Range

You must Enable to automatically show the label to products that are discounted within the selected range. Then, enter the numbers in From and To.

  • Price Range

You must Enable to automatically show labels on products whose prices are in a specified range. Then, enter the numbers in From and To.

Product Date/Time Published

You must Enable to automatically show labels on products with specified published time. Then, enter the numbers in From and To.

  • Visibility Date

+ You must Enable to show the label within the chosen time.

+ Next, pick up the dates and hours in From and To.

  • Country Restriction

+ Also, Enable to show the label for customers from specific countries

+ Then, search and select the countries as wished.

Finally, remember to save all settings.

Simply, you just need to search for products/collections/tags by their names or browse all products/collections/tags.

Finally, remember to save all settings.

2.2. Add New Badge

Choose Add New Badge.

2.2.1. General settings

Similar to the label, you can choose to show the badge on specific pages.

2.2.2. Configuration

Feel free to upload a badge image or create a text badge as wished.

You can choose the width and height of the badge. More importantly, choose the badge position.

2.2.2.1. Show badge under the product name

2.2.2.2. Show badge under the product image

2.2.2.3. Show badge under the selector

If you want to display the label in other places, you can choose to show the label under a selector. To do so, you have to detect the class of that selector.

Please refer to this video:

Notes:

selector

  • When you add the selector to the selector box, please add a dot before the class. Also, replace the space between two classes with a dot, too.
  • You can check the badge demo here.
  • Contact us at sales@bsscommerce.com if you choose the exact class but the label is not showing

2.2.2. CoNDITIONS

Choose products to add the badge as above.

3. Labels grid

Click on Product Labels Pro to return to Labels grid to check the result.

All saved labels will be recorded into the Labels grid for further management. You can search, edit, or delete the label as wished.

4. Labels in the storefront

Our Product Labels Pro work with:

  • All product types: Products, Products with Variants, Gift Card, and Virtual Products.
  • All pages: Homepage, Collections, Product Pages, Cart Page, and Search Results Page based on your settings.

5. Uninstallation of the app

To uninstall the app, please go to Admin ⇒ Apps => Product Labels Pro.

In case you forget to Restore all content from the theme, you can delete the code by editing the theme.

Go to file: layout/theme.liquid

Find the code {% include 'bss-product-labels-configs' %} and remove it.

Also, remove:

templates/search.bss.product.labels.liquid

snippets/bss-product-labels-configs.liquid

Then, Delete the app.

Let us know at sales@bsscommerce.com or via Live Chat if you need further help.

Was this article helpful to you? Yes No

How can we help?