How To Add Afterpay Snippet To Shopify Product Page

You have just integrated Afterpay on your Shopify website. Or perhaps you switched to a newer theme.

Now you will notice that your Afterpay integration code on your product details page is gone!

Fear not - this super simple yet detailed guide will walk you through how to integrate that Afterpay snippet (back) to your product details page.

1. Login to your Shopify Themes section

Login to your Shopify Admin, and go the Themes section.

Select the Actions dropdown of your current theme (or whichever theme you need to add the Afterpay integration code to), and select 'Edit code'.

2. Add Afterpay Snippet

In the left hand panel of the File Browser, under the 'Snippets' section, click on 'Add a new snippet' to create a new snippet.

Give the name 'afterpay' to your afterpay snippet.

Open this link and copy all the text from there. Paste it into the new snippet you just created and save the file.

(Just to make the next few steps easier, refresh your browser window at this point - this removes a bug with the Shopify code editor)

3. Edit the products template

Back to your File Browser, search for 'product'. Find and click on the 'product-template.liquid' file - this file will have code to display the price.

If you don't see the 'products-template.liquid' file, edit the 'products.liquid' file. This either means your theme is a little bit older, or was developed in a slightly older method. Don't worry about it that for now.

Once you have the file open, search for 'ProductPrice' or 'Price' (you can use Ctrl+F to search also), which should highlight the html code that displays your price. 

After the entire 'ProductPrice' tag, paste the following code:

{%- include 'afterpay' -%}

If you don't see the price code as above, keep searching for 'ProductPrice' or 'Price'.

Another version of the product template theme code that display the price is:

4. Save

Save your theme code, and go to your product details page. The Afterpay snippet should now appear under the product price.

And that's it. You have successfully added Afterpay integration code to your product details.

If you have any questions, or if any of the above steps weren't clear, please don't hesitate to contact me.