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

Laura41
Visitor
2 0 2

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>

 

Replies 33 (33)

dmwwebartisan
Shopify Partner
12313 2550 3706

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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder app
Laura41
Visitor
2 0 2

This is the site:

https://www.therosewinecollective.com/

Thanks in advance..

dmwwebartisan
Shopify Partner
12313 2550 3706

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
Check here PageFly App to customize your pages | #1 Product Filter & Search app on Shopify | The most powerful Shopify page builder 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
3091 607 866

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

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
jlpalumbo
Tourist
9 0 3

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. 

jimsarn
Tourist
4 0 1

Same here, help needed!

Stevend1987
Visitor
1 0 0

So I am reviewing the custom javascript page and not seeing the fix for it. Any assistance is appreciated. Just needing it to add to cart. 

chr1s_
Visitor
3 0 0

This does not seem to work on the latest prestige update for several reasons: 

1. there is no jQuery by default in prestige

2. they seem to have changed some class names etc

 

Do you have any idea on what needs to be changed to be able to use this with the latest prestige version? 

 

Thanks a lot!

Guleria
Shopify Partner
3091 607 866

It still working for me. You have to add JS library {{ '//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.js' | script_tag }} just before the </head>

- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on store Hire me.
- Email: guleriathakur43@gmail.com - Skype: navrocks1 ,
- Try GEMPAGES a great page builder
-Advance Search Filter
chr1s_
Visitor
3 0 0

Have you tried it with the latest update? Although I believe this is achivabel with JS itself instead of jQuery, I added jQuery to the theme for testing purposes and it still did not work. 😞 

Maybe its because I am trying to do it in the cart drawer?  

chr1s_
Visitor
3 0 0

I changed it to vanilla javascript and added an onclick function on the button. This works like a charm for me now: 

Place where you need the button:

<button onclick="_addMeToCart(event,this)" data-variant_id="12345678">add me</button>

 

In custom.js

function _addMeToCart(e, el) {
	e = e || window.event;
  	e.preventDefault();
  
    let formData = {
      'items': [
        {
          'id': el.dataset.variant_id,
          'quantity': 1
        }
      ]
    };

    fetch('/cart/add.js', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(formData)
    })
    .then((resp) => { 
      return resp.json();
    })
    .then((data) => {
      document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
          bubbles: true
      }));
    })
    .catch((err) => {
      console.error('Error: ' + err);
    })
}

 

Jose_Naranjo
Shopify Partner
3 0 0

Thanks! This works perfect for upsell add to cart buttons on the drawer cart! Adds items to the cart without sending you to the cart page too.

Jose_Naranjo
Shopify Partner
3 0 0

Do you know how to get the side drawer cart to display when the add to cart button is clicked?

 

NOssey
Visitor
1 0 0

I too would also like help having the cart drawer open up.

Farhan3
Shopify Partner
8 0 0

Please go to Online store > Customize > Theme settings > Cart > Select the Drawer option and save it.

For more details: contact me ifarhanrifat@gmail.com

olympiaa2010
Visitor
1 0 0

Hello,

Im new and I am trying to add the add to cart button as well on the prestige theme. can you please explain how should I add it?

 

Thank you 

Danae

 

snde
Tourist
9 0 4

I used parts of the answers above/below and found a perfect solution. There are 2 parts

 

@ snippets/product-item.liquid

Find
{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

 

Paste this code underneath:

<button
class="ProductForm__AddToCart Button {% if product.selected_or_first_available_variant.available and use_primary_button %}Button--primary{% else %}Button--secondary{% endif %} Button--full"
onclick="_addMeToCart(event,this)"
data-action="open-drawer" data-drawer-id="sidebar-cart"
data-variant_id="{{ product.variants.first.id }}">
{{ 'product.form.add_to_cart' | t }}
</button>

 

@assets/custom.js

Add this

 

function _addMeToCart(e, el) {
e = e || window.event;
e.preventDefault();

let formData = {
'items': [
{
'id': el.dataset.variant_id,
'quantity': 1
}
]
};

fetch('/cart/add.js', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
})
.then((resp) => {
return resp.json();
})
.then((data) => {
document.documentElement.dispatchEvent(new CustomEvent('cart:refresh', {
bubbles: true
}));
})
.catch((err) => {
console.error('Error: ' + err);
})
}

 

bxdm
Shopify Partner
6 0 0

Thanks for that solution.  It worked great.  One last addition would be really complete.  What would we add to get the button to display at the bottom of the collection container so that it always lines up evenly when displaying? At present it will line up after the text strings.  which are not always the same.  Thanks in advance for any help.  B.

jax22
Shopify Partner
5 0 1

thanks for the code, however it shows the side cart after clicking, but the product isn't shown, when I refresh the page it is then shown in the cart, any help on this? 

bxdm
Shopify Partner
6 0 0

it is implemented on this site caffetech.com and working.  test if this site works for you.

 

also to line up the buttons evenly at the bottom we used this.

https://community.shopify.com/c/shopify-design/how-would-we-align-add-to-cart-button-to-bottom-in-co...

 

 

jax22
Shopify Partner
5 0 1

All working now, seems site hadn't been updated for a while so scripts were outdated and conflicting with code. Thanks 

Nana_Osei
Tourist
5 0 1

Hey - I am currently having the same issue. Adding to cart > cart slider opens > no products appear. 
Was there some code you removed yourself? Or did it automatically fix itself?

snde
Tourist
9 0 4

No. Did you insert the javascript @assets/custom.js?

AndreasWaeldele
Shopify Partner
5 0 0

@snde I also would like to know if there is a way to implement a variant selector or even better use the default product item variant selector from the theme itself. Everything works as it should. I pasted the js into custom.js.  Thanks !

snde
Tourist
9 0 4

Sorry. I never tried that. Products in my store don't have variants. I suppose a specialist can help you here.

Forrester123
Visitor
1 0 0

Thanks so much for this @snde ! Working like a charm.

What is the best way to prompt a variant selector before adding the item to cart? For example, if someone adds a hat it works perfectly since there is 1 size, but if they add a shirt I'd like them to be able to select their size variant before it is added.

Thanks in advance! 

dbull37
Visitor
1 0 0

Hey @snde , 

Thanks for the snippet. It's been really helpful. I'm having issues getting the cart to correctly update without refreshing the page. I'm able to add the item into the cart and get the little popup to appear as well with the cart but it's just an empty page.   

I added the code to both the custom.js file under Assets and the other code under Snippets/product-item.liquid however the cart remains empty until I hit refresh. What am I missing? Any and all help would be greatly appreciated on this matter! 

Thanks!

basicsetalshop
Visitor
1 0 0

Very helpful! Works well for me. Any chance you have a modified snippet that has both the Add to Cart CTA + a View Details CTA? So customers can have a clear option to go to the Product detail page. Thank you!!

michaelivanov
Shopify Partner
35 5 10

Hi Andrei,

please try adding the original content that is content in your base language (in my case English) to Shopify

 

1.png

 

so that the "Add to cart" text is entered there:

 

michael_langify_0-1707336296827.png

 

instead of just showing the placeholder like:

 

michael_langify_3-1707336536373.png

 

This should normally but not always fix this issue.

 

 

mitsikitty
Visitor
1 0 0

Do you have a solution where the button is shown on hover like the original quick buy button, but instead of the 'plus' symbol, it just says 'add to cart'?

GTStudio
Shopify Partner
11 0 0

Hi! Is there a way to hide the 'add to cart' button on the collections page, for those products that are sold out or coming soon? I can't seem to make it work and I would appreciate your help so much!

Thanks

abhishek07
Visitor
1 0 0

could you please guide me on where should I Put this code on my website?