Different Price or Interval Between First and Recurring Charge

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.

Warning: This feature will require advanced HTML, Shopify liquid, and possibly JavaScript knowledge. This is not part of ReCharge's standard turnkey solution. This feature is not supported by ReCharge as per our design policy since it requires custom coding. This documentation is meant to be used as a reference in order for you, your team, or a recommended third-party developer to accomplish.

There is no way to automatically change the product from one to the other from the first charge to the different charge. Only the price will be changing, not the product or SKU itself.

For this example, the customer will pay $1.00 when they first sign up for a free sample, then after 14 days they will be charged the full amount for their monthly subscription from then on.

1

Set up the subscription ruleset.

2

Change the price of the hidden auto renew product. In this example, to $1.

3
Add the recurring_price property to our main #rc_container block inside subscription-product.liquid file. Best place is right at the start of the block, together with other hidden elements, usually around line 155 (this can vary and is not always the same for everyone) . Add the following:
<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[recurring_price]{% endif %}" id="rc_recurring_price"value="X" />

Where X is the price that will be applied to the monthly subscriptions. Make sure it's just a number with no $ sign  and use dot to separate decimals.

If the recurring price will vary, you will need to use JavaScript to change the value of the input.

In case you're unsure about the location, it should be after this line:

<div id="rc_container"{% unless subscription_active %} style="display: none;"{% endunless %}{% if subscription_only %} class="rc_subscription-only"{% endif %}>
	
Alongside the other hidden elements:
<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[subscription_id]{% endif %}" id="rc_subscription_id" value="{{ subscription_id }}">
<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[shipping_interval_unit_type]{% endif %}" id="rc_shipping_interval_unit_type" value="{{ shipping_interval_unit_type }}">
	

Full example:

<div id="rc_container"{% unless subscription_active %} style="display: none;"{% endunless %}{% if subscription_only %} class="rc_subscription-only"{% endif %}>
	<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[recurring_price]{% endif %}" value="39.99" />
	<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[subscription_id]{% endif %}" id="rc_subscription_id" value="{{ subscription_id }}">
	<input type="hidden" name="{% if subscription_only or select_subscription_first %}properties[shipping_interval_unit_type]{% endif %}" id="rc_shipping_interval_unit_type" value="{{ shipping_interval_unit_type }}">
	
Lastly, you will need to add one more piece of code to the subscription-product.liquid file at the bottom. This piece of code is to only added the recurring price property if the subscription option is selected:
<script>
		(function(){
			Array.from(document.getElementsByClassName('rc_radio')).forEach(function(item){
            	item.onclick = function(){
                  var recurring_price = document.getElementById('rc_recurring_price');
                  if (recurring_price){
                    if(item.value != 'onetime')
                      recurring_price.name = 'properties[recurring_price]';
                    else
                      recurring_price.name = ' ';
                  }	
                };
            })
})();      
</script>

Warning: This code will apply to all subscription products. If you want to only offer it on a specific one, check the optional step below.

Optional: Charge Delay

You can also add a property for charge_delay, which would be a number of days until the next charge if it's different from the normal recurring intervals. If you set charge delay as 14 for example, that means the first charge happens today, then the next charge happens 14 days from now, and then after that it'll go on the regular intervals.

Charge delay is always a number that represents # of Days. This is useful for things like a Free Trial that lasts for 14 days.

<input type="hidden" name="properties[charge_delay]" value="14" />

You can follow the same steps described above and place it together with the other hidden elements.

Optional: Offer only on Specific Product

You can make it so this option only appears on certain products by tagging the products in Shopify and then applying liquid logic to wrap your hidden inputs, like such:

{% if product.tags contains "Free Trial" %}
	<!-- this block will only appear if product has a "Free Trial" tag -->
{% endif %}

Apply the tags to the products in Shopify in this section below. You can use this to differentiate different products for different scenarios with different prices.

Warning: Tags are case sensitive, make sure to the string specified in the code is exactly the same as the one defined in Shopify Tags.

Free Trial Charges Shipping, Future Orders Have Free Shipping

Do you want to charge shipping on the first $0.00 charge and still offer free shipping for the subsequent recurring charges?

For ReCharge subscription products, there are two products made in Shopify. The original product, and the hidden auto renew product that ReCharge creates automatically. 

So the first charge uses the hidden product, and all future charges use the original product.

1

In order to set this up, you must first set the original product to a weight of 0lbs.

2

Then set the hidden product to a positive weight, such as 5lbs.

3

In Shopify, set up a shipping rate and configure the weight of 0lbs as free shipping.

4

On this same screen, set the weight of 5lbs to pay for shipping.

5

In the ReCharge Dashboard under Settings > General Settings > Show Advanced Settings be sure to set the shipping product type as Original.

The first checkout order will use the hidden product for shipping charges and since it's 5lbs it's paid.

The subsequent future orders will use the original product, with a weight of 0lbs and will get free shipping.

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