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

[Lovelyn12]

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.

[oscprofessional · 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>

  
  
  

[Lovelyn12]

Hello Pallavi,

I already have that code on my product-card.grid. But nothing changes. Please see attached photo.

[Lovelyn12]

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.

[oscprofessional]

Hello Lovelyn12,

Can you please share URL link of store.

[Lovelyn12]

www.boutq.com

Thank you so much.

[oscprofessional]

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.

[Lovelyn12]

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

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]

Hello Lovelyn12,
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.

[Lovelyn12]

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

[Florencedev]

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 

[GaryBusey1]

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

[Sunny9599]

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]

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 ?  

thanks 

[ymke]

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]

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]

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]

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

[jsgemsandjewels]

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

[TatuajeTempoare]

@jsgemsandjewels Can you help me with a code please?

[KRaatz]

@jsgemsandjewels what theme are you using?

[William_St]

I have a similar code in my theme and I figured out that I just have to add it before the last <input /> element.

[KeelyD]

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]

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]

You are working on debut theme?

[harshillllllll]

yess

[Alistair6]

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

[KRaatz]

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]

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]

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]

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  

[TatuajeTempoare]

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]

---

@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]

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

[sjoskin]

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]

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

[Peter_Wooster]

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]

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 view
• Can I have +/- signs instead of arrow marks to change the quantity?

Can someone please help?

[KatiLivingood]

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

[AngeliqueUy]

Hi! 

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

[pintsofjoy]

See instructions here: https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

This worked for my store.

[NessaSnipe]

Did anyone answer this for you?

[RHaupt]

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]

These instructions worked for me to stay on the page: https://community.shopify.com/c/Shopify-Design/Product-pages-Stay-on-the-product-page-after-adding-p...

[KatiLivingood]

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]

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]

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?

[Sunny9599]

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]

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.