ReCharge Integration Guide

Widget Update: We are very excited to have recently upgraded our subscription widget to v3. However, this may not work for your store. If you're having difficulty following this guide, please contact us with details.

In most cases, you do not need to use this guide. When you install the app, our 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. If you'd like to do the install yourself, you can always reach out to us if you encounter any issues.

Note: This guide requires basic knowledge of HTML, Shopify liquid, and the theme editor.

1

Add the ReCharge include to the product page

In your theme files, go to the file where the product form starts. Depending on your theme, this can either be in product.liquid, product-form.liquid or product-detail.liquid.

Look for the form tag with an action attribute set to /cart/add. Here's an example:

<form id="add-item-form" action="/cart/add" method="post"><br>
	
In the line below the form, paste the following code:
{% if product.available %}{% include 'subscription-product' %}{% endif %}<br>
	

2

Add data-productid={{product.id}} to form on product page

Inside the form tag, add the following code: data-productid="{{product.id}}" The result should look similar to this:

<form id="add-item-form" action="/cart/add" method="post" data-productid="{{product.id}}">
	

Then in the same product.liquid file, look for a select and/or an input with the attribute name="id". Here are some examples, however, please note that there might be only one of these in your code:

<select id="product-select-{{ product.id }}" name='id'><br>
	
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
	

In all of those that you find, add data-productid="{{product.id}}". The result should be:

<select id="product-select-{{ product.id }}" name='id' data-productid="{{product.id}}"><br>
	
<input type="hidden" name="id" value="{{ product.variants.first.id }}" data-productid="{{product.id}}" /><br>
	
3

Add the ReCharge include to the cart page

Go to the cart.liquid file. At the bottom of the file, paste in the following code:

 {% include 'subscription-cart-footer' %}<br>
	

If you have extra checkout buttons on your cart page, you have to hide them. To do this you should find this IF statement:

{% if additional_checkout_buttons %}
 ..... THEME CODE ......
						{% endif %}<br><br>
	

Add one <span> tag with the attribute class = "additional-checkout-buttons". It would look like this:

{% if additional_checkout_buttons %}
		<span class="additional-checkout-buttons">
      <div id="additional-checkout-buttons">
          <span>{{ 'cart.label.other_payment_types' | t }}</span>
          {{ content_for_additional_checkout_buttons }}
      </div>   
	</span> 
{% endif %}<br>
	

Line Item Properties Showing? Your cart may display properties below the product title that you will want to hide, check out our guide here: Hide properties on cart page

Need to show the subscription frequency? You can display it below the product title using this guide: Show subscription frequency on cart page

4

Add the ReCharge include to the theme.liquid

Open your theme.liquid file, go to the bottom and right above the </body> tag, paste this line:

{% include 'subscription-theme-footer' %}<br><br>
	

5

Add the ReCharge code to customers/account.liquid

In your theme editor section, open the customer template called account.liquid and below the line that print the Customer name paste the following code:

{% if customer.metafields.subscriptions.customer_string %}
<!--BeginRechargeCode-->
<p><a href="/tools/recurring/customer/{{customer.metafields.subscriptions.customer_string}}/subscriptions/">Manage Subscriptions</a></p>
<!--EndRechargeCode-->
{% endif %}<br>
	

That code allows the customer go into the Customer Portal directly into their accounts. This link will be only visible for customers who purchased a subscription product.

6

Add the ReCharge code to ajax-cart-template.liquid

This step is only required if you have the ajax-cart-template.liquid file. If your theme doesn't have the snippet called ajax-cart-template.liquid, jump to the next step. If this file is there you have to open it and copy this code at the end of the file:

<style>
 #AjaxifyCart .additional-checkout-buttons, #ajaxifyCart .additional-checkout-buttons {
    display:none;
}
</style>
{% if template != 'cart'  %}
    <script src='//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
	<script>
	rjQuery = jQuery.noConflict( true );
    var subscription_active='{{shop.metafields.subscriptions.subscription_active}}'
    function get_cookie(k){return(document.cookie.match('(^|; )'+k+'=([^;]*)')||0)[2]}
    if (get_cookie('recharge')=='true' || subscription_active=='true') { 
        rjQuery('body').on('click','form[action="/checkout"] input[type="submit"], #ajaxifyCart [name="checkout"], #AjaxifyCart [name="checkout"], #shoppingBagInner [name="checkout"]', function(e){
            e.preventDefault(); 
            window.location.href = '/cart';
        })
        rjQuery('.additional-checkout-buttons').hide()
        rjQuery(document).ready(function(){
            rjQuery('.additional-checkout-buttons').hide()
        })
    }
    </script>
{% endif %}<br>
	
7

Add a product to your subscription

Follow this guide to add an example product to your subscription. You can come back later on to add your additional products.

8

Preview the app on your store

To preview the subscription option, go to the URL of the product you've added. Modify the URL so it has ?recharge=1 at the end.

For example: http://www.getgiddy.com/products/giddy-balm?recharge=1

Tip: Consider running a test transaction before going live.

Still stuck? How can we help? Still stuck? How can we help?