Subscription Rules Based on Variants

Widget Update: We are very excited to have recently upgraded our subscription widget to v3. However, this may not work for your store. If you're having difficulty following this guide, please contact us with details.

Warning: This feature will require some Shopify liquid and JavaScript knowledge. We have provided an example here, but it is 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. If you need help at all, please let us know.

ReCharge typically applies a subscription rule to an entire product, but you may also need to offer a subscription on just one or more variants of the product instead. Below, you will find how to add custom code to make this work. In your Shopify theme files, open the snippet called subscription-product.liquid, and go to line 933 to add the following code:

// FUNCTION TO CHECK IF THE VARIANT SELECTED HAS TO SHOW THE SUBSCRIPTION OPTIONS
function check_variant_name_{{ product.id }}(variant_name){
    // VARIANT_NAME_WITH_SUBSCRIPTION HAS TO BE THE NAME OF THE VARIANT THAT 
    // YOU WANT TO USE TO SHOW THE SUBSCRIPTION OPTIONS
    if (variant_name == "VARIANT_NAME_WITH_SUBSCRIPTION"){
    	$('#recurring_choice_{{ product.id }}').show();
    } else {
    	$('#recurring_choice_{{ product.id }}').hide();
      	$('#autodeliver_off_radio_{{ product.id }}').click();
    }
}

// THIS LINE HIDE THE ENTIRE RECHARGE WIDGET WHEN THE PAGE LOAD THE FIRST TIME
$('#recurring_choice_{{ product.id }}').hide();

// LISTENER TO KNOW WHEN THE VARIANT SELECTED CHANGE
// REPLACE "VARIANT_SELECTOR_CLASS_OR_ID" FOR YOUR CLASS OR ID SELECTOR. This is usually: .single-option-selector
$('form[data-productid="{{ product.id }}"] VARIANT_SELECTOR_CLASS_OR_ID').change(function(){
	var variant_name = $(this).val();
  	check_variant_name_{{ product.id }}(variant_name);              	
})  

// WHEN THE PAGE LOAD THIS CHECK IF THE VARIANT SELECTED HAS TO SHOW THE SUBSCRIPTION
var variant_name_firsttime = $('form[data-productid="{{ product.id }}"] .single-option-selector').val()
check_variant_name_{{ product.id }}(variant_name_firsttime);

Let's break it down - here are some more details about how each part of the code works:

1

The following function receives a variant name and then asses it to see if the value matches the VARIANT_NAME_WITH_SUBSCRIPTION variable that you added:

  • 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.
function check_variant_name_{{ product.id }}(variant_name){
    // VARIANT_NAME_WITH_SUBSCRIPTION HAS TO BE THE NAME OF THE VARIANT THAT 
    // YOU WANT TO USE TO SHOW THE SUBSCRIPTION OPTIONS
    if (variant_name == "VARIANT_NAME_WITH_SUBSCRIPTION"){
    	$('#recurring_choice_{{ product.id }}').show();
    }else{
    	$('#recurring_choice_{{ product.id }}').hide();
      	$('#autodeliver_off_radio_{{ product.id }}').click();
    }
}
	
2

Once the product page is fully loaded, the code hides the one-time and subscription options until the pertinent variant is selected, through the following line:

$('#recurring_choice_{{ product.id }}').hide();
	
3

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
  • If you have a few buttons for the variants you have to use the "click" function for the listener.

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, as shown here:

$('form[data-productid="{{ product.id }}"] VARIANT_SELECTOR_CLASS_OR_ID').change(function() {
	var variant_name = $(this).val();
  	check_variant_name_{{ product.id }}(variant_name);              	
})
	
4

The last part of the code serves 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. As detailed above, it uses the " check_variant_name" function with the variant name set as a parameter to show/hide the subscription options accordingly.

var variant_name_firsttime = $('form[data-productid="{{ product.id }}"] .single-option-selector').val()
check_variant_name_{{ product.id }}(variant_name_firsttime);
	
5

If you only need to apply this code for one product, you can use an IF statement to include it in this way. Something like:

if (product.id == XXXX){
	// ADD THE CODE
}
	

Below, we have a code example and how it translates to the storefront, in which only the variant labelled Large is set to handle the subscription rule:

Variable Small Selected (Subscription not an option):

Variable Large Selected (a subscription is now an option):

Note: You can also modify the 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?