ReCharge Integration Guide (Shopify)

Recharge Code Installation

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.

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

If you encounter any issues while following this guide please email support@rechargepayments.com and specify that you're doing the install yourself. 

1) Add our 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. On some themes it might be in 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 in the following code:
{% if product.available %}{% include 'subscription-product' %}{% endif %}
	

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

On the "form" tag, add the following code inside the form tag:

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 (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". Have to 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

Maybe you need to show the subscription frequency below the product title. For that 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 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 %}

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

Note: 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 STEP 6. 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:

Adding Product to Subscription

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