📖 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 a custom label by tag on Version 2, please follow this article.
About Custom label by tag
Besides the usual/default labels for your products, you can also create your custom labels by tag and add them 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 the Integration menu > select Shopify Integration > Find [Target Theme] > Select Edit Visual Design.
2. Under the Product image section > Select Add element on the left panel > Select Custom by tag label.
3. Drag and drop the element in the added section and then start using it.
4. 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:
5. 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 [email protected].