How to Display Product Price and Compare-at Price on the Same Line

Product Price and Compare-at-Price Elements in GemPages

GemPages provides dedicated elements for displaying a product’s price and its compare-at price. If you need more details about these elements, refer to the Product Price Element.

Note: Before proceeding, ensure that your product has both a price and a compare-at price set in Shopify. If not, follow these steps:

Step 1: Log in to your Shopify admin panel. Choose the product you wish to edit from the list or add a new product.

Step 2: In the Pricing section, enter the original price in the Compare-at-price field.

Enter the discounted price in the Price field.

Step 3: Click “Save” to apply your updates.

How to place a product price and the compare at price on the same line

Step 1: Open the product page where you want to display both prices.

Step 2: Drag and drop a 2-column row into the product module.

Step 3: Add the Product Price element in one column and the Compare-at Price element in the other. These elements will automatically sync with your product’s pricing data.

Step 4: Select the row containing both elements and set it to Fit to content to align them properly.