Integrating PayWhirl with some themes can involve a bit of coding if app blocks or app embeds are not supported. PayWhirl will attempt to detect the appropriate installation method and display the corresponding instructions.
If you have questions or need help, please don't hesitate to reach out to our team. We're happy to help and can usually assist with getting your store configured properly.
If your theme supports App Blocks (i.e., Shopify 2.0 themes or newer), then you'll only need to edit code to integrate our customer portal, which is highly recommended. If a manual install is required, we've simplified the process as much as possible and are here to help if you have any questions along the way.
Before installing, please ensure you are using a supported gateway such as Shopify Payments, Stripe, PayPal Express, or Authorize.net. Shopify only supports subscriptions with these gateways.
Step 1 - Select the theme you want to use for PayWhirl
In this example, I will use the debut theme's latest version. Many of the steps shown below will work for the other themes:
Note: Some theme installs may require a developer to help implement. However, many will work if you follow the basic setup instructions below:
Step 2 - Install PayWhirl Snippets Automagically (RECOMMENDED)
With a few button clicks, we can usually automatically install our snippets into your theme. On the installation page in the app, you'll see several buttons to help install your theme snippets automatically.
Note: Nothing will be visible to customers until you add subscriptions to your product pages in Shopify.
The "Install PayWhirl Snippets" button will install our basic snippets into your theme along with a javascript file called "paywhirl.js." After installation, you can find these in your theme in the snippets and assets folder.
Note: We also provide manual instructions for each step if you'd prefer to do it manually or have issues with the automatic install method.
β
The next button will install the "paywhirl-main" include in your main theme.liquid file before your closing </body> tag.
The selling plan selector is the next button. We currently support subscriptions on the product pages and, in some themes, the featured product page.
This step is optional:
The cart snippet is up next and is not required on many themes. Beginning in November 2020, Shopify requires theme developers to support selling plans in the cart out of the box. You should wait to complete this step until after you've tested adding a subscription product to the cart. You can skip this step if you already see selling plans in your cart.
Note: Many pop-up or side-drawer-type carts will need to be updated by the theme developer to support subscriptions.
Manual Customer Portal installation
The next snippet installs the subscription customer portal in your Shopify store.
After you've added the customer portal snippet, you'll need to add a link in your account page theme file.
When customers click this link, it will load the customer portal on the account page in Shopify.
You can install the portal link anywhere in your account theme or file, but it usually looks best next to the logout link or in the sidebar menu. Here is an example of how to do it next to the log-out button:
You can also add a paragraph tag to put it on its own line in the sidebar. I also added the h4 tag to make it bold and larger font.
<p><br>{% render 'paywhirl-customer-portal-link' %}</p>
Here is how it looks in my account with the debut theme:
Step 2B - Install PayWhirl Snippets (MANUAL METHOD)
You can also install the snippets manually if you'd prefer or have any issues with the automatic installation method. Below we'll show you how to install the snippets manually, if necessary. You can also contact our support if you have any issues or aren't comfortable adding code. In most cases, we can do it for you.
Add the "paywhirl-main" include to your theme.liquid file.
The link will open up the theme editor in Shopify. You will see a bunch of code. Scroll down to the bottom of the page and paste the snippet right before the </body> tag.
Make sure to click save after adding the snippet.
β
Add the product snippet to your theme manually.
Click the links to open up the product-template or product-form. It is usually easiest to search for name="id" and paste it after the closing select tag:
Add the cart snippet to your theme manually.
Copy the example code in the cart instructions of your installation location. In debut it is <ul class="product-details" or {% assign property_size = ... %} depending on when you installed your debut theme. Also, note if you'll be REPLACING code or pasting BEFORE/AFTER the install location example.
Then click the link in the instructions to open your cart theme file. Click the code section and type CTRL F (or Command + F on Mac) to create a search bar. Paste the installation location to search the file for the installation location.
Note: If you cannot find the install location, remove any blank spaces in the search bar. If you still can't find it, please contact our team. Some cart files use different code, depending on when you installed your theme).
Also, your instructions may have you paste before or after the example location code. Please make sure you follow the specific instructions on the install page in the app. We're here if you have any questions.
β
Highlight and delete the code from the <ul class="product tag through the closing </ul> tag several lines down. Don't worry, you can always revert the version of the theme file if anything breaks.
β
Go to your other browser tab and copy the cart snippet under section 5 on the PayWhirl app install page. Paste that snippet in the blank spot where you deleted the code, and click save.
Note: Shopify is working on implementing this step automatically on their themes. However, if you have customized your theme and are using an older version, you will likely need to follow the steps above to install the cart snippet.
Installing the portal snippets manually.
Copy the first code snippet and click the link to your theme file.
Paste the customer portal snippet at the very bottom of the customer account file.
Go back to your other browser tab and copy the second code snippet for the portal under section 6 on the PayWhirl app installation page. This snippet goes towards the top of the page right above the "customer_logout_link":
Click Save. That's it!
If you made it this far, pat yourself on the back! You are ready to associate your selling plans with products on Shopify. This will be done from your product page(s) in Shopify. Please take a look at our full setup guide for more details.
Need help troubleshooting?
If you need help with installing your theme snippets, we're here to help. Please reach out to us through our support widget; we'll do our best to help. We can help with basic theme install support. In rare cases, where we cannot help, we can refer you to 3rd party Shopify developers who can troubleshoot any remaining issues for a fee.
Related Articles:
If you have any questions or concerns, please don't hesitate to contact our support. We're happy to help.
Sincerely,
Team PayWhirl