Combining Different Pre-paid Intervals Into One Product

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.

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

Step 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

Step 2:

The following JavaScript will be used to change the parameters. According to the options that you offer you have to make a JavaScript 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.

Step 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?