How to customize Product price element

📖 In this article, we are going to learn more about what is Product Price element and how to use to work with its elements to make your product list look just the way you want it to.

âš  This article only works for Boost AI Search & Discovery 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

About Product price element

Product Price is a mandatory element to display for your product. Most themes will have this element added by default. For example:

In our editor, there are four settings for displaying product price:

  • Price: Show the original price.
  • Sale price: Show an alternative style for the original price when a product has a Compare at price.
  • Compare at price: Show the discount price.
  • Saving display: Show the sale price and discount price in the same line.

How to edit Product Price element

Access the Product price element

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

  1. Under the General settings section > Select Product Item section.
  2. Click the Dropdown icon of Product Item section > Select Product Information section > Select Product price.
  3. Drag and drop the Product price and then start using it.

Styling configuration

General settings

  1. Show cents at superscripts:
  • This setting allows you to make your product price’s cents superscript. For example, $24.92 is 24 US dollars and 92 cents, if this option is ticked, it should look like this:

  1. Show currency codes:
  • This settings helps you display the currency code next to your product price. For example: 99.99 EUR. With EUR is the currency code for Euro.
  1. Display multi-variant price:
  • If your product has different price for each of its variant. You can use this settings to display its price range. We offer two options to display it:
    • None: nothing is displayed.
    • From {{minPrice}}: The price range will be displayed as From <min price>
    • {{minPrice}} - {{maxPrice}}: The price range will be displayed as <min price> - <max price>

💡

  • {{minPrice}} and {{maxPrice}} stands for the minimum price and maximum price respectively.
  • These only apply to products that have variants with different prices.

Price

To learn how to work with its styling configuration, please follow this article.


Sale price

To learn how to work with its styling configuration, please follow this article.


Compare at price

If your product is on sale, you can decide where to display its discount price along with the original price. There are four options:

  • Right
  • Left
  • Top
  • Bottom

Next, to learn how to work with its styling configuration, please follow this article.


Savings display

If your product is on sale, you can gain your customer’s attention by enabling this setting to make it more visible in your product list:

Once it’s enabled, you can customize these settings below:

  • Savings text: Customize what you’d like to display in your Savings text.

{{saleAmount}} to show numerical money value (e.g. $10)

{{salePercent}} to show percentile value (e.g. 20%)

  • Color: To learn how to work with its color configuration, please follow this article.

Click Save to save all the changes you have made.

Tutorial video


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