Solved

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

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)

oscprofessional
Shopify Partner
15830 2369 3072

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>


Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing

View solution in original post

Replies 108 (108)

oscprofessional
Shopify Partner
15830 2369 3072

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>


Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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
15830 2369 3072

Hello ,

Can you please share URL link of store.

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4

www.boutq.com

 

Thank you so much.

oscprofessional
Shopify Partner
15830 2369 3072

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.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
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
15830 2369 3072

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.

 

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
Lovelyn12
Excursionist
39 1 4

Really? Huhu Is there other way I can fix it? I don't know how I am not a coding expert. 

Florencedev
Visitor
1 0 1

Hello! 


I wondered if you were able to help. 

I copied and pasted the code you shared to my Debut themed Shopify store and received the same error. 

The 'Add to Cart' button is overlapping the next line of images. Would you be able to help with the formatting as I'm really keen to add this option to my basket without the need of adding weighty apps to my site which will slow down my site speed. 

Please see attached image of the layout when I just add the code. Ideally, I would like the Add to Cart button to be the same length as the image, and remove the quantity, with the 'add to cart' button going directly to the cart drawer. 

Would appreciate any advice or help on the matter! 

Many thanks in advance. 

Florence 

Screenshot 2020-08-21 at 17.22.20.png

GaryBusey1
Excursionist
44 0 20

Also wondering how to have an add to cart button with drop down variant options

Sunny9599
Excursionist
13 1 8

Hi sir,

Can we change add to cart button in variation listing. I would like to change see all buying option instead of add to cart button in variation listing. plz help

Sepec
Tourist
5 0 0

Hi 

many thanks quite helpful

any way to resize quantity box to a more descent size and also have “add to cart” button vertically aligned with qty instead of being below ?  

 

Sepec_0-1609559766795.png

 

thanks 

 

ymke
Visitor
1 0 0

I like to have cart added to my colection. I am using Artisan theme. I am not a programmer so I am hesistant to change the code myself. Is there anyone who can help me?

 

AAAAABA
Tourist
3 0 1

I pasted that code, but now the buttons are not aligned. But also, when they press add to cart, it takes them to the cart. 

 

How do i make it so all buttons are on the same level and not messy like the photo above, and also so they click add to cart, it adds to cart but doesnt take you to the cart so customers can continue looking at other products, 

 

Thank you so much

AAAAABA
Tourist
3 0 1

how do i make it so there is no redirection to cart. It simple adds the product to cart and allows me to keep on the collection page?

Zaguh
Visitor
1 0 0

How can I change the add to cart to show Sizes instead of choosing Quantity ?

jsgemsandjewels
Visitor
2 0 0

I have the add to cart option but when you click on it, it does not add it to the cart.

TatuajeTempoare
Excursionist
14 0 2

@jsgemsandjewels Can you help me with a code please?

KRaatz
Tourist
8 0 4

@jsgemsandjewels what theme are you using?

 

KeelyD
Visitor
2 0 13

Is there a way to have it add to cart but not redirect the page to the cart when they submit? So that they can rapidly add a few products to the cart.

 

Thanks in advance!

harshillllllll
Excursionist
15 0 4
I’m facing the same issue and still not able to add it, I get the button but nothing works. And it’s redirecting to product page. Please help.
oscprofessional
Shopify Partner
15830 2369 3072

You are working on debut theme?

Get pass your Store Core Web Vital Free Speed Optimization Audit, Chat on WhatsApp | Skype : oscprofessionals-87 | Email: pallavi@oscprofessionals.com | Custom Pricing Wholesale App : Free | Hire us | Guaranteed Site Speed Optimization | Website Free Audit | Shopify Theme Customization | Build Shopify Private App | Shopify SEO | Digital Marketing
harshillllllll
Excursionist
15 0 4

yess

Alistair6
Tourist
3 0 2

Looking to solve the same issue? Is there a generic code for this?

KRaatz
Tourist
8 0 4

Hi @oscprofessional 

 

Thank you for the code. It worked well on the Venture theme.

 

when i used the added code it redirects me into the product page.

 

How do i stop this from happening?

 

Thanks in advance

EdvardSR
Tourist
3 0 2

Same here - but I managed to get it working in the past - then some update has "broken" it - now it redirects to the product, and user needs to add to basket again.

toysforlessnz
Visitor
1 0 2

Hi thanks for the code, it works for me ,but i find out a small glitch if you please can help with it, normally with out the code , the shopping cart will compare the available stock with the quantity you purchased ,if you want to add quantity more than what is available in stock, the website will not let you  ,after adding the code i can add any number as a quantity ,and that will pass the real available stock , Thanks

KRaatz
Tourist
8 0 4

Hi @oscprofessional 

 

Thanks for your code, I am using it for venture theme.

 

For the variant selector I used and edited code from product-template.liquid.

 

The edited code worked on the product page, but does not work on collection page.

 

The cart button doesn't add the the selected variant to the cart, only the 1st variant of the product.

 

Also the price doesn't change.

 

Could you please help me with this if possible.

 

Thanks in advance  

 

sp.png

 

TatuajeTempoare
Excursionist
14 0 2

Hello. I also want to insert the "Add to Cart" button in my collections page on the DEBUT theme. I tried the above codes, but they do not fit correctly on the page. 😞

 

https://tatuajetemporary.ro/

Cez08
Visitor
1 0 0

@TatuajeTempoare wrote:

Hello. I also want to insert the "Add to Cart" button in my collections page on the DEBUT theme. I tried the above codes, but they do not fit correctly on the page. 😞

 

https://tatuajetemporary.ro/



Hi, I saw your website and it looks like you have already fixed the issue. I'm having the same problem and I want to have my collection page with add to cart button. Can you help me?

KatiLivingood
Tourist
4 0 5

I see your page is aligning correctly now. Would it be possible for you to share how you fixed that alignment issue?

sjoskin
Visitor
1 0 1

Hi there, I just tried this one but the 'add to cart button' takes me to the product page..it doesn't actually add to cart

KRaatz
Tourist
8 0 4

@sjoskin you have to add the code below your  closing HTML link tag </a>. 

Peter_Wooster
Shopify Partner
23 0 11

Modern versions of the Debut theme include an ajax Add To Cart button on the product pages, but no Add To Cart button on collections.  Is there a way to leverage this code to put a proper button on items in collections?  Does anyone know which snippet this code is in?

 

Sivaram2210
Visitor
1 0 1

Hi,

I used the below code to include 'add to cart' button with quantity selector in the collection page. I use Broadcast theme.

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ product.variants.first.id }}" />
      <br />
  <center><input min="1" type="number" id="quantity" name="quantity" value="1"/></center>
<input type="submit" value="Add to cart" class="btn" />
</form>
 
I encounter the following problems
  • The alignment of the page goes for a toss. Attaching a screenshot. The alignment issue is there only on the webpage while the m-site looks fine.Web viewWeb view
  • Can I have +/- signs instead of arrow marks to change the quantity?

Can someone please help?

KatiLivingood
Tourist
4 0 5

My alignment is jacked up too.  Has anyone got any more code to fix the aligment after adding the "add to cart" button?

alignment issue.png

AngeliqueUy
Tourist
3 0 1

Hi! 

Is there a way to stay on the page after adding an item to cart? 🙂

pintsofjoy
Visitor
2 0 0
NessaSnipe
Visitor
2 0 0

Did anyone answer this for you?

RHaupt
Visitor
1 0 0

Hi there

I'm using the debut theme and the code works , except for the fact that when you add items to cart , it automatically takes you to the cart every single time.

How do I stop this?

pintsofjoy
Visitor
2 0 0
KatiLivingood
Tourist
4 0 5

Thanks for that code! It worked great, though is there any way to include a drop down of choices for variants? 

Super grateful!

Kati at InnerPrize Group

DrewFivey
Visitor
1 0 0

Hi! I have successfully added this button to my site! Thanks so much

I am just wondering now how I can make it so that when the item is added to cart it doesn't come up with a "added successfully to card, view cart, or continue shopping" message as this message shows in a horrible blue link text - or is there a way I can change the colour and font of this message?

 

Thank you 🙂

DELONG_HUANG
Excursionist
49 0 7

Hi,

 

If I want to move the button up a little bit and make it longer to align with my product picture. Would you know how I could do that?

1.JPG

 

Sunny9599
Excursionist
13 1 8
  1. <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>


    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    <div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
    {% include 'product-price', variant: product %}

    </div>

    <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <form action="/cart/add" method="post">
    {% if product.variants.size == 1 %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
    <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}

    {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
    </span>
    {% else %}
    <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>
    <input type="submit" value="See More Options" class="btn product-form__cart-submit" />



    {% endif %}



    </form>
    </div>

     

     

     

     

 

 

 

Here is the code...hope it will help you.

DELONG_HUANG
Excursionist
49 0 7

Hi Sunny9599,

 

Thank you. It works! However, I noticed that not all the rows of products have the button. I noticed that only the 2nd and 4th row has it. Would you know how I could do that?

It is Debut i am using.
 11.JPG

DELONG_HUANG
Excursionist
49 0 7

Thank you! It works after I replace all of the code in the product cart liquid. Initially, I paste at the bottom which is wrong.

 


@Sunny9599 wrote:
  1. <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>


    <span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
    <div class="h5 grid-view-item__title product-card__title" aria-hidden="true">{{ product.title | truncate:25 }}</div>
    {% include 'product-price', variant: product %}

    </div>

    <div class="grid-view-item{% unless product.available %} grid-view-item--sold-out{% endunless %} product-card">
    <form action="/cart/add" method="post">
    {% if product.variants.size == 1 %}
    <input type="hidden" name="id" value="{{ product.variants.first.id }}" />
    <button type="submit" name="add" id="AddToCart-{{ section.id }}"class="btn product-form__cart-submit" </div>
    <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}

    {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
    </span>
    {% else %}
    <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>
    <input type="submit" value="See More Options" class="btn product-form__cart-submit" />



    {% endif %}



    </form>
    </div>

     

     

     

     

 

 

 

Here is the code...hope it will help you.