Skip to main content
How to customize the Sale label

In this article, we show you how to customize the Sale label.

Connell Nguyen avatar
Written by Connell Nguyen
Updated over a week ago

📖 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

  1. Click on the Add Element button in Any area in the Product Image section located in the Left Panel.

  2. Click on the Sale label element in the dropdown menu.

  3. 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].

Did this answer your question?