How to create an Add to Cart with Quantity selector on the collection pages, with hover?

Technical Q&A
,

Topic summary

A user is attempting to add a quantity selector and “Add to Cart” button to product cards on collection pages in the Dawn theme, with these elements appearing only on hover.

Current Issue:

  • After implementing code for the quantity selector, product cards are no longer clickable/linkable
  • The quantity selector itself functions correctly, but breaks the core navigation to product pages

Code Provided:

  • The user shared their modified card-product snippet code, though the formatting appears corrupted/reversed in the post
  • The code attempts to integrate quantity selection directly into collection page product cards

Status:

  • The discussion remains unresolved with no solutions provided yet
  • A follow-up inquiry from another user indicates ongoing interest in finding a solution
  • The original poster shared their store URL for reference but has not received technical guidance on fixing the clickability issue
Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

I’m using the latest Dawn theme, and would like to use the Add to Cart function from the collection pages, but with a quantity selector. I’d also (ideally) like these buttons to only appear when hovering over the product card.

I’ve added this code and the quantity selector works, but now the products are no longer clickable … any ideas?

{% 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.
  - horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false

  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: '' %}
          

        

        {%- if show_quick_add -%}
          
            {%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
            {%- if card_product.variants.size == 1 -%}
              
            {%- else -%}
              
              
            {%- endif -%}
          

        {%- endif -%}
        
          {%- 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 -%}
        

      

    

  

{%- else -%}
  
    

      

        

          

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

        

      

      
        

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

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

        

      

    

  

{%- endif -%}
2

This is my store https://dn1ql5p9da9a9j7h-57581437079.shopifypreview.com

3

hi, ever found out why? please share. thanks

1 Like