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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024