WARNING: THIS SUPPORT DOC IS FOR THE 2016 VERSION OF THE PAYWHIRL SHOPIFY APP. A NEW VERSION WAS RELEASED IN NOVEMBER OF 2020 AND THE NEW DOCUMENTATION CAN BE FOUND HERE.
Widgets can be easily added to an existing product page by copying / pasting the embed code PayWhirl provides into the description. Just keep in mind this doesn't disable or prevent customers from checking out through the built in Shopify checkout.
If customers use the native shopify checkout, we are not able to save payment information for future charges. To embed a widget into a shopify product page please follow the instructions below.
Go to the admin panel of your Shopify store and click on "Products" and find the product you want to edit.
Click the show HTML button (</>) in your product page editor in Shopify.
Copy the widget embed code from your PayWhirl account. Navigate to the Manage Widgets page.
Click "edit" next to the widget you want to add to your product page. If you haven't created a widget yet, see this guide for making a widget.
Copy your widget embed code as shown below. You can use either the Embedded Widget code or the Button code, either will work.
NOTE: If you don't like the default image for the button, you can change it to any image. If you look at your embed code closely you will see section that says, button_image: ' ' and has two apostrophes with nothing between them.
If you edit the button image section and add a complete url to an image already hosted online it will replace the default PayWhirl image. This is how you would insert the URL in the embed code
Paste the code snippet from PayWhirl into your Shopify page. Make sure the page is still in "code view" and click the save button.
Please keep in mind if you paste your embed code at the end of your description, it will show up at the very bottom of the product page.
The widget is now embedded in your Shopify product page. If you make any changes to the widget in PayWhirl (like changing the colors, text, price of a payment plan) it will change automatically in Shopify.
Note: When you are finished testing and ready to accepting LIVE payments, make sure you have a live gateway connected to every widget that is on your site.
Please let us know if you have any questions.
The PayWhirl Team