How to display the add to cart button below the product?

[Ryusei]

How to display the add to cart button below the product?

https://ryusei.co.id/collections/august-vibes 

[BSSCommerce-B2B]

Hi @Ryusei , follow this

Step 1. Go to Admin -> Online store -> Theme > Customize

Step 2. Select the product list you want to display the add to cart button

Step 3. Scroll down to product card section and choose "Enable quick add button"

If it helps you, please like and mark it as the solution.

Best Regards

[Ryusei]

There isn't any

[ZestardTech]

Hello @Ryusei 

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Sections > product-grid-item.liquid file.
3. Find the code that displays the product image and description, and insert the following code below it:

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}">
<select name="id" id="product-select-{{ product.id }}">
{% for variant in product.variants %}
<option value="{{ variant.id }}"
{% if variant.available == false %} disabled="disabled" {% endif %}
>
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>
<button type="submit">Add to Cart</button>
</form>

[namphan]

Hi @Ryusei,

Currently, your product has many variants, so the add to cart button will not work, because customers will not be able to choose the variant. So Quick View would be best.

Or you want to keep this feature and change the icon to add to cart button