<!-- wp:paragraph -->
<p>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 chance to lose your customer.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Construct Add to Cart Link </h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>[ <strong>Store Domain</strong> ] + '/cart/add?id=' + [<strong>product_variant_id</strong>] + '&amp;quantity=' + [<strong>product_quantity</strong>]</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>[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 &lt;a> tag.<br>[product_variant_id]: is your product variant id, if you don't know how to get the product variant id, please have a look at this article.  <br>[product_quantity]: is the number how many products you want to add to the cart for the user, default it is 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>when you finish fully example will be like :<br>https://www.mojoin.com/cart/add?id=2423498823478&amp;quantity=1</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Add Link to Collection Product</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Login your Shopify store backend edit your Debut theme code, then locate:<br>Sections -> collection-template.liquid -> line 143<br>or search for 'product-card-grid'.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>then copy the following codes after that line.</p>
<!-- /wp:paragraph -->

<!-- wp:enlighter/codeblock -->
<pre class="EnlighterJSRAW" data-enlighter-language="generic" data-enlighter-theme="" data-enlighter-highlight="" data-enlighter-linenumbers="" data-enlighter-lineoffset="" data-enlighter-title="" data-enlighter-group="">{% assign added_to_cart_link = '/cart/add?id=' | append:product.first_available_variant.id | append: '&amp;amp;quantity=1' %}
&lt;a href="{{ added_to_cart_link }}">&lt;button>ADD TO CART&lt;/button>&lt;/a>
    </pre>
<!-- /wp:enlighter/codeblock -->

<!-- wp:paragraph -->
<p>Line 1 : we make up Add to Cart link, here we use Shopify <a href="https://shopify.dev/api/liquid/objects/product">product object</a>.  with the object's variable <em>first_available_variant </em>we can get our product variant ID. then we add the other quantity parameter with default value 1.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Line 2 : just add HTML &lt;a> tag with our constructed link. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>when you finished, your file will looks like this:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":348,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://www.mojoin.com/wp-content/uploads/2021/07/add-tocart-code-1024x379.png" alt="" class="wp-image-348"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article: <a href="https://help.shopify.com/themes/customization/cart/use-permalinks-to-preload-cart">Use permalinks to pre-load the cart</a>.</p>
<!-- /wp:paragraph -->