Add to Cart Button not Working

Topic summary

A user is experiencing issues with a custom “Add to Cart” button placed next to product prices that isn’t functioning. They’ve shared Liquid code from what appears to be a product card template but lack knowledge about their theme since the website was outsourced for development.

Troubleshooting suggestions provided:

  • Identify the Shopify theme being used, as solutions vary by theme (Dawn theme has specific documented fixes)
  • Check if the theme already includes native “Add to Cart” functionality on collection pages
  • Replace the button with a proper form submission to the /cart/add endpoint using variant IDs instead of product IDs

Key technical points:

  • The button needs to submit to /cart/add with a variant ID
  • Standard implementation redirects to cart page; replicating cart drawer behavior requires examining existing theme handlers
  • User attempted the suggested code replacement but reported it still doesn’t work

Current status: The issue remains unresolved. One responder requested console error logs (accessible via CTRL+SHIFT+J in Chrome) to further diagnose the problem, but no follow-up has been provided yet.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.

I have added the Add to cart button on just below of each product right side the price, but its not working.

I have mentioned the code below:

{% comment %}
Accepts:

  • product: {Object} Product (required)
  • show_variant_options: {Boolean} Show variant swatches at the bottom (optional)
  • hide_title: {String} Hide product title (optional)
  • image_ratio: {String} Product media ratio (optional)
  • pcard_alignment: {String} Product alignment (optional)
  • show_vendor: {Boolean} Show product vendor (optional)
  • show_cart_button: {Boolean} Show Add to cart button (optional)
  • show_quickview_button: {Boolean} Show Quickview button (optional)
  • show_wishlist_button: {Boolean} Show Wishlist button (optional)
  • show_compare_button: {Boolean} Show Compare button (optional)
  • column_wrapper: {Boolean} Wrap product card (optional)

Usage:
{% render ‘product-card-1’, product: product %}
{% endcomment %}

{% liquid
if show_variant_options == nil
assign show_variant_options = settings.show_swatch_option
endif

assign show_title = true
if hide_title == true
assign show_title = false
endif

if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: ‘1/1’
endif

if image_ratio == ‘original’
assign image_ratio = product.featured_image.aspect_ratio | default: ‘1/1’
endif

if show_vendor == nil
assign show_vendor = settings.show_vendor
endif

assign sold_out = false
if product.available == false
assign sold_out = true
endif

assign discount = ‘’
assign compare_at_price = product.compare_at_price
assign price = product.price
assign on_sale = false
if compare_at_price > price
assign on_sale = true
assign discount = compare_at_price | minus: price | times: 100 | divided_by: compare_at_price
endif

assign show_on_sale_badge = false
if settings.on_sale_badge != ‘hide’ and on_sale
assign show_on_sale_badge = true
endif

assign quick_add_text = ‘products.product.quick_add’ | t
assign quick_add_text = ‘Quick View’

assign sold_number = product.metafields.foxkit.sold_number

if product.available
assign variant_id = product.first_available_variant.id
else
assign variant_id = product.selected_or_first_available_variant.id
endif
assign selected_variant_id = ‘’
if section.settings.change_product_variant_on_fitlering
assign variant_id = product.selected_or_first_available_variant.id
assign selected_variant_id = product.selected_variant.id
endif

if pcard_alignment == nil
assign pcard_alignment = settings.pcard_alignment
endif

assign pcard_default_image = settings.pcard_default_image
if image_ratio == nil or image_ratio == blank
assign image_ratio = settings.pcard_image_ratio | default: ‘1/1’
endif

if show_cart_button == nil
assign show_cart_button = settings.show_cart_button
endif

if show_quickview_button == nil
assign show_quickview_button = settings.show_quickview_button
endif

if show_wishlist_button == nil
assign show_wishlist_button = settings.show_wishlist_button
endif

if show_compare_button == nil
assign show_compare_button = settings.show_compare_button
endif

assign preview_image = product.media[0].preview_image
if section.settings.change_product_variant_on_fitlering == true and product.selected_variant.image != nil
assign preview_image = product.selected_variant.image
endif

if image_ratio == ‘original’
assign image_ratio = product.media[0].aspect_ratio | default: ‘1/1’
endif

assign second_image = ‘’
if settings.show_second_img and product.images.size > 1 and product.images[1] != blank
assign second_image = product.images[1]
endif

assign product_card_classes = ‘m-product-card m-product-card–style-1’
if sold_out
assign product_card_classes = product_card_classes | append: ’ m-product-card–soldout’
endif
if on_sale
assign product_card_classes = product_card_classes | append: ’ m-product-card–onsale’
endif
if settings.show_second_img and second_image != blank
assign product_card_classes = product_card_classes | append: ’ m-product-card–show-second-img’
endif
%}

{%- if column_wrapper -%}

{%- endif -%}

{% if preview_image != blank %}
{%- liquid assign asp_rat = image_ratio | default: preview_image.aspect_ratio if asp_rat == 'original' assign asp_rat = preview_image.aspect_ratio endif assign alt = alt | default: preview_image.alt | escape -%} {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%} {{ preview_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}

{%- if second_image != blank -%}

{%- liquid assign asp_rat = image_ratio | default: second_image.aspect_ratio if asp_rat == 'original' assign asp_rat = second_image.aspect_ratio endif assign alt = alt | default: second_image.alt | escape -%} {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%} {{ second_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }}
{%- endif -%} {% else %} {% if pcard_default_image != blank %} {%- liquid assign asp_rat = image_ratio | default: pcard_default_image.aspect_ratio if asp_rat == 'original' assign asp_rat = pcard_default_image.aspect_ratio endif assign alt = alt | default: pcard_default_image.alt | escape -%} {%- capture sizes -%}(min-width: {{ settings.container_width }}px) {{ settings.container_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2){%- endcapture -%} {{ pcard_default_image | image_url: width: 1100 | image_tag: loading: 'lazy', class: 'm:w-full m:h-full', alt: alt, sizes: sizes, widths: '165, 360, 535, 750, 940, 1100' }} {% else %}
{{ 'product-1' | placeholder_svg_tag: 'm-placeholder-svg' }}
{% endif %} {% endif %}
{% if settings.show_badge_sale %} {% for tag in product.tags %} {% if tag contains 'tag__' %} {%- liquid assign tag_content = tag | split: '__' | last assign type = tag_content | split: '_' | first assign tag_name = tag_content | split: '_' | last -%} {{ tag_name }} {% endif %} {% endfor %} {% endif %} {% if show_on_sale_badge %} {%- liquid if settings.on_sale_badge == 'show_percentage' assign sale_class = 'm-product-tag--discounted' else assign sale_class = 'm-product-tag--sale' endif -%} {%- if settings.on_sale_badge == 'show_text' -%} {{ 'products.product.on_sale' | t }} {%- elsif settings.on_sale_badge == 'show_percentage' -%} {{ discount | append: '%' | prepend: '-' }} {%- endif -%} {% endif %}
{%- if settings.show_badge_soldout -%} {{ 'products.product.sold_out' | t }} {%- endif -%}

{%- if show_quickview_button or show_wishlist_button or show_compare_button -%}

{% liquid assign tooltips = 'compare,quickview' assign tooltip_items = tooltips | split: ',' %}

{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == ‘growave’ %}

{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %} {% unless the_snippet_fave_icon contains 'Liquid error' %} {{ the_snippet_fave_icon }} {% else %} {% render 'mm-ssw-widget-faveicon' with product.id %} {% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %} {% liquid render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--left' %} {% endif %} {%- endif -%}

{%- for tooltip in tooltip_items -%}
{%- assign settings_key = ‘show_’ | append: tooltip | append: ‘_button’ | replace: ‘add-to-cart’, ‘cart’ -%}
{%- if [settings_key] -%}
{% render ‘tooltip’, type: tooltip, section: section, product: product, class_name: ‘m-tooltip–left’ %}
{%- endif -%}
{%- endfor -%}

{%- endif -%}

{% liquid
assign metafields_time = product.metafields.global[‘minimog_countdown’]
if settings.show_countdown and metafields_time != blank
render ‘countdown-timer’, time: metafields_time, separator: false, short_label: true, extra_classes: ‘m-product-card__countdown m:hidden’
endif
%}

{%- if sold_out == false -%}

{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section, button_style: 'white' %}
{% endif %}
{%- if show_vendor -%} {{ product.vendor }} {%- endif -%} {% if show_title == true %}

{{ product.title }}

{{ product.metafields.judgeme.badge }}
{% endif %} {% if settings.show_review_badge %}
{% render 'product-reviews-app__badge', product: product %}
{% endif %}
{% render 'product-prices', product: product, is_product_card: true %} {% if show_cart_button %} Add to Cart {% endif %}

{% if product.has_only_default_variant == false and show_variant_options %}
{% render ‘product-card-option’, product: product, show_variant_options: show_variant_options, pcard_alignment: pcard_alignment %}
{% endif %}

{{ product.description | strip_html | truncatewords: 15, '...' }}
{% render 'product-card-quick-add-btn', product: product, quick_add_text: quick_add_text, section: section %}
{% liquid assign tooltips = 'compare,quickview,' assign tooltip_items = tooltips | split: ','

if show_cart_button
render ‘tooltip’, type: ‘add-to-cart’, section: section, product: product, class_name: ‘m-tooltip–top m-product-card__atc-button’
endif
%}

{%- if show_wishlist_button -%}
{% assign wishlist_app = settings.wishlist_app %}
{% if wishlist_app == ‘growave’ %}

{% capture the_snippet_fave_icon %}{% render 'ssw-widget-faveicon' with product.id %}{% endcapture %} {% unless the_snippet_fave_icon contains 'Liquid error' %} {{ the_snippet_fave_icon }} {% else %} {% render 'mm-ssw-widget-faveicon' with product.id %} {% endunless %}
{{ 'products.product.add_to_wishlist' | t }}
{% else %} {% liquid render 'tooltip', type: 'wishlist', product: product, class_name: 'm-tooltip--top' %} {% endif %} {%- endif -%}

{%- for tooltip in tooltip_items -%}
{%- assign settings_key = ‘show_’ | append: tooltip | append: ‘_button’ | replace: ‘add-to-cart’, ‘cart’ -%}
{%- if [settings_key] -%}
{% render ‘tooltip’, type: tooltip, section: section, product: product, class_name: ‘m-tooltip–top’ %}
{%- endif -%}
{%- endfor -%}

{%- if column_wrapper -%}
{%- endif -%} ![add to cart.png|1902x971](upload://Alj9aHk9VQDg1gIkHFbnDkJnEmq.jpeg)

Hello there @Janloveslari what Shopify theme do you use? It is important in determining the solution here. For example, if you are using the Shopify dawn theme you can try out the process in the comment marked as a solution here https://community.shopify.com/c/technical-q-a/why-isn-t-my-add-to-cart-button-functioning/td-p/1345092

Hi @Janloveslari ,

What theme are you using? Is this a custom coded button that you added yourself? I’ve read that most themes already natively provide an “add to cart” button for collection pages these days, so it might be worth verifying whether this is the case with your current theme or not.

In the event that there is no such support in your theme, you would need to replace your button tag with something like this in order to submit to the /cart/add endpoint:


A few things to note:

  1. You need to use a variant ID to add to the cart, not a product ID, so you’ll notice the “id” value is changed in the above snippet.
  2. This code will redirect to the shopping cart page when clicking the button and adding to the cart.
  3. To replicate the existing behavior of staying on the current page and pulling out the cart drawer, you will have to look into what submit handler is attached to the other “add to cart” forms that are already included in your theme (eg: the button that’s provided for the product page).

Hi @CoffeeAndCode Thanks for the reply.

But i don’t have any idea about the theme, i have outsourced this website for development.

and i replace the code but its not working

hmm, that’s strange that it doesn’t work for you. I tried it myself and it worked fine from Chrome devtools. It’s a bit hard to troubleshoot any further without more context or access to the source code.

Are you seeing any error in the console when you click the button or anything? If you’re on Chrome you can view the console by pressing CTRL, SHIFT, and J together and clicking on the “Console” tab to see any errors that might print in the area below the tab (screenshot attached).