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 applies to Recharge Checkout on Shopify
This guide is not a step-by-step tutorial but provides general advice on implementing this customization.
- 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 assess 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.
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_name functionto 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.
theonClickevent as well.
If you only need to apply this code for one product, you can use an
ifstatement to include it in this way.
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.
Updated over 1 year ago