Add to Cart Button Shopify Code | Sticky Add to Cart Button Shopify Code

Sticky Add To Cart button for Shopify is used to add a sticky bar that has add to cart button with required product information. This custom add to cart button shopify code helps to increase the conversion rate of the product page.

When the product information is long, users often find it hard to find an add to cart button because it is at the beginning or bottom of the page. So here we have shared Sticky Add to Cart Button Shopify Code will solve the issue by adding a sticky cart at the top or bottom of the page.

Most of the users are visiting the website on mobile devices. This Add to Cart Button Shopify Code helps visitors to add a product to the cart.

How To Add Sticky Add To Cart Button?

Default step: Go to shopify admin/then select your theme / then edit code

Step: 1 Go to first templates/ product.liquid

Step:2 then go to product-template section

Step: 3 then go to product-template snippet file and add this code

Step: 4 then after go to your theme.js file

Add this following code in this theme.js file

$('.add-sticky-click.second_btn').on('click',function(e){
      $('body').addClass('btn_second_show_loader');
      var addcontbtn = $(this);
      $(this).addClass('btn--loading');
      setTimeout(function(){$(addcontbtn).removeClass('btn--loading'); }, 1000);
      $('.product-single__form .add-to-cart.mobile_hide').trigger('click');
      
      
    })

    $('.ctm_size_add').on('click',function(e){
      $(this).addClass('btn_loading');
      $(this).find('.text').text('Adding');
      var _this = $(this);
      var val = $(this).closest('li').data('val');
      $('[option-name="Size"] .swatch-view .swatch-view-item[orig-value="'+val+'"] .swatch-button').trigger('click');
      var form = $(this).closest('#shopify-section-product-template').find('form');
      $('[option-name="Size"] .swatch-view .swatch-view-item[orig-value="'+val+'"] .swatch-button').removeClass('swatch-selected');
      $.ajax({
        type: "post",
        url: "/cart/add.js",
        data: form.serialize(),
        dataType: "json",
        success: function(data){
          console.log(data);
          _this.removeClass('btn_loading');
          _this.addClass('btn_loaded');
          _this.find('.text').text('Added');
          $('body').addClass('ctm_btn_zindex');
          $.getJSON('/cart',function(cart){
            theme.cart.getCart().then(window.this.buildCart(cart));
          })
          
          setTimeout(function(e){
            _this.removeClass('btn_loaded');
            _this.find('.text').text('Add to Bag');
            $('body').removeClass('ctm_btn_zindex');
          },3000);
          
          setTimeout(function(e){
            $('.sticky_pro_img .close-sticky').trigger('click');
            $('.js-drawer-open-cart').trigger('click');
          },1500);
        },
        error: function(err){
          console.log(err);
          _this.removeClass('btn_loading');
          _this.find('.text').text('Failed Add');
          setTimeout(function(e){
            _this.removeClass('btn_loaded');
            _this.find('.text').text('Add to Bag');
          },3000);
        }
      })
    })
    
  });

Step: 5 for the sticky button go to assets/custom.css

For the sticky add to cart button you can add this code

  .bottom-sticky-product {
      position: fixed;
      bottom: 0;
      width: 100%;
      z-index: 99999999;
      border: 1px solid #bdbdbd;
      background-color: #fff;
      padding: 6px;
      display: flex;
      justify-content: space-between;
  }

Benefits of Sticky Add To Cart button in Shopify

• Customers can easily add a product to the cart.
• Makes your mobile view more helpful to the visitors.
• Creates a sense of urgency.
• Boosts your conversion rate (Which, is the most important thing in for your eCommerce store).

Your Turn

These are the steps you need to follow when performing shopify buy button customization specially sticky add to cart button in Shopify. While this is an exhaustive step-by-step procedure or list, it can still help you to create sticky or custom add to cart button seamlessly.