How to add "add to cart" button on my collection page

Solved
Lovelyn12
Excursionist
39 1 4

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 every product on my collection page. Thank you in advance.

 

Please see attached file.

Screenshot 2019-08-06 10.27.25.pngScreenshot 2019-08-06 10.27.36.png

Accepted Solution (1)

Accepted Solutions
oscprofessional
Shopify Partner
9175 1561 1926

This is an accepted solution.

Hello Lovelyn12,

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">
      <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>


If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Replies 72 (72)
oscprofessional
Shopify Partner
9175 1561 1926

This is an accepted solution.

Hello Lovelyn12,

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">
      <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>


If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87

View solution in original post

Lovelyn12
Excursionist
39 1 4

Hello Pallavi,

 

I already have that code on my product-card.grid. But nothing changes. Please see attached photo.Screenshot 2019-08-06 15.50.17.png

Lovelyn12
Excursionist
39 1 4

If I add the code, the add to cart button is not on the proper place. and I want to ut it on every product on the collection page.

Screenshot 2019-08-06 15.56.30.pngScreenshot 2019-08-06 15.56.41.png

oscprofessional
Shopify Partner
9175 1561 1926

Hello ,

Can you please share URL link of store.

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Lovelyn12
Excursionist
39 1 4
oscprofessional
Shopify Partner
9175 1561 1926

Can you please paste the code of your product-card-grid.liquid code. 

I think you might have customized the file due to which its  not working acc to the default theme.

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
Lovelyn12
Excursionist
39 1 4


<div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
<a class="grid-view-item__link grid-view-item__image-container full-width-link" href="{{ product.url | within: collection }}">

<span class="visually-hidden">{{ product.title }}</span>
</a>

{% capture img_id %}ProductCardImage-{{ section.id }}-{{ product.id }}{% endcapture %}
{% capture wrapper_id %}ProductCardImageWrapper-{{ section.id }}-{{ product.id }}{% endcapture %}
{%- assign img_url = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

{% unless product.featured_image == blank %}
{% include 'image-style' with image: product.featured_image, width: max_height, height: max_height, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
{% endunless %}

<div id="{{ wrapper_id }}" class="grid-view-item__image-wrapper product-card__image-wrapper js">
<div style="padding-top:{% unless product.featured_image == blank %}{{ 1 | divided_by: product.featured_image.aspect_ratio | times: 100}}%{% else %}100%{% endunless %};">
<img id="{{ img_id }}"
class="grid-view-item__image lazyload"
src="{{ product.featured_image | img_url: '300x300' }}"
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"
alt="">
</div>
</div>

<noscript>
{% capture image_size %}{{ max_height }}x{{ max_height }}{% endcapture %}
<img class="grid-view-item__image" src="{{ product.featured_image.src | img_url: image_size, scale: 2 }}" alt="{{ product.featured_image.alt }}" style="max-width: {{ max_height | times: product.featured_image.aspect_ratio }}px;">
</noscript>

<div class="h4 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title }}</div>

{% include 'product-price', variant: product %}

</div>

Lovelyn12
Excursionist
39 1 4

When I paste the code at the bottom part. the add to cart button will be placed on the button part of the collection page.

oscprofessional
Shopify Partner
9175 1561 1926

Shopify Screens.jpg

 

Hello ,
I checked yours code for my store and it is working properly on my store debut theme.
Might be you have done some  customization in collection page because for this your collection page not showing Button properly.

 

If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87