How To Change The Position of Afterpay Widget on Shopify Product Page

Afterpay is a “Buy now, Pay later” platform that lets you buy something immediately, and pay it off over some weeks.

After integrating Afterpay with Shopify, the Afterpay widget will be inserted automatically at the top of the product card on Shopify product pages. In some cases, you would prefer to show the widget in the other position. This article will let you know how to adjust the position of the Afterpay widget.

Afterpay will provide you with a Javascript code to insert your Shopify theme.

To adjust the position of the Afterpay widget, you must find this Javascript code. Normally, you will find this code in the theme.liquid file.

Find to the line containing the string:

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

and change to:

var afterpay_product_selector = '#hura-afterpay-widget';

Now, you can show the Afterpay widget anywhere you want, you just need to insert the following code in that position.

<div id="hura-afterpay-widget"></div>

That’s it. I hope this article is useful to you.