Recharge typically applies a subscription rule to an entire product, including the variants. However, you may need to offer a subscription on just one or multiple variants of the product. This can be implemented using custom coding within the
subscription-product.liquid snippet in your Recharge theme files.
This guide is not a step-by-step tutorial but provides general advice on implementing this customization.
- Recharge Checkout on Shopify
Before you start
- Consider working with a Recharge Partner to implement this change, as each theme is different and may require additional troubleshooting.
- Create a function that receives the specific variant name for the product variant from your store.
- Perform a string match to assets to see if the value matches a variable that you have created.
- If the values match, both the one-time and subscription options are displayed when selected by the customer.
- If the values do not match, the code automatically hides both options and selects one-time in the background so that these variants cannot be added to the cart as a subscription product. When the product page is fully loaded, the code hides the one-time and subscription options until the specified variant is selected.
Step 2 - Define a listener
You must define a listener to trigger if the variant is changed. You will also need to create this listener according to the needs of your specific theme. For example:
- If you have a dropdown with the product variants you must add the
classinto the listener and use the
changefunction takes the name of the selected variant as a parameter in the embedded
check_variant_namefunction to know whether to show or hide the subscription options accordingly.
- If you use buttons to select variants you must use the
clickfunction for the listener.
The script must also check whether the default variant that is pre-selected should show the subscription options or not. This is needed as the variant can be selected via a URL.
If the variant is selected via a URL, it must be validated by the selected variant name. Use the
check_variant_name function with the variant name set as a parameter to show/hide the subscription options accordingly.
Ensure that when you use the show/hide action on the radio buttons to re-check the one-time purchase radio option in case someone has the subscribe option checked and they switch it back to a non-subscription product.
onClickevent as well.
In the current example, if the variable Small is selected the subscription options are not shown:
When the variable Large is selected the subscription option is now visible:
You can also modify your code above to support more than one variant by adjusting the variants included in the snippet.
Didn’t find what you’re looking for?Contact us