Price

Author: Anna Nguyen 2756 views

This element allows you to show the price of the products together with the sale price and the sale badge. This may be the first thing that a customer is looking for.

To add this element, click to Element icon from the left sidebar –> Single Product tab –> Price. Drag the Description element and Drop it wherever you want it to be located.

1. Configure Price Content

1.1 General:

Type: The setting determines how the discount or savings value is displayed on the product page Percent (10% OFF) or Amount (Save $20)

For the discount information to appear correctly, the product must have a Compare-at price and the Compare-at price must be higher than the current price.

Tax included text to let your customer know the product price has a tax fee already.
The Shipping policy will help you add a custom text to show a store or product’s shipping policy

Enable Unit price: Enable this option to display the product’s price based on a specific unit of measurement, such as weight, volume, length, area, or individual items. Unit pricing helps customers compare products with different package sizes or quantities. Shopify calculates the unit price automatically from the product price, total measurement, and base measurement.

For example, if a 10cm product is priced at $45:
+ Price: $45
+ Total amount: 10 cm
+ Base measure: 1 cm
The storefront displays: $4.5 / cm

Enable Total price to enable the total price when the customer increases the quantity.

Note: When you Enable this option, the Compare-at-price will disappear. They both cannot be working at the same time.

An option to show Payment term from your store
An option to show the Badges with the tags that match the product.
An option to show custom pricing of third-party app BSS: B2B Wholesale integration

2.2 Afterpay settings

Show Afterpay: the option to turn Afterpay on or off.
Show minimum price and Show maximum price: You can learn more about them here.
Logo type and Modal Themes: You can learn more about them here.

2. Configure Price Design

General:

Alignment: You can change the price alignment to Left, Center, or Right.
Background: This gives you the option to change the background color of the Price element.
Box shadow: Add a shadow behind the price.
Border: Make a border around the price.

Price, Sale price, Compare at price: here you can mainly change some of the useful styles like Typography, Text Color, Text Shadow, Spacing Shadow.

Sale badge, Sold out badge, Sale percentage badge: All of these settings pretty much share the style options such as Typography, Color, Background, Border,…