Installing the Recharge Checkout on Shopify integration manually

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. 

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 %} 

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". 

1. Add <span class="additional-checkout-buttons"> underneath the initial if statement. 
2. Close the tag by adding </span> before {% endif %}. 

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' %}

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