Author: Anna Nguyen 67 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.

1. How to add a product price element

  1. Click into Elements –> Single Product –> Price
  2. Drag the Price element from the left sidebar and Drop it wherever you want it to stay.
How To Add Price Element With EComposer App

2. Configure Price

2.1. Content

First thing you’ll need to do is to select a product. You can do that by clicking on the Change text above the General tab.

In the General tab you have:

  • The Badge Sale text which you can change to your liking(Default is Sale).
  • The Badge sold out text that you can also change(Default is Sold out).
  • Enable Ground price to enable the ground price set in Shopify product.
  • Enable Total price to enable the total price when the customer increase the quantity.
  • An option to show the Badges with the tags that match with the product.

The Afterpay tab:

  • An option for you 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.
The Content Setting for Price Element.

2.2. Design


  • Alignment: You can change the price alignment to Left, Center or Right.
  • Background: This give 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, Compare at price, Sale badge, Sold out badge: All of these settings pretty much share the same option as the General tab, you can take a look at the video below to see the options or you can read about it in detail here.

The Design Setting for Price Element.

Leave a Comment

On this page
Start a free trial and enjoy 3 months of Shopify for $1/month on select plans.