Installing the Recharge Checkout on Shopify integration manually
- Before you start
- Download snippets
- Step 1 - Add the Recharge include to the product page
- Step 2 - Add data-productid="{{product.id}}" to form on product page
- Step 3 - Add the Recharge include to the cart page
- Step 4 - Add the Recharge include to the theme.liquid
- Step 5 - Add the Recharge code to customers/account.liquid
- Step 6 - Add a product to your subscription
- Step 7 - Preview the app on your store
In most cases, you will not need to use this guide. When you update your theme, the Recharge staff will help install the code on the site for you. The following guide is only for reference, in case you are doing custom coding or modifications on your end and would like to perform the integration yourself.
- Recharge Checkout on Shopify
Before you start
- Only merchants using the Recharge Checkout with Shopify can manually install the Recharge Checkout integration at this time.
- This guide requires basic knowledge of HTML and Shopify Liquid, as well as the use of the Shopify Theme editor. You will also require access to the Recharge subscription Liquid snippets. Though we can advise on elements of our integration code, custom implementation and modifications are not supported by our team as per our design and integration policy.
- To install the Recharge integration manually, you will need to access your Shopify theme editor.
- Recharge cannot be installed on Theme trials. It can only be installed on free or paid themes.
Download snippets
Download a copy of the snippets.
Step 1 - Add the Recharge include to the product page
Access the theme file that contains the product form. Depending on your theme, you may need to access either the product.liquid
, product-form.liquid
,or product-detail.liquid
files.
On occasion, the file name may be listed as something different. If you do not see one of the options above and are unsure where to find the product form, it's recommended to contact the theme developer for support.
Once in the correct theme file, look for the form tag with an action attribute set to /cart/add.
You may add the Recharge include to the product page using Liquid code or HTML code, depending on your theme.
If using Liquid code, it will look like this:
{% form 'product', product, class: productClasses %}
If using HTML, it will look like this:
<form id="add-item-form" action="/cart/add" method="post"><br>
On the line below the form tag, paste the following code:
{% if product.available %}{% include 'subscription-product' %}{% endif %}
Note: Some store themes may require the usage of "render" instead of "include". Among the themes that require this are Prestige, Turbo, Express, and Warehouse.
Your theme file should now include both lines of code. If you're using Liquid code, the results will look like this:
If using HTML the results will look like this:
Step 2 - Add data-productid="{{product.id}}" to form on product page
Update the form tag
If you are using Liquid code, add the code data-productid: product.id inside the form tag. The results will look like this:
{% form 'product', product, data-productid: product.id, class: productClasses %}
If you are using HTML code, add data-productid="{{product.id}}" inside the form tag. The results will look like this:
<form id="add-item-form" action="/cart/add" method="post" data-productid="{{product.id}}">
Update the select/input
In the same product.liquid theme file, look for a select and/or an input with the attribute name="id". Your theme may only have one version, however, there are themes that include a few.
Example select:
<select id="product-select-{{ product.id }}" name='id'><br>
Example input:
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
For every instance of a select or input that you find, add data-productid="{{product.id}}".
If updating a select, add the new piece of code after name='id':
<select id="product-select-{{ product.id }}" name='id' data-productid="{{product.id}}"><br>
When updating an input, add data-productid="{{product.id}}" after name='id':
<input type="hidden" name='id' value="{{ product.variants.first.id }}" data-productid="{{product.id}}" /><br>
Step 3 - Add the Recharge include to the cart page
Access the cart.liquid theme file. At the top of the file, paste in the following code:
<!-- Begin Recharge code -->
{% include 'subscription-cart-footer' %}
<!-- End Recharge code -->
The cart.liquid file should now appear like this:
You will need to hide any additional checkout buttons on the cart page if you are utilizing them. This is because these checkout options, such as the PayPal checkout option, redirect away from the Recharge checkout.
Instead, you can use PayPal with Braintree to offer PayPal as a payment option at the checkout if the customer checks out with a subscription product.
To hide these checkout options, you'll need to locate the additional checkout buttons IF statement from the cart.liquid file:
Add one tag with the attribute class = "additional-checkout-buttons".
- Add <span class="additional-checkout-buttons"> underneath the initial if statement.
- Close the tag by adding </span> before {% endif %}.
Note: Your cart may display line item properties under the product title. If you would like to hide this, review the Hiding properties on the cart page guide.
Tip: You can display the frequency below the product title with custom code. For more information, visit Displaying the subscription frequency on the cart page.
Step 4 - Add the Recharge include to the theme.liquid
Open your theme.liquid file and go to the bottom of the page. Right above the closing body tag, paste this line:
{% include 'subscription-theme-footer' %}
Note: Some store themes may require the usage of "render" instead of "include". Among the Shopify themes that require this are Prestige, Turbo, Express, and Warehouse.
Step 5 - Add the Recharge code to customers/account.liquid
Next is the code that allows the customer to go into the customer portal directly from their Shopify customer account. This link will only be visible for customers who purchased a subscription product, and will appear as a link encouraging customers to Manage their subscriptions.

To add this link, open the Shopify Theme editor and select the customer template called account.liquid.
Use the following code to display the Manage Subscriptions option:
<!-- Begin Recharge code -->
<p><a href="/tools/recurring/login/">Manage Subscriptions</a></p>
<!-- End Recharge code -->
Your theme file should appear like this:
Recharge Theme Engine
If you are using the Recharge Theme Engine, you will need to use a different code snippet to add the Manage Subscriptions link to your theme.
To add this link, open the customer template called account.liquid in the Shopify theme editor.
Paste the following code in the theme file to display the Manage Subscriptions option:
<!-- Begin Recharge code -->
<p><a href="/tools/recurring/login/">Manage Subscriptions</a></p>
<!-- End Recharge code -->
Step 6 - Add a product to your subscription
To test out the integration and confirm if the integration is installed properly, add a product to a new or existing order. You can come back later on to add your additional products.
Step 7 - Preview the app on your store
Open the subscription product on your storefront to preview the manual integration. If you have not enabled your subscription widget, you will need to modify the product page URL to contain ?recharge=true
at the end.
Example: https://www.yourstorename.myshopify.com/products/product?recharge=true
If installed correctly, the subscription widget should display on the product page:

Download snippets
Didn’t find what you’re looking for?
Contact us