<!-- wp:paragraph -->
<p>When you install Shopify free Debut theme, on home page there is a featured collection. when you select your favourite product collection to show them, you will find there is no [Add to Cart] quick buy button, so from 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 to buy you product and 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 user to do one more step you will get more chance to lose your client.</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: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.<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:paragraph -->
<p>Ok, now you have known how to make up 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></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="{{ product.url | within: collection }}">ADD TO CART</a><br>{% endcomment %}<br>{% assign added_to_cart_link = '/cart/add?id=' | append:product.first_available_variant.id | append: '&amp;quantity=1' %}<br><a href="{{ added_to_cart_link }}">ADD TO CART</a><br></p>
<!-- /wp:paragraph -->

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

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

<!-- wp:paragraph -->
<p><a href="https://apps.shopify.com/hypervisual">Hypervisual</a>&nbsp;has powerful tools to embed your products with variant selectors and an add to cart button. But sometimes you want to create a link which adds a product (or products!) to your cart without the product image, product name or variant selector. Here's how to do it.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>If you have Hypervisual installed, open your product page in your store, and add ?LIST_VARIANTS to the end of the URL, for example:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><a href="https://www.your-store.com/products/amazing?LIST_VARIANTS">https://www.your-store.com/products/amazing?LIST_VARIANTS</a><br><br>When you visit that page you'll get a list of all of your product variants, the add to cart URLs and the direct to checkout URLs.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>(If this doesn't work, and your product page URL already has question mark in it, try &amp;LIST_VARIANTS instead.)<br><br>If you don't have Hypervisual installed, things get trickier. You need to construct the link manually like this:</p>
<!-- /wp:paragraph -->

<!-- wp:embed {"url":"https://www.your-store.com/cart/add?id=12345"} -->
<figure class="wp-block-embed"><div class="wp-block-embed__wrapper">
https://www.your-store.com/cart/add?id=12345
</div></figure>
<!-- /wp:embed -->

<!-- wp:paragraph -->
<p>and replace&nbsp;<strong>12345</strong>&nbsp;with your variant ID. To find the variant ID, the easiest way is to open the product inside your Shopify admin, click 'Edit' next to the particular variant you want to have added to the basket, then pick the variant ID up from the URL that's then inside your browser address bar: it's the very last number at the end of the web address.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To learn how to make direct-to-checkout links without Hypervisual installed, read this Shopify help article:&nbsp;<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 -->