Blog

Dawn Theme – How To Add “Add To Cart” Button On My Collection Page

Follow Below steps to add "Add to Cart" button on collection page.

  1. Go to theme -> Action -> Edit Code -> Snippets -> product-card.liquid
  2. Paste below code at the end of this file.
<!--  cart button on collection page :: starts -->

<style>
  .collection-cart-btn {
    display: none;
  }
  .collection-grid-section .collection-cart-btn {
    display: block;
  }
</style>
<form method="post" action="/cart/add" class="collection-cart-btn">
  <input type="hidden" name="id" value="{{ product_card_product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" />
</form>

<!--  cart button on collection page :: ends -->

Note: If above code is not working then paste below code:

<!--  cart button on collection page :: starts -->

<style>
  .collection-cart-btn {
    display: none;
  }
  .collection-grid-section .collection-cart-btn {
    display: block;
  }
</style>
<form method="post" action="/cart/add" class="collection-cart-btn">
  <input type="hidden" name="id" value="{{ card_product.variants.first.id }}" />
  <input type="submit" value="Add to cart" class="button" style="margin-top: 17px; width: 100%;" />
</form>

<!--  cart button on collection page :: ends -->
Tags: , , ,

Leave a Reply