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

Sell Online With Shopify
Trusted by millions of businesses worldwide
Start your Shopify 14-day free trial and keep it active for 45 days to claim your $200 subscription credit.

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.

You may also like...

Leave a Reply

Your email address will not be published.

Sign up for a free Shopify 14-day trial and start selling today.