Skip to content

Instantly share code, notes, and snippets.

@vosters
Created January 3, 2018 03:27
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save vosters/0be4a6429fbd89ff4e624d45c2b1518a to your computer and use it in GitHub Desktop.
Save vosters/0be4a6429fbd89ff4e624d45c2b1518a to your computer and use it in GitHub Desktop.
Display Quick Add To Cart in Shopify Collection On Hover (w/ single option dropdown)
{% comment %}
QUICK ADD TO CART
https://ecommerce.shopify.com/c/ecommerce-design/t/quick-add-to-cart-254790
Copy and paste this code within your div for your product display within a collection
{% endcomment %}
<form action="/cart/add" method="post" enctype="multipart/form-data" id="AddToCartForm" class="quick-add-to-cart small--hide clearfix">
{% if product.variants.size > 1 %}
<select id="product-select-{{ product.id }}" name='id' class="text-center">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% else %}
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
{% endif %}
{% if product.available %}
<button type="submit" name="add" id="AddToCart" class="btn btn-mini text-center" onclick="ga('send', 'event', 'Quick Add To Cart', '{{ product.type }}', '{{ product.title }}');">Add To Cart</button>
{% else %}
<h6>Out of Stock</h6>
{% endif %}
</form>
@abcandido
Copy link

Is there a way to make the cart popup appear when adding to cart on dawn theme? which ways would you recommend?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment