"add to cart" button under all products path fail in Dawn Theme

30 0 3



I have added a button to my website under all products, however, it does not animate like the theme buttons do on hover and I don't think it works because it takes the customer directly to the product instead of adding to cart.


What code do I need to fix the path so it adds to cart and they can keep browsing? how can I get the button to animate like the others?


this is what I added under product.card.liquid:


<product-form class="product-form">
{%- form 'product', product_card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
{{ form | payment_terms }}
<input type="hidden" name="id" value="{{ product_card_product.selected_or_first_available_variant.id }}">
<div class="product-form__buttons">
<button type="submit" name="add" class="product-form__submit button button--full-width button--secondary">
<span>Add to cart
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
{% if product_card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
{%- if product_card_product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}

{%- endif -%}

{%- endform -%}



Screen Shot 2021-11-22 at 1.58.14 PM.png

Replies 2 (2)
Shopify Partner
24919 2497 9033


Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing