📖 In this article, we are going to learn more about the Product Price element and how 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.
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 prices:
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 the Product Price element
Access the Product price 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 General settings section > Select Product Item section.
3. Click the Dropdown icon of the Product Item section > Select Product Information section > Select Product price.
4. 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:
2. Show currency codes:
This setting helps you display the currency code next to your product price. For example: 99.99 EUR. EUR is the currency code for the Euro.
3. Display multi-variant price:
If your product has different prices for each of its variants. You can use this setting 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 [email protected].