Setting up Custom Labels in Instant Search Widget on BigCommerce

You can set up Custom Labels for products based on their Custom Fields to highlight specific products in search results. In this article, you learn how to adjust Custom Labels in the Instant Search Widget. To do so in the Search Results Widget, see the instructions here.

Add a Custom Label

To add a Custom Label, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab > Custom Labels part.
2. Click the + New label button.
3. Set up the label options:
   1. Custom Field Name – enter the name of a Custom Field into the text box. The name of the Custom Field must correspond to one of the values in the Search & Navigation > Preferences section > Products tab > Search by custom fields setting.
   2. Custom Field Value – enter the value of a Custom Field into the text box.
   3. Text – enter the text, which will be displayed as the label.
   4. Background color – enter or select the background color of the label.
   5. Text color – enter or select the text color of the label.
4. Click the Save label button in the top-right corner.

That’s it. The added Custom Label is now displayed in the Instant Search Widget for products with the Custom Field equal to the Custom Field assigned to the Custom Label.

Edit a Custom Label

To edit Custom Labels, follow these steps:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab > Custom Labels part.
2. Click the Edit link next to the label you want to edit.
3. Edit the label options.
4. Click the Save label button in the top-right corner.

Delete Custom Labels

To delete Custom Labels:

1. Go to the Searchanise control panel > Search & Navigation > Instant search widget section > Product Labels tab > Custom Labels part.
2. Select the label(-s) you want to delete.
3. Click the Delete selected button.
4. Confirm.

The Custom Labels can be customized further with the help of the Custom CSS feature. If you need help with that, feel free to contact us. Our support team will gladly help tweak them the way you want.