Shopify themes, liquid, logos, and UX
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>
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.
We appreciate the diverse ways you participate in and engage with the Shopify Communi...
By JasonH Sep 9, 2024Thanks to everyone who participated in our AMA with 2H Media: Marketing Your Shopify St...
By Jacqui Sep 6, 2024The Hydrogen Visual Editor is now available to merchants in Shopify Editions | Summer '...
By JasonH Sep 2, 2024