How to adjust the position of AfterPay widget on my product page?

This article will show you how to add or change the position of AfterPay widget on GemPages's product page.

First off, please install AfterPay gateway to your default Shopify product page: Check the tutorial here

After that, the AfterPay widget will auto-insert at the top of GemPages’s product pages. And, these steps will guide you on how to change its position to right under the product price.

Example below: 

Step 1: Visit Shopify Admin >> Themes >> Edit Codes.

Step 2Then open the file "theme.liquid"

Step 3: Scroll down and find the section of AfterPay codes added before.

Step 4: Remove " // " from the line of codes:

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

Step 5: And then click Save

Step 6: Copy the HTML code below

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

Step 7: From your product page, drag and drop a Liquid module from the left sidebar to your page and put it right under the module (P) Price.

Step 8: Right-click on the Liquid module and choose Edit HTML to open the HTML panel.

Step 9: Remove all existing codes on the code panel. Right-click and paste the HTML code into.


Step 10: Hit Save and check the result on Preview mode or hit Publish and check on the live page. 

That's all steps needed. If you have any questions, just drop us a line in the live chat. Our support team will be more than happy to answer and assist you further! 😊

Was this helpful?