How can I create an Ajax add to cart button in a custom section?

Topic summary

A developer created a custom product section but encountered an issue where clicking “Add to Cart” redirected to the cart page instead of using AJAX functionality. They wanted to implement a quick-add feature similar to Dawn theme’s collection pages that updates the cart drawer and count without page refresh.

Solution Provided:

  • A jQuery-based AJAX script was shared to handle add-to-cart requests asynchronously
  • The solution required adding a specific class (“addToCartForm”) to the add-to-cart form
  • Initial implementation successfully prevented redirects

Remaining Issues:

  • Cart drawer and cart count don’t update in real-time after adding items
  • An updated script was provided to address the cart drawer functionality
  • A bug was identified where clicking “Add to Cart” twice still redirects to the cart page instead of incrementing quantity

The discussion remains ongoing with the real-time cart update functionality not fully resolved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.

SO i have Created a section that renders products, but when i click add to cart it redirects to cart page. I want to create a ajax add to cart button, that when clicked will show the products in the cart and update the cart count total.

Pretty much dawns quick add for the collections but in my own custom section.

Thank you in advance.

Section


  

    

      

        {% if section.settings.product_display_collection %}
          {% assign product_limit = section.settings.product_display_limit | default: 4 %}
          {% assign collection_handle = section.settings.product_display_collection.handle %}
          {% assign collection = collections[collection_handle] %}
          {% if collection.products.size > 0 %}
            

              {% for product in collection.products limit: product_limit %}
                

                  
                    

                      
                    

                  
                  

                    
                      ### {{ product.title }}
                    
                    

                      
                        

{{ product.price | money }}

                      
                    

                    
                  

                

              {% endfor %}
            

          {% else %}
            

No products in the selected collection.

          {% endif %}
        {% else %}
          

No collection selected.

        {% endif %}
      

      
        

          

            {% if section.settings.product_display_image %}
              
                
              
            {% else %}
              

No image selected.

            {% endif %}
          

        

      

    

  

Hello @KPSLuke , Try adding the below script to your code.

 {% comment %} If you have added the jQuery CDN already do not add {% endcomment %}

That works perfectly the only thing im trying to get to work next was having the cart ui update when an item is added to cart without redirecting or page refresh. But otherwise your solution has helped me alot.

@Huptech-Web Sorry i forgot to mention your name

Hello @KPSLuke , You want to show the Cart count on the mini cart icon, Correct?

@Huptech-Web I want to update the cart count and the cart drawer, without having to refresh the page or be redirected to cart url. Want to update cart contents in real time

Okay @KPSLuke , can you please your store URL? I need to check it for the cart drawer functionality.

@Huptech-Web
https://gadgettimeza.myshopify.com/
password: testpassword

@Huptech-Web

url = https://gadgettimeza.myshopify.com/

password: testpassword

Hello @KPSLuke , Please replace the below script with the script I provided Yesterday!


Also, please add the “addToCartForm” class to your add-to-cart form.


1 Like

When we click the “Add to Cart” button twice, it redirects to the cart page. Ideally, it should simply increase the product quantity in the cart without redirecting. Any help would be greatly appreciated.