📖 In this article, we are going to learn more about the Sale label element which you can add to 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 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.
Access Sale label element
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 Sale Label.
3. Drag and drop the element in the added section and then start using it.
How to edit the Sale label with the visual editor
Access Sale label settings
Click on the Add Element button in Any area in the Product Image section located in the Left Panel.
Click on the Sale label element in the dropdown menu.
Drag and drop the element in the added section and then start using it, you can also change the order of the element by doing this.
Styling Configuration
Label alignment
This parameter allows you to determine the position of the element on your page. There are three options to choose from:
Left
Center
Right
Click Save to save all the changes you have made.
Label shape
To change the label’s shape. There are 3 options:
Rectangle
Rounded rectangle
Circle
Click the Save button to save all changes you have made.
Sale label display
This is to change how you’d like to display your sale label. There are 2 options:
Text
Image
Click the Save button to save all changes you have made.
Sale text
⚠️ This option is only available when you enable the Text for Sale label display.
Text appears on the label. – “Sale”, for example
You can type:
{{saleAmount}} to show numerical money value (e.g. $10)
{{salePercent}} to show percentile value (e.g. 20%)
Click the Save button to save all changes you have made.
Sale image
⚠️ This option is only available when you enable the Image for Sale label display.
Click Upload image or drop files to upload to upload your custom label image or you can drag and drop the file into the box to upload it.
Click the Save button to save all changes you have made.
Styling
You can check more information about the STYLING tab here.
Tutorial Video
Watch our tutorial video to learn how to customize the Sale label element:
If you need any further assistance, please do not hesitate to contact us at [email protected].