How to customize custom label tag

📖 In this article, we are going to learn more about the Custom label by tag element which you can add in the Product Image’s sections and how to use it to optimize your theme’s layout and make it look the way you’d like it to.

âš  This article only works for on the latest versions of the new front-end lib V2 and Boost Product Filter & Search V3 new Theme settings. To find out which version of our app your store's current theme is installed with, please follow this article. To know how to create custom label by tag on Version 2, pleas follow this article.

On this page

About Custom label by tag

Beside the usual/default labels for your products, you can also create your own custom labels by tag and add it to your product image with our visual editor.

When you install our app and have our default layout theme (see Default theme definition and Default theme demo), you can easily create a label or badge using tags. Below is the demo image of those labels:

How to use Custom label by tag with visual editor

How to access Custom label by tag settings

  1. From the app's admin, go to Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.

  1. Under the Product image section > Select Add element on the left panel > Select Custom by tag label.
  2. Drag and drop the element in the added section and then start using it.
  3. Edit each product and add tags with the following format:  pfs:label-xxx (xxx is the desired name to show on the front end). For example, pfs:label-new, pfs:label-featured, pfs:label-new arrivals, etc.

Here's an example tag  pfs:label-new arrivals on a product:

  1. Go to the Sync menu. Trigger  Sync recent updates.

Styling configuration

Label alignment

This parameter allows you to determine the position of the element on your page. There are three options to choose:

  • Left
  • Center
  • Right

Label shape

There are 3 options:

  • Rectangle
  • Rounded rectangle
  • Circle

Color

Background color & Text color: You can check more information about the STYLING tab here.

Click Save button to save all changes you have made.

Tutorial video

Watch our tutorial video to learn how to customize the Custom by tag label element:


If you need any further assistance, please do not hesitate to contact us at support@boostcommerce.net.