How to Add  the “Sticky Add To Cart Button” In Shopify?

As a customer browses your Shopify store, a bar or button labelled “Sticky Add To Cart Button” sticks out at the top or bottom of the screen. As a result, it remains within easy reach of your customer, and they are no longer have to scroll back to the primary “Add to Cart” button, disrupting their purchasing focus. 

Sticky Add To Cart Button feature complements customer features like adding a “Back in Stock” notice form or making custom filters, improving the user experience.

Sticky Add to Cart Button Advantages

For your Shopify store, having a sticky “Add to Cart” button has various benefits:

1. Improved User Experience: Customers can quickly add items to their cart from any location on the page, which saves them time and effort.
2. Increased Conversion Rates: The “Add to Cart” button’s prominent positioning encourages impulse buys and lessens friction during the purchasing process.
3. Improved Mobile Shopping: A sticky “Add to Cart” button guarantees a seamless experience on smaller displays, which is important given the popularity of mobile shopping.
4. Reduced Cart Abandonment: By simplifying the checkout procedure, you reduce the likelihood that customers will leave your website without making a purchase.

By default: Navigate to Shopify admin, choose your theme, and then modify the code.

Step: 1 Click the first templates/product.liquid page.

Step 2: Go to the product-template section after that

Step 3: Add this code to the product-template snippet file.

Step 4: Go  to your theme.JSON file.

Add the code below to this theme.JSON file

class StickyAddToCart extends HTMLElement {
    constructor() {
        super();
        this.dropdownMenus = this.querySelectorAll('.stickyproductpageopitons');
        this.addToCartBtn = this.querySelector('.stickysubmit');
         this.addToCartBtntext = this.querySelector('.stickysubmit .AddCarttext');      
        this.oneclickCheckout = this.querySelector('.oneclickcheckout');
      this.oneclickCheckouttext = this.querySelector('.oneclickcheckout .AddCarttext');
        this.form = this.querySelector(`#product-stickyaddtocartform-${this.dataset.section}`);
        this.addEventListener('change', this.onChange);
        this.submit();
    }
    onChange(event) {
        const selectedOptions = [];
        this.dropdownMenus.forEach(dropdownMenu => {
            if (dropdownMenu.type === 'radio') {
                if (dropdownMenu.checked) {
                    selectedOptions.push(dropdownMenu.value);
                }
            } else {
                selectedOptions.push(dropdownMenu.value);
            }
        });        
        this.currentVariant = Productpage.find((variant) => {
            return !variant.options.map((option, index) => {
                return selectedOptions[index] === option;
            }).includes(false);
        });
        if (this.currentVariant && this.currentVariant.available) { 
          if(this.addToCartBtn){
            this.addToCartBtn.disabled = false;
          this.addToCartBtntext.textContent  = window.variantStrings.addToCart;
          }
          if(this.oneclickCheckout){
          this.oneclickCheckout.disabled = false;
          this.oneclickCheckouttext.textContent  = window.variantStrings.onecheckout;
        }
        } else {
          if(this.addToCartBtn){
            this.addToCartBtn.disabled = true;
           this.addToCartBtntext.textContent  = window.variantStrings.soldOut;
          }
          if(this.oneclickCheckout){
            this.oneclickCheckout.disabled = true;           
          this.oneclickCheckouttext.textContent  = window.variantStrings.soldOut;          
          }
        }
       if (!this.currentVariant) {   
           this.querySelector('.AddCarttext').textContent  = window.variantStrings.unavailable;   
      }
        if (this.currentVariant) {                
            this.form.querySelector('input[name=id]').value = this.currentVariant.id;
        }
        if (this.currentVariant && this.currentVariant.featured_image) {  
         this.querySelector('.stickyproductimage').src = this.currentVariant.featured_image.src;
        } 
        if (this.currentVariant) {           
       let stickySelect =  this.querySelector('.stickyselect');        
       let option = stickySelect.querySelector(`option[value="${this.currentVariant.id}"]`);
       let regPrice = option.getAttribute('price')
       if (this.querySelector('.sticky-product-compare-price')) {   
       if (option.hasAttribute("compare-price")) {
       let comPrice = option.getAttribute('compare-price');
       this.querySelector('.sticky-product-compare-price').textContent = comPrice;
       }else{
       this.querySelector('.sticky-product-compare-price').textContent = '';
       }
       }  
       this.querySelector('.sticky-product-regular-price ').textContent = regPrice;          
       }
          
    }

If you want the full functionality of Sticky Add To Cart Button In Shopify, contact us.

Conclusion

A seamless buying experience is produced by adding a sticky “Add to Cart” button to your Shopify store, which motivates users to make purchases. The button’s accessibility and visibility aid in boosting conversion rates, decreasing cart abandonment, and improving customer happiness. Install the Sticky Add to Cart Button software, pick an appropriate Shopify theme, and alter the button’s appearance to reflect your business. To maximise the button’s ability to increase your online sales, test and improve its performance frequently.