Shopify ADD TO CART Button On Collection Page without App

Shopify ADD TO CART Button On Collection Page without App

Foysal 0

Hello everyone, I am currently using debut theme. How to add “add to cart” button on my collection pages. And I want to show % discount on every product on my collection page. Thank you in advance. This is the question that I found in Shopify Community.

In this tutorial, I am going to provide very easy solution for this issue without any coding or apps. This will be very helpful and money-saving for you.

Just follow the steps for Debut theme for Add to cart button on collection pages.

  • From Shopify Admin select Online Store and click on Themes
  • Choose your main theme
  • Click the . . . on the top left-right (see below) and hit Edit code
  • Open Snippets -> product-card-grid.liquid File and paste below code at the end of the page.
<form method="post" action="/cart/add" class="col-button">
  <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
  <input min="1" type="number" id="quantity" name="quantity" value="1"/>
  <input type="submit" value="Add to cart" class="btn" />
</form>
.col-button{}

.col-button input[type="number"] {
    float: left;
    width: 30%;
    padding: 9px;
    border-radius: 5px 0px 0px 5px;
}



.col-button input[type="submit"] {
    width: 70%;
    border-radius: 0px 5px 5px 0px;
}
Shopify Expert
Shopify Expert

Service I Offer?

Build eCommerce Website with Shopify

Build eCommerce Website with WordPress

eCommerce Website Maintenance

Contact me for more details

Tags:

Foysal

I'm a Web Designer, eCommerce Business Developer based in Habiganj. I specialize in creating e-commerce business websites for great individuals and small-medium sized businesses, helping them to market their products or services successfully on the web. Interested in working together? Get in touch so we can discuss your requirements.

Leave a Reply