1. Home
  2. Docs
  3. Shopify Product Labels & Badges
  4. General
  5. How to use FREE Product Labels Plan?

How to use FREE Product Labels Plan?

Please follow:

1. Enable the 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.

Please note that the FREE Product Label plan is limited to 2 labels/badges.

When you reach the limited number, the Add New Label/Add New Badge button is disabled. To add more labels/badges, please disable the unwanted ones or upgrade your plan.

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

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.

[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.
  • The two variables {start} / {end} are only applied for Advanced ($10/month) and Platinum ($20/month) plans.
  • 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.

Finally, remember to save all settings.

[Note] Upgrade to Pro or Advanced Plan to get more convenient conditions and features:

  • Unlimited labels
  • 200+ FREE samples
  • Custom text labels
  • Labels for specific customer groups (based on tag)
  • Labels for available and sold-out products
  • Labels for discounted products
  • Country restriction per label
  • Label visibility within a period
  • Lifetime update
  • Premium support

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 the 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 1 No

How can we help?