Adding the ADD TO CART button on a collection page

Highlighted
Shopify Partner
1 0 0

Hi everyone,

 

I am using the Blockshop theme by troop. I would like to add an 'Add to Cart' button to collection pages so that people don't have to go all the way to a product page. I have seen this on other sites using the same theme, but can't find out how to make it appear on mine. 

 

Thanks!

0 Likes
Highlighted
Shopify Expert
3900 559 936

Hi @MFCO 

You need code knowledge for that,

1. open snippet->product-grid.liquid file(May be its different for custom theme)

add this code next to title:

<form method="post" action="/cart/add">
  <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> 
Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
Highlighted
Tourist
11 0 0

Hi Jasoliya! I believe that this solution will help me. However, when you say to paste this next to "title". Exactly where do you mean?

I have this entire section that has "title" throughout it.

<div class="product grid__item {{ grid_item_width }} slide-up-animation animated" role="listitem">
  {% unless product.featured_image == blank %}
    <div class="supports-js" style="max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; margin: 0 auto;">
      <a href="{{ product.url | within: collection }}" class="product__image-wrapper product__image-wrapper--loading" style="padding-top:{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%;" title="{{ product.title | escape }}" data-image-link>
        <img class="product__image lazyload"
             alt="{{ product.featured_image.alt | escape }}"
             style="max-width: {{ 600 | times: product.featured_image.aspect_ratio | round }}px; max-height: 600px;"
             data-src="{{ img_url }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ product.featured_image.aspect_ratio }}"
             data-sizes="auto"
             data-image>
      </a>
    </div>
  {% else %}
    <a href="{{ product.url | within: collection }}" class=" supports-js product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  {% endunless %}

  <noscript>
    <a href="{{ product.url | within: collection }}" class="product__image-wrapper" title="{{ product.title | escape }}">
      <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
    </a>
  </noscript>

  <div class="product__title product__title--card text-center">
    <a href="{{ product.url | within: collection }}">{{ product.title }}</a>
  </div>
0 Likes
Highlighted
Shopify Expert
3900 559 936

Sorry but i have not mentioned next to title.

you can just at at bottom of this file:

open snippet->product-grid.liquid and paste at bottom

 

Want to modify or custom changes on store hire me.
Want to give Gift for time? its my Paypal too.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
9 0 1

Hello,

I have created one blog post for it. It is showing all steps regarding how you can modify theme. Post is about "Add To cart" button on Collection page and on the click of that product will be added to cart and drawer will open(in case drawer is enabled)

Please go to https://aptechy.blogspot.com/2020/08/add-to-cart-functionality-on-collection.html

Step1: 

Screenshot_1.png

Step2:

Screenshot_2.png

Thanks

0 Likes