"add to cart" button to the collection level - (Prestige THEME)

Laura41
New Member
2 0 1

Hi All,

Q1. I would be REALLY grateful if anyone could post how to "add to cart" button to the collection level - (Prestige THEME)

Q2. I would like the product in the collection level to be added to the cart (while staying on the collection page)

I have used this code I found so far: (the formatting/style is not the same as my site though., it takes them to the checkout rather than just adding to the checkout too)

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

 

dmwwebartisan
Shopify Partner
5841 1336 1713

Hey @Laura41 

I read your description. Can you please provide me your webshop URL?

I will check and provide you solution here.

Thanks!

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
0 Likes
Laura41
New Member
2 0 1

This is the site:

https://www.therosewinecollective.com/

Thanks in advance..

0 Likes
dmwwebartisan
Shopify Partner
5841 1336 1713

Hey @Laura41 

I have checked your webshop That some code customization work.

I can free supported you please PM to me.

Thanks!

 

 

If helpful then please Like and Accept Solution.
Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Advanced Shopify Page Builder to customize your pages - check here PageFly App
notanybox
Tourist
4 0 1

Hello people! 

My store is under Prestige theme and I was wondering if any of you have managed to add 'add to cart' button in the collection page. 
Please please don't ignore this

Guleria
Shopify Partner
1305 269 361

Hello.

Add this code in product-item.liquid  under Snippets 

 

<button  type="submit" name="add" aria-label="Add to cart" class="ad_to_cart_coll Button Button--primary" id="ad_to_cart" aria-haspopup="dialog" data-add-to-cart="{{ product.variants.first.id }}" data-var_id="{{ product.variants.first.id }}">
          Add to cart</button>

 

Note: Make it conditional a/to your need.

Next in custom.js under Assets, add this code

 

$('.ad_to_cart_coll').click(function(){    
  var ID = $(this).attr("data-var_id");
  addItemToCart( ID, 1);    // paste your id product number
  $('.cart_dr').trigger( "click" );
});
function addItemToCart(variant_id, qty) {
  data = {
    "id": variant_id,
    "quantity": qty
  }
  jQuery.ajax({
    type: 'POST',
    url: '/cart/add.js',
    data: data,
    dataType: 'json',
    success: function() { 
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
        bubbles: true  //this code is for prestige theme, is to refresh the cart
      }));
    }   
    
  }); 
 
}

 

 
Thanks

Want to modify or custom changes on store hire me.
Email: guleriathakur43@gmail.com, Skype: navrocks1
If helpful then please Like and Accept Solution.
jlpalumbo
Tourist
9 0 2

Hi Guleria,

I've tried this code, and it adds the "add to cart" button to my collections page, but when I click it, it doesn't add items to my cart or anything. It's un-clickable. Any help/advice? I haven't done any other code customization to my store. 

0 Likes
jimsarn
New Member
2 0 0

Same here, help needed!

0 Likes