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.
- 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.
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
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.