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.
Before you start
- Visit White Tale Coffee to see an example of this customization in action.
- This customization will require Shopify Liquid and JavaScript knowledge.
- Each theme is different - you may need to make some modifications to make it work properly with your store's theme and variants. Consider if you need the help of a third-party developer.
- This is a complex implementation that requires the use of JavaScript. Alternatively, we recommend separating the variants as standalone products or building a custom page from scratch using AJAX.
Use-case example
In this example, the store owner wants the large option to be available on subscription and not the small option.
When reading the variant name, Shopify structures the variant title as follows:
- Small / Black
- Large / Black
- Small / Blue
- Large / Blue
To exclude the Small option from being offered on subscription, you would need to use JavaScript and do a string match to see if the variant title contains Small. This will ensure that all variants with Large in the variant title are included.
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 Small. You will need to verify the JavaScript and trigger the onClick event as well.
General implementation
You will need to create a function that receives a variant name and then assesses it to see if the value matches a variable that you have created. If the values match, it will show both the one-time and subscription option when selected by the customer. If the variant does not match, the code will automatically hide both options and select 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.
Additionally, you will need to define a listener to be triggered if the variant is changed. You will also need to to create this listener according to the needs of your specific theme. For example:
- If you have a dropdown with the product variants you will need to add the ID and CLASS into the listener and use the change function. The change function will take the name of the selected variant as a parameter in the embedded check_variant_name function to know whether to show or hide the subscription options accordingly.
- If you use buttons to select variants you will need to use the click function for the listener.
You'll need the code to 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, in which case it needs to be validated by the selected variant name. As described, you would use the check_variant_name function with the variant name set as a parameter to show/hide the subscription options accordingly.
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. You will just need to adjust the variants included in the snippet.