Adding an 'Add to Cart' Button on Collection Page in Shopify

The “Add to Cart” button is the most crucial call to action in any e-commerce store. It’s essential to strategically place this button in multiple locations to maximize sales opportunities. In this guide, I’ll show you how to integrate an “Add to Cart” button on the collection page of the Dawn theme, making it easier for customers to shop directly from your collections.

Code: https://github.com/ndrishinski/blogs/commit/8981363432a3e15afacd6c90ca03107667cdda31

Prefer video?

Enjoy, otherwise read on!

Edit Product Card

If we look at the ‘featured-collection’ and ‘product-grid’ sections where our collection products are being shown, we can see that they are referencing the ‘card-product.liquid’ snippet. This is the file that we want to update to show our button. Near the bottom of the file, I am going to add this HTML snippet:

...
</div>
<!-- add here -->
<div class="collection-add-to-cart" onclick="addProductFromCollection({{ card_product.selected_or_first_available_variant.id }})">
    <span class="material-symbols-outlined">
      add_shopping_cart
    </span>
  </div>
<!-- add above here -->
{%- else -%}
...

This code provides our button that we will see once we update our styles, and it also adds a JavaScript event handler for the click event. Once this button is clicked it will call our function and pass the variant ID of that product so we can add it to cart.

Next let’s add some styles so we can position this button correctly. At the top of the ‘card-product.liquid’ snippet let’s add these styles to the top of the file:

{% style %}
  .collection-add-to-cart {
    position: absolute;
    height: 40px;
    width: 40px;
    background: #1d438a;
    border-radius: 50%;
    top: 60%;
    right: 18px;
    z-index: 99;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }

  .collection-add-to-cart:hover {
    background: #778eb8;
  }

  .material-symbols-outlined {
    color: white;
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24
  }
{% endstyle %}

This makes our button have an absolute position and z-index which will appear over the existing card. It also places the button at the bottom right corner of the collection image. There is also a style for material icons that we will import in just a moment.

Lastly in this file, right below the styles let’s paste the JavaScript needed to add the product to the cart, and navigate to the cart page.

<script>
  function addProductFromCollection(id) {
    let formData = {
     'items': [{
      'id': id,
      'quantity': 1
      }]
    };
    fetch(window.Shopify.routes.root + 'cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then(async response => {
      let final = await response.json()
      window.location.href = '{{ routes.cart_url }}'
      return final
    })
    .catch((error) => {
      console.error('Error:', error);
    });
  }
</script>

Lastly in this file, right below the styles let’s paste the JavaScript needed to add the product to the cart, and navigate to the cart page.

Import Material Icons

Our HTML is referencing an icon that represents adding a product to a shopping cart. We need to import this icon library from Google. If we open ‘theme.liquid’ then we can add this link towards the top:

<head>
...
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />

Conclusion

After saving our files, we should be able to preview our theme and see a functioning ‘Add to Cart’ button our collections! If you’d like to stay in the loop on Shopify related projects and join a private slack channel dedicated to Shopify development please fill out the form under the Stay in Touch section!

Shopify Development