Quick Add to Cart button on Collection Product for Debut theme Home and Collection

When you install Shopify free Debut theme, on the home page there is a featured collection. when you select your favorite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from a user experience point of view, it will be better if you can add a quick to buy button and will have more chance to make people buy your product directly and the user does not need to do another step to click the product go to product page then add to cart from there. You know every time when you need a user to do one more step you will get more chances to lose your customer.

So today I will show you how to add a [Add to Cart] quick link or button on the collection product especially on the home page and all the collection pages step by step.

Construct Add to Cart Link

Firstly we should know how the Shopify [Add to Cart] link looks like and how it works. Actually, Shopify [Add to Cart] link looks like the following:

[ Store Domain ] + ‘/cart/add?id=’ + [product_variant_id] + ‘&quantity=’ + [product_quantity]

[Store Domain]: is your Shopify store URL, for example, https://www.mojoin.com. sometimes we can ignore the store domain if you use this link in your store and with HTML <a> tag.
[product_variant_id]: is your product variant id.
[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.

when you finish fully example will be like :
https://www.mojoin.com/cart/add?id=2423498823478&quantity=1

Add Link to Collection Product

Ok, now you have known how to construct the [Add to Cart] link, let’s move to the next step to add this link to the collection product.

Log in your Shopify store backend edit your Debut theme code, then locate:
Sections -> collection-template.liquid -> line 143
or search for ‘product-card-grid‘.

then copy the following codes after line 143.

{% assign added_to_cart_link = '/cart/add?id=' | append:product.first_available_variant.id | append: '&quantity=1' %}
<a href="{{ added_to_cart_link }}"><button>ADD TO CART</button></a>
    

Line 1 : we make up Add to Cart link, here we use the Shopify product object. with the object’s variable first_available_variant we can get our product variant ID. then we add the other quantity parameter with default value 1.

Line 2 : just add HTML <a> tag with our constructed link.

when you finished, your file will look like this:

Now save the changed template file. Go to your browser type any your Shopify store collection page your page will look like this:

Add to Home Featured Collection Product

Edit your Debut theme code, then locate:
Sections -> collection.liquid -> line 30
or search for ‘product-card-grid‘.

Then copy the same above codes and insert them after line 30.
Once you have done, your codes will like this:

Now click the [Add to Cart] button from your home page featured collection products or from your product collection page directly, your customer will be redirected to the Shopify cart page, then customers can quickly check out from their cart.

Hopefully, you can get more orders!

TIPS

You might want to show product variants at the product grid list as well, please refer to:
How to show product variant under product title in the Debut theme