Combining Different Pre-paid Intervals Into One Product

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 is an advanced tutorial and is not supported by ReCharge as it is not part of ReCharge's standard turnkey solution. Knowledge of web design languages such as HTML, CSS, JavaScript and Liquid may be required.

This documentation is meant to be used as a reference in order for you, your team, or a  recommended third-party developer to accomplish, as this implementation is very complex. If you're looking to do something similar to the following store, then you will need to hire a developer:
https://whitetalecoffee.com/products/coffee-subscriptions

You have to have one product with two or more subscription frequencies and you want to expire the subscription after each frequency. If you have two different products you can make two different rules. If you have only one product and want to have both subscription options in the same page, you will have to make custom code.

Example: http://smartartbox.com/products/get-on-board

1

Open the subscription-product.liquid snippet and go to the line 103 and add these two lines of code:

<input id="charge_interval_frequency_{{product.id}}" type="hidden" name="properties[charge_interval_frequency]" value="1" />
<input id="charge_interval_unit_type_{{product.id}}" type="hidden" name="properties[charge_interval_unit_type]" value="Month" /><br>
	

It would look like this:

The attribute value has to have the default value that you are offering. For this case is 1 Month:

  • properties[charge_interval_frequency] = 1
  • properties[charge_interval_unit_type] = Month
2

The following code will be used to change the parameters. According to the options that you offer, you have to make a function to change the value of those inputs. For example, if the customer clicks on the 3 Month option, you have to change the value to this:

  • properties[charge_interval_frequency] = 3
  • properties[charge_interval_unit_type] = Months

If your customer adds one product to the cart and then goes back to product page, you can have another variant pre-selected. You have to make sure to trigger the change element when the page is loaded.

3

Review the code. In this case, the store shows the frequency below the product title on the cart page. If you want to do something like this, check out this guide: Show subscription frequency on cart page.

If you don't have this detail, you can check that the product has the correct properties by checking the items in the cart. Shopify generates a JSON file for your cart, it's formatted like so: http://your-store.myshopify.com/cart.js

For this example, it looks like this:

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