Subscription Rules Based on Variants

Warning: This customization will require some Shopify liquid and JavaScript knowledge. It's important to note that 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.

Use Case

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

To accomplish this, it will involve JavaScript doing a string match to see if the variant title contains "One Pair" so it works with all combinations. Be sure that when you do 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 One Pair. You will need to verify the JavaScript and trigger the onClick event as well.

There's a lot of moving parts to this scenario, and it does require quite a bit of JavaScript knowledge. That's why we generally recommend people to just separate out the projects, or even build the entire thing on a custom page from scratch using AJAX like this store has done.


Break-Down

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.

Still stuck? How can we help? Still stuck? How can we help?