In this example, the store owner does not want the single pair to be available for subscription, and instead only multiple pairs can be subscribed to. When reading the variant name, Shopify structures it as a combination, such as:
- One Pair / Small / Black
- One Pair / Medium / Black
ReCharge typically applies a subscription rule to an entire product, variants included. But you may also need to offer a subscription on just one or multiple variants of the product. The custom coding you'll be doing would take place in the Shopify theme files, under the snippet called subscription-product.liquid. This guide is merely providing some information to help you or your developers have an idea of what direction to go in and is not a step-by-step tutorial. Please also check out this store as a prime example, many third-party developers have built templates for this very case.
The function you'll need to create receives a variant name and then assess it to see if the value matches a variable that you have created. If the values match, it will show the one-time and subscription options on that variant so that customers can subscribe to it. If the variant does not match, the code will automatically hide both options and select one-time in the background for the other variants, to ensure that they cannot be subscribed to. Once the product page is fully loaded, the code hides the one-time and subscription options until the pertinent variant is selected.
After that, you will need to define a listener to be triggered if the variant is changed. You will also need to be sure to create this listener according to your needs, as themes vary. For example:
- If you have a dropdown with the product variants you will need to add its ID and/or 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 have a few buttons for the variants you have to use the click function for the listener.
You'll need the code to check whether the default variant pre-selected to populate should show the subscription options or not. This is needed because the variant can be selected via a URL, in which case it needs to be validated by the selected variant name. This is the one that uses the check_variant_name function with the variant name set as a parameter to show/hide the subscription options accordingly.
If you only need to apply this code for one product, you can use an IF statement to include it in this way.
The ideal end-result would be vaguely like this example, where when small is selected, the subscription is not an option, but when Large is selected, it becomes
Variable Small Selected (Subscription not an option):
Variable Large Selected (a subscription is now an option):
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.