This is an example showing how you can embed a PayWhirl widget into an existing product page on BigCommerce. The downside of using this method is unless you edit your template files, we can only add widgets to the description of your product pages. This may cause the widget or PayWhirl button to display towards the bottom of your product page. In this case, you may find it better to create a stand-alone page for the subscription instead of using the product page. 

However, this also works fine for many businesses; it all depends on your exact scenario. Please feel free to reach out if you have any questions.

To embed a PayWhirl Widget into a BigCommerce product page:

  1. In Paywhirl, click on "Manage Widgets" under Widgets & Forms in the Main Menu.

2) Select the widget that you want to add to your BigCommerce store or create a new one by clicking the "New Widget" button in the top right corner of the page. If you haven't created a widget yet, see this guide for making a widget.

3) Next, copy its "Embedded Widget Code" from the box below the widget preview. In this example, we will be using the PayWhirl "Buy Button" embed code. This will add a button to the page and launch the widget/checkout experience in a pop up over the page.

4) Next, go to the product page in BigCommerce, where you want to add the button. Edit the product and scroll down to the description. Paste the code directly into the description box and click save.

In older versions of the BigCommerce product pages, click the HTML button to toggle the page into HTML mode and then paste the buy button embed code from PayWhirl.

Paste the code in the box and click update to save.

NOTE: If you don't like the default image for the button and can change it to any image.  If you look at your embed code closely, you will see a 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 image. This is how you would insert the URL in the embed code

 button_image:'http://www.image_path_here.com/mypic.jpeg

 Also, 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.

Finally, when customers click on the embedded buy button, it launches the widget over the product page in a popup so they can checkout without leaving the page.

Related Articles

Please let us know if you have any questions. 

Sincerely,
The PayWhirl Team 

Did this answer your question?