How to customize Sale label

📖 In this article, we are going to learn more about the Sale label 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 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.

On this page

Access Sale label element

  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 Sale Label.
  2. Drag and drop the element in the added section and then start using it.

How to edit Sale label with 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:

  • Left
  • Center
  • Right

Click Save to save all the changes you have made.


Label shape

To change label’s shape. There are 3 options:

  • Rectangle
  • Rounded rectangle
  • Circle

Click 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 Save button to save all changes you have made.


Sale text

âš  This option is only available when you enable Text for Sale label display.

Text appears on 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 Save button to save all changes you have made.


Sale image

âš  This option is only available when you enable 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 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 support@boostcommerce.net.