ReCharge Integration Guide

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">
Below the form, paste the following code:
{% if product.available %}{% include 'subscription-product' %}{% endif %}
	

2) Add data-product-id={{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 note that there might be only one of these in your code:

<select id="product-select-{{ product.id }}" name='id'>
<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}}" />

3) Add our 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>

Then 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>

And 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>

If your cart page are showing properties below the product title and you want to hide them all, check this guide: Hide properties on cart page

You may need to show the subscription frequency below the product title, in this case check this guide: Show subscription frequency on cart page

4) Add our ReCharge include to the theme.liquid

Open your theme.liquid file, go to bottom and before the </body> tag and copy this line

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

Should be looks like this:

5) Add our Recharge code on 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 allow the customer go into the Customer Portal directly into their accounts. Note that this link will be only visible for customers who bought a subscription product.

6) Add our ReCharge code on 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 %}

7) Add a product to your subscription

Follow this guide to add an example product to your subscription. You can add additional products afterwards.

8) Preview the app on your site

To preview the app, go to 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

Contact Us Contact Us