Adding the ADD TO CART button on a collection page

MFCO
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
Jasoliya
Shopify Expert
4341 574 1094

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
bkelly
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
Jasoliya
Shopify Expert
4341 574 1094

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.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
techypooja
Tourist
10 0 2

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
T2T
Tourist
3 0 0

Hi this works perfectly. However, the quantity button width limit (55px, applied on the product-form__input--quantity in your theme.scss.liquid) is not applying to this product grid page. Any suggestions? 

Desired qty box width presentation on individual product page: https://t2t.com.sg/collections/premium-darjeeling/products/darjeeling-makaibari-premium

At collection level qty box width that is very wide needs to be reduced to 55px : https://t2t.com.sg/collections/premium-darjeeling/premium

 

0 Likes
techypooja
Tourist
10 0 2

Hey @T2T 

Please check, its not been override by any further CSS

Also I am not able to access product page https://i.imgur.com/SWEH97I.png 

https://t2t.com.sg/collections/premium-darjeeling/products/darjeeling-makaibari-premium or https://t2t.com.sg/collections/premium-darjeeling/premium page

Please mail me all your issues at techypooja@gmail.com , will be happy to help you

Thanks,
Pooja

T2T
Tourist
3 0 0

Hello Pooja, apologies for the error. (Since we were setting up we didnt want people to order)! The products have been reinstated and now showing at the above links. Many thanks.

0 Likes
ACOFFICIAL
New Member
1 0 0

Hi Jasoliya,

Is this workable for Blockshop theme? I dont seem to have a 'snippet->product-grid.liquid' in my backend code..

0 Likes
Jasoliya
Shopify Expert
4341 574 1094

Yes, in paid theme you have to find file.

Check template->collection.liquid -> may be you can see "{% section 'collection-template' %}" if so open section->collection-template and then find "{% for product in collection.products %}" where you can see your grid file.

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes