Table of contents
With Automatic Product Labels for BigCommerce, you can easily add eye-catching labels, badges, and ribbons to your products — automatically based on set conditions or manually by selection. Highlight products that are new, on sale, low in stock, and more to capture customer attention instantly.
Settings
We recommend starting your app configuration on the Settings page. To do this, click the gear icon in the top left corner and fill in the following fields:
Max number of labels on one product - set the maximum number of labels that can be displayed on a single product.
Note:
- If a product qualifies for more labels than the specified number, labels will be displayed according to priority set in Label settings. For example, if you set the maximum to 2 labels but the product qualifies for 3, only the 2 highest-priority labels will be displayed.
- If the number of labels exceeds the image size, they will be cropped at the edge.
Show several labels on the same place - set it to Yes if you want to display multiple labels in the same location on the image (based on the label position settings).
Note:
If set to No, only one label will be shown per position.
For example, if a product has two labels assigned to the top-left position and one label assigned to the bottom-left, then only one label will appear in each position — one at the top-left and one at the bottom-left.
Labels alignment (available only if "Show several labels on the same place" is set to Yes) - choose whether the labels will be aligned vertically or horizontally.
Note:
The default spacing between labels is 8px on desktop and 6px on mobile.
Click Save to apply the changes.
Create and Manage Labels
To open the Labels grid, click the House icon in the top left corner.
Here, you can create, edit, and delete your labels, as well as view their status (active, inactive, or scheduled).
Click the + Create label button to start.
On the right, you'll see a live preview, and on the left, you'll find the settings. There are two tabs for configuring your label: Settings and Assignment.
Settings tab
Specify the following settings:
Active - use the toggle to activate or deactivate the label.
Schedule - set the start and end dates to schedule when the label will appear.
Name - give your label a name for internal use only. Customers won’t see this - choose a name that’s clear for you.
Priority - set the label’s priority. A priority of "1" is the highest. This is used when multiple labels are applied to one product.
Label type:
- Text Only: The label will display text without a background. Specify the text, adjust the size, color, and position on the image.
- Shape and text: The label will display text with a background shape. Choose the shape, size, color, and position, and configure the text.
- Upload Image: Upload your own image or choose from our gallery. Set the size and position of the label on the image.
Note: The maximum size for uploaded images is 2 MB. Image formats supported: .png, .jpg, .webp, .gif., .svg, .avif.
Label text - You can manually enter label text and adjust the size, color, and position on the image.
Or You can insert the following variables directly into the Label Text field:
- {DISCOUNT_PERCENT} Displays the product discount as a percentage. Example: 30%.
- {DISCOUNT_AMOUNT} Displays the monetary value of the discount. Example: 30 $.
- {STOCK} Displays the current stock quantity for the product.
Note: Inventory tracking must be enabled for the stock variable to work.
Variables are replaced with actual values automatically wherever labels are displayed. Labels update dynamically when prices or stock levels change. After publication, no further manual edits are required to keep the label data up to date.
URL - Turn your product labels into interactive calls-to-action by adding a custom URL. This allows you to redirect customers to specific promotion pages, collections, or external links. When a URL is set, clicking anywhere on the label opens the specified page in a new browser tab.
Note: To ensure the label is clickable on your Product Pages, the store's "Image Zoom" feature must be disabled. If zoom is active, clicking the image will enlarge the photo instead of triggering the label link.
Note: To disable image zoom for your theme:
- Go to the Bigcommerce store admin-panel Home page and click Custom Theme.
- Select the Theme Style (palette icon in the sidebar) and click Product.
- In the menu, find the Zoomed image and change the setting to Specify dimensions.
- Enter 1 for Max width and 1 for Max height.
- Click Publish.
Label position - You can control where the label appears on the product image using a 3×3 position grid. The grid is displayed as a square divided into nine sections. Selecting a section determines the label’s placement on the product image — top, bottom, left, right, center, or any corner.
Click Save and then proceed to the Assignment tab.
Assignment tab
In the Assignment tab, you can choose how and when the label will be applied to products. You have two main options for assigning labels:
- Conditions - define the criteria that must be met for the label to apply. You can choose from several conditions such as:
- All Products: Apply the label to all products in your catalog.
- Stock Quantity: Apply the label based on the quantity of the product in stock. For example, you could set a label to appear on products with fewer than 10 items in stock.
- Price: Set conditions based on the product price. For example, apply a label to products that cost more than $50.
- Category: Choose products from a specific category (e.g., "Electronics" or "Clothing").
- Title: Apply the label when the product title contains a certain word or phrase (e.g., "Sale," "New," etc.).
- Creation Date: Apply the label to products created within a specific date range (e.g., products created in the last 30 days).
You can combine multiple conditions using AND or OR to create complex rules.
This method is particularly useful if you want labels to automatically apply to new products or disappear when product details change.
- Manual - select individual products from your catalog to manually assign the label.
Once done, click Save to apply the settings.