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

mjdubarr
Tourist
30 0 3

Hello,

 

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
</span>
<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>
</svg>
{% 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 -%}
</div>
</button>

</div>
{%- endform -%}
</product-form>

 

 

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

Replies 2 (2)
KetanKumar
Shopify Partner
24919 2497 9033

@mjdubarr 

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