Shopify Apps

  1. Home
  2. Docs
  3. Shopify Apps
  4. Product Labels Pro App: FAQs
  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.
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.

Also, you can choose a position and label ratio as above.

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

[Notes]

  • 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.
  • In Content, you can enter {sale} to automatically display the discount percentage for on-sale products or enter {inventory} to automatically display the status: In Stock or Sold Out.
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.

Finally, remember to save all settings.

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

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

+ Set this field to Instock to not show the label for out-of-stock products.

+ 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.

  • 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.

  • 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?