All Collections
Integrations
Shopify: Add a "payment plans available" snippet & pop-up on product pages
Shopify: Add a "payment plans available" snippet & pop-up on product pages

Let your Shopify customers know they have an easy payment option available

Roohbir Singh avatar
Written by Roohbir Singh
Updated over a week ago

If you offer Paythen payment plans on your Shopify store, you can help increase sales by letting customers know when they're looking at a product. This script adds a line of text on the product page, as well as a linked pop-up with more information.

See a live demo of how this works on our Shopify demo store here.

Follow below steps to add this to your Shopify store:

  1. Log in to your Shopify store admin area

  2. Under the Sales Channels tab, click on Online store
    ​

  3. Then for the current theme, click on the the more icon next to the Customize button, and choose Edit code
    ​

  4. Under the Layouts section click on the theme.liquid file and scroll down to the end. Just above the line that says </body>, add in this script:


    Click here to view and copy the script, then come back to this guide.

    Eg:

  5. Click the green Save button at the top right

  6. From the left hand menu, scroll down to the Sections folder and click on main-product.liquid
    ​


    ​

  7. Search for the location on the product page where you want to display the Paythen text and link to the pop-up.
    ​
    In our demo store, we've added it just below the quantity selector. To add it in the same position, find the /quantity-input line (use cmd + f on Macs and ctrl + f on Windows to search the page easily).
    ​

  8. Paste this one-line html code in the line after </quantity-input> (or anywhere else on the page depending on where you'd like this to show)
    ​

    <div id="PaythenModalButton"></div>


    Eg:
    ​


    ​

  9. Click the green Save button
    ​

  10. That's it! πŸŽ‰ Your Paythen payment plan snippet should now be live and working. It will inherit your theme's fonts and some colors to better match your store. Here's an example:

Clicking on the text or the i icon at the end will open a pop up like this with more details about the process. This will also use the same fonts and some styles as your store to better blend in. At the moment, it isn's possible to change the text or images in this.


Questions? Not sure about doing this yourself?

No worries, we're here to help. Just message us via the chat icon or email hello@paythen.co.


​

Did this answer your question?