Installing the Recharge Checkout on Shopify integration manually

When updating your theme, the Recharge support team will help install the code for you. In most cases, you will not need to use this guide. The following guide is for reference when you are installing custom code on your end and need to perform the installation manually. 

Before you start

• Only merchants using the Recharge Checkout with Shopify can manually install the Recharge Checkout integration. 
• This guide requires basic knowledge of HTML and Shopify Liquid, as well as the use of the Shopify Theme editor. Custom coding is not supported by our support team as per our design and integration policy.
• You need to access your Shopify theme editor to install the Recharge integration manually.
• 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 Shopify theme, this is 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, contact the theme developer for support.

From the correct theme file, look for the form tag with an action attribute set to /cart/add.

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: 

Hide any dynamic checkout buttons on the cart page if you are utilizing them. Dynamic checkout buttons, such as Buy it now buttons, 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 %}. 

Using custom code, you can display the frequency below the product title in the cart. See Displaying the subscription frequency on the cart page for more details.

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

To ensure customers can manage their subscriptions from their Shopify profiles, add the Recharge customer portal link to the customers/account.liquid file. This link is visible for customers who purchased a subscription product and provides customers with a link that says Manage 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 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

Add a product to a new or existing order to test the integration and confirm it is installed properly. You can come back later to add any 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, 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:

Troubleshooting

If you experience any issues after completing the manual installation, see Troubleshooting the subscription widget for assistance.

Download snippets