Call Us at: +1(316) 444-3132

14 days free trial - No Card Details Needed (This is a non-refundable purchase)

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

28 Jun 2023
Sticky Add To Cart Button

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() {
        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);
    onChange(event) {
        const selectedOptions = [];
        this.dropdownMenus.forEach(dropdownMenu => {
            if (dropdownMenu.type === 'radio') {
                if (dropdownMenu.checked) {
            } else {
        this.currentVariant = Productpage.find((variant) => {
            return !, index) => {
                return selectedOptions[index] === option;
        if (this.currentVariant && this.currentVariant.available) { 
            this.addToCartBtn.disabled = false;
          this.addToCartBtntext.textContent  = window.variantStrings.addToCart;
          this.oneclickCheckout.disabled = false;
          this.oneclickCheckouttext.textContent  = window.variantStrings.onecheckout;
        } else {
            this.addToCartBtn.disabled = true;
           this.addToCartBtntext.textContent  = window.variantStrings.soldOut;
            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 =;
        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="${}"]`);
       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;
       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.


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.

By Hazel

Hazel is an experienced content writer with a passion for creating compelling stories that resonate with readers. She has a proven track record of producing high-quality content for websites, blogs, and social media platforms across a range of industries.


  1. As I see you have used custom element for adding the sticky add to cart section, will you please let me know how to add the HTML part of it ?

Leave a comment

Your email address will not be published. Required fields are marked *

Are You Ready?

To Say Goodbye to the No-Sales Zone and Hello to a Thriving Business With Shopzila Shopify Theme!!


Please enter store password 3 to view live demo


  • Try your luck to unlock discounts.
Try Your Luck
Remind later
No thanks