Add a subscription button on your collection or any other page

Do you also want to show the subscription button on other pages apart from the product page, like on the collections page, search, or even the homepage? As not all conversions happen on the product page, It definitely helps your customers have a variety of choices and take better decisions. Here is how you can add it:

On your Shopify store, go to Sales channel → Online Store → Themes and choose the theme where you want to add the button.
Click on Actions → Edit Code and now identify the template where you want to show the subscription buttons. The common collection templates or sections are usually named as :
1. collection.liquid
2. collection-template.liquid
3. product-card.liquid

The template and section names could vary depending on the theme. The first thing is to identify the file and then proceed to the next steps.

Copy and paste the below code wherever you want to render the subscription button:

<div class="recurpay-custom-widget" data-product-id="{{product.id }}" data-product-instock="{{product.available}}" data-product-variant="{{product.selected_or_first_available_variant.id}}"></div>

Create a new snippet named as recurpay-collection.liquid and paste the below code.
NOTE: There are certain points which would vary on different stores.

The Recurpay URL's needs to be replaced with the new URLs for every deployment. Just search for https://replace.recurpay.com in below file and replace it with your Recurpay URL.

Make use of live chat available on your dashboard to know your Recurpay URL if you are not able to find it from the URL.

{{ 'recurpay-collection.scss.css' | asset_url | stylesheet_tag }}
<script>
  (function() {
    //Append Script
    var initScript = function(url, callback) {
      var script = document.createElement("script");
      script.type = "text/javascript";
      if (script.readyState){
        script.onreadystatechange = function() {
          if (script.readyState == "loaded" || script.readyState == "complete") {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {
        script.onload = function() {
          callback();
        };
      }
      script.src = url;
      document.getElementsByTagName("head")[0].appendChild(script);
    };
    
    window.recurpayCustomSubscription = function($) {
      window.recurpayCustom = {};
      recurpayCustom.domainURL = 'https://replace.recurpay.com';
      recurpayCustom.action = 'cart';
      recurpayCustom.labelText = '{{settings.recurpay_label}}';
      recurpayCustom.labelButton = '{{settings.recurpay_button}}';
      recurpayCustom.product= {};
      recurpayCustom.checkout = "shopify";
      recurpayCustom.prepaidMixedCart = false;
      
        // recurpayCustom.product.id = "{{product.id}}";
        // recurpay.product.only_subscription = "{{product.requires_selling_plan}}";
        // recurpay.product.available = "{{product.available}}";
      
      recurpayCustom.planAPI = recurpayCustom.domainURL + '/api/storefront/products/plans.json/restructure';
      recurpayCustom.checkoutAPI = recurpayCustom.domainURL + '/checkout/initiate.rp';
      
      var pdpTemplate = '',
          customSelector = ".recurpay-custom-widget",
          atcFormSelector = 'form[action*="/cart/add"], form[action*="/cart/add.js"], form[id^="product_form_"], form[data-productid], form[action*="/cart/add"][data-js-product-form], form#AddToCartForm, #addToCartFormId1, form.product-form, #AddToCartForm_id, form[data-cart-submit="data-cart-submit"][data-productid], form.lh-product-form, form.shg-product-atc-btn-wrapper, form.shopify-product-form',
          atcSelector = '[name="add"], [type=\"submit\"], button#AddToCart, button.gf_add-to-cart',
          buynowSelector = 'form[action="/cart/add"] .shopify-payment-button';

      // CART REDIRECTION
      window.recurpayCustom.recurCartBulk = function (cartData){
        var checkoutData = [],
            cartItems = cartData.items,
            cartAttributes = [],
            cartNote = cartData.note,
            recurpayCheckout = false;
        $.each( cartData.attributes, function(key, value ) {
          if(key != "Plan" && key != '_PlanId'){
            cartAttributes.push({
              name: key,
              value:value
            });
          }
        });
        for(var i=0; i < cartItems.length; i++){
          var Planid = '',
              item = cartItems[i],
              property = item.properties,
              lineProperty = [];
          if(property){
            if(property._PlanId){
              Planid = property._PlanId;
              recurpayCheckout = true;
            }
            $.each( property, function(key, value ) {
              if(key != "Plan" && key != '_PlanId'){
                lineProperty.push({
                  name: key,
                  value:value
                });
              }
            });
          }
          if(Planid == ''){
            checkoutData.push({
              quantity: item.quantity,
              variant_id: item.id,
              properties: lineProperty,
              type: 'ONETIME',
              currency:'INR'
            });
          }
          else{
            checkoutData.push({
              quantity: item.quantity,
              variant_id: item.id,
              properties: lineProperty,
              plan_id: Planid,
              type: 'SUBSCRIPTION',
              currency:'INR'
            });
          }
        }
        if(recurpayCheckout) {
          var getCheckoutData = JSON.stringify(checkoutData),
              getCartAttributes = JSON.stringify(cartAttributes),
              cartNote = $('[name="note"]').val();
          checkoutForm = $("<form action='"+recurpayCustom.checkoutAPI+"' method='post' style='display:none;'>" +
                           "<input type='hidden' name='line_items' value='"+getCheckoutData+"' />"+
                           "<input type='hidden' name='customer_id' value='"+recurpayCustom.customer+"' />" +
                           "<input type='hidden' name='note_attributes' value='"+getCartAttributes+"' />" +
                           "<input type='hidden' name='note' value='"+cartNote+"' />" +
                           "</form>");
          $('body').append(checkoutForm);
          checkoutForm.submit();
        }
        else {
          document.location.href = "/checkout";
        }
      }

      //MODAL IN CUSTOM PAGE

    function recurPDPModal(data){
        var prepaidCount = 0,
            regularCount = 0,
            prepaidDiscount = [],
            maxPrepaidDiscount = '',
            showTabs = false,
            GetPlans = "",            
            modalTemplate = '',
            collectionTemplate = '',
            modalHTML = '',
            finalTemplate = '',
            maxTotalDiscount =0,
            totalDiscount = [],
            tabHTML = "";

        $.each(data.plans, function(key, plan) {
            var DiscountPercentageHtml = '',
                TrialDescriptionHtml = '',
                DescriptionHtml = '',
                PlanHtml = '',
                PriceHTML ='',
                PlanType = 'regular';

            if(plan.type){
                PlanType = plan.type;
                if(PlanType == 'prepaid'){
                    prepaidCount += prepaidCount+1;
                    prepaidDiscount.push(plan.discount.value);
                }
                else{
                    regularCount += regularCount+1; 
                }
            }


            if(plan.discount.type == "percentage" && plan.discount.value != 0){
                totalDiscount.push(plan.discount.value);
                DiscountPercentageHtml = '<span class="recurpay__discount">(' + plan.discount.value + '% Off)</span>';
            }
            if(plan.description) {
                DescriptionHtml = '<div class="recurpay__description">' + plan.description + '</div>';
            }
            if(plan.trial.description) {
                TrialDescriptionHtml  = '<div class="recurpay__description"><span class="recurpay__description--trial">Trial Details : </span>' + plan.trial.description +'</div>';
            }

            PlanHtml += '<div class="recurpay_custom__plan" plan-type="'+PlanType+'" plan-id="'+plan.id+'"><label class="recurpay__plan--label">';
            if(key == 0){
                PlanHtml += '<input type="radio" name="recurpay-bulk-input" class="recurpay__plan--input" checked="checked" data-plan="' + plan.id + '"  data-selling-plan="' + plan.selling_plan_id + '" data-plan-name="' + plan.name + '" data-plan-discount="'+plan.discount.value+'" data-plan-type="'+PlanType+'">';
            }
            else{
                PlanHtml += '<input type="radio" name="recurpay-bulk-input" class="recurpay__plan--input" data-plan="' + plan.id + '"  data-selling-plan="' + plan.selling_plan_id + '" data-plan-name="' + plan.name + '" data-plan-discount="'+plan.discount.value+'" data-plan-type="'+PlanType+'">';
            }
            PlanHtml += '<span class="recurpay__plan--checkmark"></span><span class="recurpay__plan--title">' + plan.name + DiscountPercentageHtml+'</span></label>';            
            PlanHtml += '<div class="recurpay__plan--description">' + DescriptionHtml + TrialDescriptionHtml + '</div></div>';

            GetPlans += PlanHtml;

        })
        if(totalDiscount.length >0){
          maxTotalDiscount = Math.max.apply(Math,totalDiscount);
        }
        if(regularCount > 0 && prepaidCount >0){
            showTabs = true;
            maxPrepaidDiscount = Math.max.apply(Math,prepaidDiscount);
        }

        if(showTabs){
            tabHTML += '<div class="recurpay-tabs recur-bulk-tab"><div class="recur-custom-tab regular-tab active" plan-type="regular">Regular</div><div class="recur-custom-tab prepaid-tab" plan-type="prepaid"><span>Prepaid</span>'
            if(maxPrepaidDiscount >0 ){
            tabHTML += '<span class="recur-disc-tag">('+maxPrepaidDiscount+'% Off)</span>'
            }
            tabHTML += '</div></div>';
        }

        modalTemplate += '<div class="recurpay__widget" data-recurpay-widget><div class="new__label"><span class="new__label--text">New</span></div><div class="recurpay__content">'
        modalTemplate += '<label class="recurpay__label"><div class="recurpay__label--text"><img src="https://cdn.shopify.com/s/files/1/0265/7687/9691/files/image.svg?v=1600689960" class="recurpay__label--img"><input type="checkbox" class="recurpay_bulk__checkbox" autocomplete="off" data-subscribe-input /><span class="recurpay__checkmark"></span>'
        modalTemplate += 'SUBSCRIBE AND SAVE</div>'
        modalTemplate += '</label><span class="recur-modal-close">×</span><div class="recurpay_custom__plans">'
        modalTemplate += '<div data-recurpay-plans>'+tabHTML+GetPlans+'</div><div class="recurpay__action"><button type="button" data-recurpayCollection-action>Subscribe Now</button><div class="add-error-message"></div></div>'
        modalTemplate += '</div></div></div>';
        modalTemplate += '<input type="hidden" class="recurpay_product_id" name="add" value="'+data.product_id+'">';
        modalTemplate += '<input type="hidden" class="recurpay_plan_name" name="" value="">';
        modalTemplate += '<input type="hidden" class="recurpay_plan_id" name="" value="">';
       if(recurpayCustom.checkout == "shopify"){
          modalTemplate += '<input type="hidden" class="recurpay_selling_plan_id" name="" value="">';
        }
        modalHTML += '<div class="recurpay-modal"><div class="close_bg"></div><div class="recur-content">'
        modalHTML += '<div class="recur-preview-wrapper">'
        modalHTML += '<div class="recur-inner-modal">'
        modalHTML += '<div class="recur-form-wrapper">'
        modalHTML += '<div class="recur-inner-form">'
        modalHTML += '<div class="recur-collection-block">'+modalTemplate+'</div></div></div></div></div></div></div>'

        collectionTemplate = '<div class="recur-collection-wrapper"><span class="recurpay__plan--title"><div class="recurpay__price_wrapper"><span class="recurpay__discounted_price"></span><span class="recurpay__product_price"></span></div><span class="recurpay__discount_label" data-discount=""></span></span><button type="button" class="subscribe-btn">Subscribe Now</button></div>'
        finalTemplate = collectionTemplate+modalHTML;
        if(data.plans.length > 0){
            $('.recurpay-custom-widget[data-product-id="'+data.product_id+'"]').html(finalTemplate)
        }
        else{
            $('.recurpay-custom-widget[data-product-id="'+data.product_id+'"]').html(finalTemplate).hide();
        }
        $('.recurpay-custom-widget[data-product-id="'+data.product_id+'"]').attr('data-plan-discount',maxTotalDiscount);
    }

    if($(customSelector).length){
      var allProduct = []; 
      for(var i=0; i<$(customSelector).length; i++){
        var selector = $(customSelector)[i];
        allProduct.push($(selector).attr('data-product-id'));
      }

      $.ajax({
        method: "POST",
        url: recurpayCustom.planAPI,
        dataType: "json",
        data: {products: allProduct},
        async: false,
        success: function(response) {
          var collectionWidgetHTML = '';
          if(response != "ERROR" && response.success == true) {
            if(response.data.plans.length > 0){
              for(var i=0;i<response.data.plans.length;i++){
                recurPDPModal(response.data.plans[i]); 
              }
            }
          }
        }
      });
    }


    $(document).on('click',".recur-custom-tab", function(e) {
      e.preventDefault();
      var $this = $(this);
      var $parent = $(this).parents(".recur-collection-block");
      var subType = $this.attr("plan-type");
      var recurInput = $parent.find('.recurpay_custom__plan[plan-type="'+subType+'"]').find("[name='recurpay-bulk-input']");
      if($this.hasClass("active")){
        $parent.find('.recurpay_custom__plan').hide();
        $parent.find('.recurpay_custom__plan[plan-type="'+subType+'"]').show();
        if(($parent.find('.recurpay_custom__plan[plan-type="'+subType+'"]').find("[name='recurpay-bulk-input']:checked").length) <=0){
          $parent.find(recurInput).first().prop("checked",true).change();
        }
      }
      else{
        $parent.find('.recur-custom-tab').removeClass("active");
        $this.addClass("active");
        $parent.find('.recurpay_custom__plan').hide();
        $parent.find('.recurpay_custom__plan[plan-type="'+subType+'"]').show();
        $parent.find(recurInput).first().prop("checked",true).change();
      }    
    });

    $(document).on('click',".subscribe-btn", function(e) {
      var getModal =  $(this).parents('.recurpay-custom-widget').find(".recurpay-modal");
      if($('.recur-collection-modal').length <= 0){
          $('body').append('<div class="recur-collection-modal"></div>');
      }
      if(window.innerWidth < 768){
        $(".recur-collection-modal").html($(getModal).clone());
        $(".recur-collection-modal").find('.recur-inner-modal').hide();
        $(".recur-collection-modal").find('.recurpay-modal').slideDown(100);
        $(".recur-collection-modal").find('.recur-inner-modal').slideDown(300);
      }
     else{
        $(".recur-collection-modal").html($(getModal).clone()).find('.recurpay-modal').show();
     }

      $('body').addClass("overflow-hidden");
      if($(".recur-collection-modal").find('.recur-custom-tab').length > 0){
          $(".recur-collection-modal").find('.recur-custom-tab').first().click();
      }
      else{
          $(".recur-collection-modal").find('[name="recurpay-bulk-input"]').first().prop("checked",true).change();
      }
    });

    $(document).on('click',".recur-modal-close", function(e) {
      if(window.innerWidth < 768){
        $(".recur-collection-modal").find('.recur-inner-modal').slideUp(200);
        $(".recur-collection-modal").find('.recurpay-modal').slideUp(200);
      }
      else{
        $(this).parents('.recurpay-modal').hide();
      }
      $('body').removeClass("overflow-hidden");
    });
    $(document).on('click',".close_bg", function(e) {
      $(this).parents('.recurpay-modal').hide();
      $('body').removeClass("overflow-hidden");
    });

    $(document).on('click',"[data-recurpayCollection-action]", function(e) {
      e.preventDefault();
      e.stopPropagation();
      var $this = $(this);
      var productForm = $this.parents('.recurpay-modal');
      if(!productForm.find('[name="recurpay-bulk-input"]:checked').length){
        productForm.find('[name="recurpay-bulk-input"]').first().prop("checked",true);
      }
      var productSelector = productForm.find('[name="add"]').val(),
          variantSelector = $('.recurpay-custom-widget[data-product-id="'+productSelector+'"]'),
          quantitySelector = $('.recurpay-custom-widget[data-product-id="'+productSelector+'"]').parents('.product-list-item').find('.incubate-collections-add-to-cart-quantity-selector-input'),
          subscriptionPlanId = productForm.find('[name="recurpay-bulk-input"]:checked').attr('data-plan'),
          subscriptionPlanName = productForm.find('[name="recurpay-bulk-input"]:checked').attr('data-plan-name'),
          subscriptionPlanType = productForm.find('[name="recurpay-bulk-input"]:checked').attr('data-plan-type'),
          subscriptionPlanDiscount = productForm.find('[name="recurpay-bulk-input"]:checked').attr('data-plan-discount'),
          planVariant = parseInt(variantSelector.attr("data-product-variant")),  
          atcSelector = productForm.find('button[type="submit"],input[type="submit"]'),
          planQuantity = 1,

          planParams = {};

      if(quantitySelector.length) {
        planQuantity = parseInt(quantitySelector.val());        
      }

      if(recurpayCustom.checkout == "shopify"){
        var sellingPlanId = productForm.find('[name="recurpay-bulk-input"]:checked').attr('data-selling-plan');
        planParams = {
          id: planVariant,
          quantity: planQuantity,
          selling_plan: sellingPlanId,
          properties: {
            'Plan': subscriptionPlanName,
            '_PlanId': subscriptionPlanId
          }
        }
      }
      else{
        planParams = {
          id: planVariant,
          quantity: planQuantity,
          properties: {
            'Plan': subscriptionPlanName,
            '_PlanId': subscriptionPlanId
          }
        }
      }


      if(recurpayCustom.checkout == "recurpay" && !recurpayCustom.prepaidMixedCart && subscriptionPlanType == "prepaid"){
        $.getJSON('/cart', function(response) {
          response.items = [];
          response.items.push(planParams);
          recurpayCustom.recurCartBulk(response);
        });
      }
      else
      {
        if (recurpayCustom.action == "default" && $(atcSelector).length){
          productForm.find('.recurpay_plan_name').attr("name","properties[Plan]").val(subscriptionPlanName);
          productForm.find('.recurpay_plan_id').attr("name","properties[_PlanId]").val(subscriptionPlanId);
          if(recurpayCustom.checkout == "shopify"){
            productForm.find('.recurpay_selling_plan_id').attr("name","properties[selling_plan]").val(sellingPlanId);
          }
          $(atcSelector).first().click();
        }
        else{
          $.ajax({
            type: 'POST',
            url: '/cart/add.js',
            dataType: 'json',
            data: planParams,
            success: function(data) {
                if (recurpayCustom.checkout == "recurpay" && recurpayCustom.action == "checkout"){
                    $.getJSON('/cart', function(response) {
                      recurpayCustom.recurCartBulk(response);
                    });
                }
                else if(recurpayCustom.action == "cart"){
                    document.location.href = '/cart';
                }
                else if(recurpayCustom.checkout == "recurpay" && recurpayCustom.action == "default"){
                    document.location.href = '/cart';
                }
                else{
                    document.location.href = '/checkout';
                }
            },
            error: function(xhr, status, error) {
              var err = eval("(" + xhr.responseText + ")");
              $('.recur-collection-modal').find('.add-error-message')
              .html(err.description)
              .show().delay(3000).fadeOut();
            }
          });
        }
      }
    });
    }
    //Append jQuery if it is not there, then call to recurpayCustomSubscription
    //Otherwise directly call to recurpayCustomSubscription
    if ((typeof(jQuery) == 'undefined')) {
      initScript('//ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js', function() {
        window.recurpayScript = jQuery.noConflict(true);
        recurpayCustomSubscription(recurpayScript);
      })
    }
    else {
      recurpayCustomSubscription(jQuery);
    }
  })();
</script>

Create a new asset named recurpay-collection.scss.liquid and paste the below code:

/**===================================
 * RECURPAY DEV
 *  - CUSTOM PAGE SUBSCRIPTION
 ===================================*/

//Flexbox SASS mixins
@mixin flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
@mixin flex($values) {
  -webkit-box-flex: $values;
     -moz-box-flex: $values;
      -webkit-flex: $values;
  	  -ms-flex: $values;
  	      flex: $values;
}
@mixin flex-wrap($wrap) {
  -webkit-flex-wrap: $wrap;
     -moz-flex-wrap: $wrap;
      -ms-flex-wrap: $wrap;
          flex-wrap: $wrap;
}
@mixin justify-content($justify) {
  -webkit-justify-content: $justify;
     -moz-justify-content: $justify;
      -ms-justify-content: $justify;
          justify-content: $justify;
            -ms-flex-pack: $justify;
}
@mixin align-items($align) {
  -webkit-align-items: $align;
     -moz-align-items: $align;
      -ms-align-items: $align;
       -ms-flex-align: $align;
          align-items: $align;
}

//Variables
$color--black: #333333;
$color--white: #ffffff;
$color--brand: {{ settings.recurpay_brand_color }};
$color--border: {{ settings.recurpay_border_color }};
$button--color: {{ settings.recurpay_button_color }};
$button--background: {{ settings.recurpay_button_bg }};

//PDP Styles
.recurpay-collection-widget,.recurpay-modal{
  display:block;
  width:100%;
  clear:both;
  
  .recurpay__widget {
    clear: both;
    width: 100%;
    padding: 0px 0; 
    position: relative;  

    .new__label {
      margin: 0 0 5px;
      @include flexbox();
      @include align-items(center);
      @include justify-content(flex-end);
      display:none;
      .new__label--text {
        line-height: 1;
        font-size: 12px;
        padding: 5px 10px;
        border-radius: 2px;      
        background: $color--brand;
        color: $color--white;      
      }
    }
    .recurpay__content {
      display: block;
      position: relative;
    }
    .recurpay__label {
      font-size: 15px;
      cursor: pointer;
      padding: 12px 10px;
      padding-right: 40px;
      margin-bottom: 0px;
      line-height: 1.4em;
      pointer-events:none;
      font-weight: 400;
      color: $color--black;    
      @include flexbox();
      @include align-items(center);
      @include justify-content(space-between);
      
      .recurpay__label--text {
        @include flexbox();
        text-transform: inherit;
        @include align-items(center);
        font-weight:700;
      }
      .recurpay__checkbox, .recurpay_bulk__checkbox {      
        width: 0;
        height: 0;
        opacity: 0;
        cursor: pointer;
        position: absolute;
      }
      .recurpay__label--img {
        max-width: 22px;
        margin-right:8px;
      }
      .recurpay__checkmark {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        position: relative; 
        display: inline-block;
        border: 1px solid $color--border;
        display:none;

        &::after {        
          top: 1px;
          left: 5px;        
          width: 6px;
          opacity: 0;
          content: "";
          height: 12px;  
          visibility: hidden;
          position: absolute;        
          border: solid $color--white;
          border-width: 0 2px 2px 0;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
        }
      }
      .recurpay__checkbox,.recurpay_bulk__checkbox  {
        &:checked ~ .recurpay__checkmark {
          background: $color--black;
          border-color: $color--black;

          &::after { 
            opacity: 1;
            visibility: visible;
          }
        }
      }
    }
    .recurpay_custom__plans {
      display: block;
      border-top: 1px solid $color--border;
      .recurpay-tabs {
        @include flexbox();
        @include align-items(center);
        @include justify-content(flex-start);
        margin-bottom: 10px;
        .recur-custom-tab {
          flex: 50%;
          text-align: center;
          font-weight: 600;
          font-size:15px;
          color: #979797;
          cursor:pointer;
          padding: 10px 5px;
          border-bottom: 1px solid #e9e9e9;
          &.active{
            font-weight: 600;
            border-bottom: 3px solid #545454;
            color: #000;
            border-right: 1px solid #e9e9e9;
            border-left: 1px solid #e2e2e2;
          }
          .recur-disc-tag{
            padding-left: 2px;
            color: $color--brand;
            font-weight: 600;
          }
        }
      }
    }
    .recurpay__action {
      padding: 12px 10px;

      button {
        border: 0;
        outline: 0;
        width: 100%;
        padding: 15px 12px;
        border-radius: 3px;
        cursor:pointer;
        line-height: normal;
        font-size: 14px;
        font-weight: 500;
        height: unset;
        letter-spacing: 1px;
        text-transform: uppercase;           
        color: $button--color;
        background: $button--background;      
      }
    }
    .recurpay_custom__plan {
      padding: 12px 10px;
      @media only screen and (max-width: 600px) {
          padding: 5px 10px;
        }
      .recurpay__plan--label {
        cursor: pointer;
        font-size: 14px;   
        margin-bottom:0px;
        @include flexbox();
        padding-bottom: 5px;
        @include align-items(center);

        .recurpay__discount {
          color: $color--brand;
          padding-left: 5px;        
          font-weight: 500;
        }
      }
      .recurpay__plan--description {
        padding-left: 28px;
        font-size: 12px;
      }
      .recurpay__plan--input {
        width: 0;
        height: 0;
        opacity: 0;
        cursor: pointer;
        position: absolute;
      }
      .recurpay__plan--checkmark {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        position: relative;
        border-radius: 50%;
        display: inline-block;
        border: 1px solid $color--border;

        &::after {        
          top: 3px;
          left: 3px;        
          width: 10px;
          opacity: 0;
          content: "";
          height: 10px;  
          visibility: hidden;
          position: absolute;  
          border-radius: 50%;
          background: $color--white;
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg);
        }
      }
      .recurpay__plan--input {
        &:checked ~ .recurpay__plan--checkmark {        
          border-color: $color--black;

          &::after { 
            opacity: 1;
            visibility: visible;
            background: $color--black;
          }
        }
      }
    }
  }
}
.subscribe-btn{
  cursor:pointer;
  border: 0;
  outline: 0;      
  width: 100%;
  padding: 14px 12px;
  border-radius: 3px;
  font-size: 14px;
  font-weight: 500;     
  letter-spacing: 1px;
  text-transform: inherit;            
  color: $button--color;
  background: $button--background; 
  @media only screen and (max-width: 600px) {
    font-size: 12px;
    padding: 12px 8px;
  }
}
.recurpay-collection-widget{
  display:none;
  border: 1px solid #6fa15e;
  padding: 12px 12px;
  border-radius: 4px;
  margin-top:15px;
}
.recurpay__discount_label{
  padding-top: 5px;
  padding-bottom: 10px;
  display: block;
  font-size: 13px;
  color: #6fa15e;
  font-weight: 500;
}
.recur-modal-close{
  position: absolute;
  right: 15px;
  top: 10px;
  color: #323232;
  cursor: pointer;
  font-size: 23px;
  /* border: 1px solid #e2e2e2; */
  border-radius: 50%;
  padding: 2px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.recurpay-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  margin-top: 0!important;
  max-width: 100%!important;
  width: 100%!important;
  height: 100%!important;
  overflow: hidden;
  background-color: #000;
  background-color: rgba(0,0,0,.6)!important;
  -webkit-transition: opacity .4s ease-in;
  -moz-transition: opacity .4s ease-in;
  transition: opacity .4s ease-in;
}
.recur-content {
  background-color: #00000099;
  margin: auto;
  padding: 0;
  height: 100%;
}
.recur-preview-wrapper {
  display: flex;
  font-family: sans-serif;
  justify-content: center;
  align-items: center;
  padding: 20px;
  height: 100%;
}
.recur-inner-modal {
  width: 80%;
  max-width: 450px;
  position: relative;
  text-align: left;
  background: #fcfdfd;
  border-radius: 4px;
  box-shadow: 0 4px 10px #00000026;
  color: rgba(0,0,0,.8);
}

.recur-preview-wrapper .recur-form-wrapper {
  position: relative;
  z-index: 1;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #fff;
}
.recur-preview-wrapper .recur-inner-form {
  padding: 0px;
  top: 0;
  bottom: 0;
}
body.overflow-hidden{
  overflow:hidden;
}
@media only screen and (max-width: 768px) {
  .recur-inner-modal{
    width:100%;
  }
  .recur-preview-wrapper{
    padding:0;
    align-items: flex-end;
  }
  .recurpay-modal .recurpay__widget .recurpay__action{
    padding: 20px 15px 20px 15px;
  }
  .recurpay-modal .recurpay__widget .recurpay__action button{
    padding: 20px 12px;
    min-height:unset;
    height:unset;
  }
  .recurpay-modal .recurpay__widget .recurpay_custom__plan{
    padding:12px 10px;
  }
  .recur-modal-close {
      position: absolute;
      right: 15px;
      top: 10px;
      color: #727272;
      cursor: pointer;
      font-size: 22px;
      border-radius: 50%;
      padding: 2px;
      width: 28px;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
  }
  .recurpay-modal .recurpay__widget .recurpay__label{
    padding:17px 40px 17px 10px;
  }
}
.close_bg {
    position: fixed;
    z-index: 1;
    background: transparent;
    width: 100%;
    height: 100%;
}

Now copy and paste the below code into the file named theme.liquid just before the </body> tag

{%  include 'recurpay-collection' %}

That’s it, you are done. In case you are just still not able to see the subscription buttons just check out the troubleshooting guide below.

TROUBLESHOOTING GUIDE

Please ensure you have changed the Recurpay URL in the file named recurpay-collection.liquid
The subscription button will only show up for products that have an active subscription plan. Check for an active plan on your Recurpay dashboard for the product you are looking at.
In case it still doesn’t work, feel free to initiate a live chat from your Recurpay dashboard or reach out to us at help@recurpay.com