How to Add an Add to Cart button to a Squarespace Product List Page

Squarespace does not offer an “Add to Cart” button on the product list page of any Squarespace template. Some websites may offer a familiar shopping experience, and is not necessary to see the detail of a product. In this situation, it is possible to simply append the “Add to Cart” button below the item in the product list view.

Easy To Follow Code

If you haven’t added any code to your website before, don’t be alarmed. Below are easy to follow steps on how to implement this code on your website.

Step 1.

I imagine you have already created a product page, and want to add the “Add to Cart” button to the product list page. If not, then you need to create a Product page, and add your products to the store.

Step 2.

Open the Advanced Code Injection window.

1. Click on Settings

2. Click on Advanced

3. Click on Code Injection

4. Scroll down a bit to the Footer section

Step 3. 

*If you already have the jQuery library linked on your site, then do not include it again. Only a single reference to jQuery is needed.

It is important to include a small section for styling and positioning the new button. We are adding 60px of padding beneath the product to allow room for the new button. Then setting the width of the new Add to Cart button. Both of these values can be adjusted.

The last section is the script to add the new “Add to Cart” button. There are two components to make this work. First, we append code to create a button, this needs to occur immediately. The second function updates the item-id for each button, so clicking on it adds the correct item to the cart.

Footer Code Injection

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<style>
  .products .grid-item {
    padding-bottom: 60px;
    width: 100% !important;
  }
  .products .grid-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 9999;
    bottom: 0;
    left: 0;
    right: 0;
    width: 200px;
    min-width: 200px;
    margin: auto;
  }
</style>

<script>
  $(".products .grid-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".products .grid-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

New Squarespace Product-Store Pages

If the above code does not work, then you may have the updated Commerce platform. The following code has been updated to support the latest Squarespace 7.0 and Squarespace 7.1 templates.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
  .ProductList-grid .ProductList-item {
    padding-bottom: 70px;
  }
  .ProductList-grid .ProductList-item .sqs-add-to-cart-button {
    position: absolute;
    z-index: 1000;
    bottom: 0;
    left: 0;
    right: 0;
    width: auto;
    margin: auto;
    padding-right: 5px;
    padding-left: 5px;
  }
  .ProductList-grid .ProductList-item .ProductList-overlay {
   margin-bottom: 70px; 
  }
</style>

<script>
  $(".ProductList-grid .ProductList-item").each(function(e){
    $(this).append('<div class="sqs-add-to-cart-button sqs-suppress-edit-mode sqs-editable-button" role="button" tabindex="0" data-product-type="1" data-original-label="Add To Cart"><div class="sqs-add-to-cart-button-inner">Add To Cart</div></div>');
  });
  $(function() {
    $(".ProductList-grid .ProductList-item").each(function(e){
      var dataItemId = $(this).attr('data-item-id');
      $(this).find('.sqs-add-to-cart-button').attr('data-item-id', dataItemId);
    });
  });
</script>

Step 4. 

Above is all the code put together in the Footer Injection. Do not add it to Header Injection.

That is about it. You should now have an “Add to Cart” button below all products on the Product List page and this code can be applied to any Squarespace template.