How to display AfterPay right below the product price

This article will show you how to add and change the position of the Afterpay widget on GemPages's product pages.

What is Afterpay?

Afterpay is a payment method that allows customers to receive the purchase and pay in installments. By offering Afterpay, you’re giving your customers the opportunity of taking their purchase home today with the flexibility to pay in 4 installments over 6 weeks. A flexible payment plan compared to full payment enhances your chance to get more conversions and new customers. 

Integrate Afterpay with Shopify

To begin, you will need to add Afterpay to your Shopify store. Kindly check out this article for the detailed instructions.


After that, the Afterpay widget will be inserted automatically at the top of GemPages’s product pages. In some cases, you would prefer to show the widget in the other position. This article will walk you through steps to adjust the position of the widget.


Step 1: Navigate to Shopify Admin > Themes > Actions and select “Edit code”


Step 2: Search for the file “theme.liquid”. Select to open the file.

Step 3: Next, scroll down and find the section containing Afterpay codes.

Step 4: Look for the line of code below and remove the "//" at the beginning of the line.

After removing, the line should be: 


var afterpay_product_selector = '#product-price-selector';


Next, hit "Save" to save your change.

Integrate Afterpay with GemPages 

Step 1: From the GemPages Dashboard, navigate to the Product Pages. Select your preferred page to edit.


Step 2: Drag and drop a Liquid element from the left sidebar to your page and put it right under the element (P) Price or any position you wish inside the Product Module.


Step 3: Right-click on the Liquid module and choose “Edit code” to open the code panel.

Step 4: Copy and paste the HTML code below into the Template tab. Click on “Save.”

<div id="product-price-selector"></div>

When everything is in place, hit “Save” then “Publish.” That’s it! You are all set with the Afterpay widget that helps you increase sales and win new customers.


Need more help? Feel free to reach out to our dedicated GemPages Support Team via email and live chat!


Was this helpful?