How to display compare at price next to sale price


Showing a discounted price next to the original price is a proven technique to increase how attractive the offer sounds. In this article, we’ll guide you through the steps to create and show a compare-at price next to your original price, so you convert more customers and win more sales.


Set up the compare-at price in Shopify Admin

Step 1: Go to Shopify Admin > Products > All Products and click on the chosen product.

Step 2: Inside your product editor page, scroll down to the Variants section and select the “Edit” button on the row of the selected variant.



Step 3: In the Pricing section, fill in the Compare at price with your desired number.

Step 4: Hit “Save” to record your change.


Add compare-at price in GemPages

Step 1: Go to GemPages Dashboard and choose the page you want to edit.

Step 2: Drag and drop a Product module and a (P) Price element nested inside on the page. Skip this step if you already have these elements.

Step 3: Choose the Product module to view its configurations in the left sidebar. Click on "Pick a Product" and select the product you edited earlier.

Step 4: Click on the (P) Price element and toggle the Compare Price switch on.

You shall see the compare at price showing up in the Editor, next to the original price. The More settings button will then  become available.


Step 5: Further adjust the (P) Price element by hitting the More Settings button.


  • Compare First: By default, the current price will be displayed before the compare at price. Turn this switch on to reverse the order.
  • Font Size: Adjust the font size of your compare at price.
  • Color: Adjust the color for the compare-at price.
  • Price Gap: The gap between your original price and new price
  • Font Style: Make your compare at price Bold or Italic
  • Font: Select your font here from the drop-down menu, you can use custom fonts that you’ve set up previously in the Font Manager. To learn how to use custom fonts in GemPages, please visit this guidance.
  • Line Through: Turn this switch on to display your original price with a strikethrough.
    When turned on, you can custom the color and the position of the line.



Step 6: Hit “Save” and “Publish” to bring your changes to the front store.

After a few minutes of tweaking here and there, you can easily achieve a result like this:


You can couple the Compare Price function of the (P) Price element with other elements such as (P) Stock Counter or Countdown Timer to create a sense of urgency and scarcity for site visitors.


Learn more: 

How to optimize your product pages for conversion

Tips and tricks for creating effective Shopify collection pages

For any additional help you need, please contact our GemPages Support Team anytime via email or live chat. You can also learn more about Ecommerce & Marketing tips with GemPages Blog


Was this helpful?