Product Labels for BigCommerce

From the Page Builder navigation bar, click on the painter's pallet icon, which will open up the Theme Styles menu:

Click on YSW Product Labels to open the settings for Product Labels:

From here you can control the default options for your Product Labels including:

• Enabling or disabling labels from showing on products.
• Choosing the shape of the label's badge (pill or circle)
• What position on the item, such as top left or top right, where the badge will display.
• Badge border color.
• Label background color.
• Label text color.

Each of these settings can be overwritten by creating custom styles using custom fields, as described in Step 3.

By using custom fields, you can specific the text to appear in the Product Label.  You can also overwrite the default color and style for the badge using the same custom field.

To set a custom field on an item:

Step 1: In your BigCommerce store, find the item you want to add the Product Label to.

Step 2: In the Custom Fields area, create a new custom field called badge_options.

The value of the custom field controls the text to be displayed in the Product Label as well as any style information that you want to overwrite from the default value.

Values are separated by the pipe character (|) and must be entered in this order:

• text to display|label background hex color|shape

Take note of the following examples:

• To use the default settings and just set text, your value would be:
  • text to display||
    • the two additional pipe characters must be included
• To set text, change the label background color to white, and use the default shape, your value would be:
  • text to display|#FFFFFF||
    • the one additional pipe character must be included
• To set text, use the default label background color, and use a pill shaped badge, your value would be:
  • text to display||pill
    • the one additional pipe character must be included
• To set text, change the label backround color to white, and use a circle shaped badge, your value would be:
  • text to display|#FFFFFF|circle

Once your custom field values are set, make sure to save the changes to your product.

To make managing the custom fields for Product Labels, as well as others you use in your BigCommerce store, we encourage you to check out our Custom Field Populator app.

Custom Field Populator allows you to easily manage custom fields, automatically apply fields with or without values as new items are added to your store, create rules to define custom fields, as well as import or export your fields, and more.

For more information on Custom Field Populator, please visit our listing in the BigCommerce App store by clicking here.

Product Labels are fully compatible with Search Magic and will display on product cards in search results listings as well as category pages.  Search Magic will automatically update once per hour if a product or category has been updated, deleted, or created.  However, it's important to that when a custom field is added or updated on a product, BigCommerce DOES NOT notify us that there was a product update.  However, this update will be processed during Search Magic's hourly update.

If you need to Search Magic to process the update quicker, you can trigger a manual update by simply adding a space at the end of your product description and saving.  Search Magic will process the update in a few moments.