Quantity Selector Not Updating on Collections Page - Dawn Theme

Topic summary

A quantity selector added to the collections page (Dawn theme) wasn’t affecting the AJAX add-to-cart: regardless of input, only one item was added. AJAX here means adding to cart without a full page reload. The user shared their card-product.liquid snippet and noted they had inserted code before to “use the product page JavaScript” on the collection template.

Recommendation: remove the extra code indicated in the screenshot (the head insertion tied to product-page JS for the collection template). This custom inclusion was interfering with quantity handling on the collection cards.

Outcome: After removing that code, the quantity selector worked correctly with the AJAX add-to-cart.

Artifacts central to the issue: the card-product.liquid snippet and the head-level code added for the collection template (shown in the screenshot).

Status: Resolved; no further action requested or open questions.

Summarized with AI on February 15. AI used: gpt-5.

I have added an ajax ‘add to cart’ button to the collections page on my site and tried to add a quantity selector as well, but regardless of the quantity I input, only one product gets added to the cart.

I would like for the quantity selector to change the amount of products that get added to the cart. I am using the Dawn theme.

Here is the link to my site: https://2ue6r0m1kcauq1mt-56787075108.shopifypreview.com

Also, here is the code I have in my card-product.liquid snippet:

{% comment %}
    Renders a product card

    Accepts:
    - card_product: {Object} Product Liquid object (optional)
    - media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
    - show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
    - show_vendor: {Boolean} Show the product vendor. Default: false
    - show_rating: {Boolean} Show the product rating. Default: false
    - extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
    - lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
    - show_quick_add: {Boolean} Show the quick add button.
    - section_id: {String} The ID of the section that contains this card.

    Usage:
    {% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}

{{ 'component-rating.css' | asset_url | stylesheet_tag }}

{%- if card_product and card_product != empty -%}
  {%- liquid
    assign ratio = 1
    if card_product.featured_media and media_aspect_ratio == 'portrait'
      assign ratio = 0.8
    elsif card_product.featured_media and media_aspect_ratio == 'adapt'
      assign ratio = card_product.featured_media.aspect_ratio
    endif
    if ratio == 0 or ratio == nil
      assign ratio = 1
    endif
  -%}
  
    

      

        {%- if card_product.featured_media -%}
          

            

              {% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
              
              {% comment %}theme-check-enable ImgLazyLoading{% endcomment %}

              {%- if card_product.media[1] != nil and show_secondary_image -%}
                
              {%- endif -%}
            

          

        {%- endif -%}
        
          

            ### 
              
                {{ card_product.title | escape }}
              
            
          

          
            {%- if card_product.available == false -%}
              {{ 'products.product.sold_out' | t }}
            {%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
              {{ 'products.product.on_sale' | t }}
            {%- endif -%}
          

        

      

      
        

          ### 
            
              {{ card_product.title | escape }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ card_product.vendor }}

            {%- endif -%}

            {{ block.settings.description | escape }}

            {%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
              {% liquid
                assign rating_decimal = 0
                assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
                if decimal >= 0.3 and decimal <= 0.7
                  assign rating_decimal = 0.5
                elsif decimal > 0.7
                  assign rating_decimal = 1
                endif
              %}
              

                
              

              

                {{ card_product.metafields.reviews.rating.value }} / {{ card_product.metafields.reviews.rating.value.scale_max }}
              

              

                ({{ card_product.metafields.reviews.rating_count }})
                {{ card_product.metafields.reviews.rating_count }} {{ "accessibility.total_reviews" | t }}
              

            {%- endif -%}
            
          
            
            {% render 'price', product: card_product, price_class: '' %}

            
		 

    

  

{%- else -%}
  
    

      

        

          

            ### 
              
                {{ 'onboarding.product_title' | t }}
              
            
          

        

      

      
        

          ### 
            
              {{ 'onboarding.product_title' | t }}
            
          
          
            {%- if show_vendor -%}
              {{ 'accessibility.vendor' | t }}
              
{{ 'products.product.vendor' | t }}

            {%- endif -%}
            {% render 'price' %}

            
          

        

      

    

  

{%- endif -%}

I also added this before the of my theme to use the product page javascript:

{% if template == 'collection' %}
    
    {% endif %}

I would really appreciate help.

Hi @RyanLundberg ,

Please remove the code here, it will work fine:

Hope it helps!

Thank you so much, I’ve been having a lot of trouble with this. I really appreciate the help.

1 Like