"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 34 (34)

dmwwebartisan
Shopify Partner
12267 2545 3687

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
12267 2545 3687

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
2942 582 831

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
2942 582 831

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

AndreiAg
Visitor
2 0 1

This does not seem to work anymore, it shows this error: 

Translation missing:
en.product.form.add_to_cart

Any idea how this can be fixed? 

michael_langify
Shopify Partner
13 1 3

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.

 

 

AndreiAg
Visitor
2 0 1

I was able to build a solution.  

You will need to have latest version of the theme which is Version 9.0.2 February 7, 2024

 

Once installed you will edit  - product-card.liqud this will remove the plus on hover and will add "add to cart" to collections pages. 

 

Make sure to replace the whole code in product-card.liqud with below code:

 

{%- comment -%}
----------------------------------------------------------------------------------------------------------------------
PRODUCT CARD COMPONENT
----------------------------------------------------------------------------------------------------------------------

This component is used in collection and featured collection to render a single product as a card

********************************************
Supported variables
********************************************

* product: the product to render
* stacked: define if the product is stacked or not on mobile
* reveal: if set to true, the card will be revealed on scroll through animation
* show_badges: show or not the badges (default to true if nothing is set).
* show_rating: show or not the rating. If nothing is set, the theme uses the default product card setting
* show_vendor: show or not the vendor. If nothing is set, the theme uses the default product card setting
* show_quick_buy: show or not the quick buy (which open a modal if the product contains more than 1 choice)
* show_secondary_image: show or not the secondary media on hover. If nothing is set, the theme uses the default product card setting
* show_swatches: show or not the swatches. The swatch type is inferred from setting, and will default to true if nothing is set.
* hide_product_information: if set to true, all content (vendor, badge, title...) are not rendered, to create image-based grid
* quick_buy_context: a unique text to dissociate quick buy if the same product is embedded multiple times
{%- endcomment -%}

{%- liquid
if hide_product_information
assign show_badges = false
assign show_rating = false
assign show_vendor = false
assign show_title = false
assign show_prices = false
assign show_swatches = false
assign show_quick_buy = show_quick_buy | default: settings.show_quick_buy, allow_false: true
assign show_secondary_image = show_secondary_image | default: settings.show_secondary_image, allow_false: true
else
assign show_badges = show_badges | default: true, allow_false: true
assign show_rating = show_rating | default: settings.show_product_rating, allow_false: true
assign show_vendor = show_vendor | default: settings.show_vendor, allow_false: true
assign show_quick_buy = show_quick_buy | default: settings.show_quick_buy, allow_false: true
assign show_title = true
assign show_prices = true
assign show_secondary_image = show_secondary_image | default: settings.show_secondary_image, allow_false: true
assign show_swatches = show_swatches | default: true, allow_false: true
endif
-%}


<product-card class="product-card" {% if reveal %}reveal-on-scroll="true"{% endif %} handle="{{ product.handle | escape }}">
{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT MEDIA
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

{%- if product.media.size > 0 -%}
<div class="product-card__figure">
{%- if show_badges -%}
{%- render 'product-badges', product: product, vertical: true -%}
{%- endif -%}

<a href="{{ product.url }}" class="product-card__media" data-instant>
{%- capture sizes -%}
{%- if stacked -%}
(max-width: 699px) calc(100vw / {{ section.settings.products_per_row_mobile }}), (max-width: 999px) calc(100vw / {{ 3 | at_most: section.settings.products_per_row_desktop | default: 3 }} - 64px), calc((100vw - 96px) / {{ section.settings.products_per_row_desktop | default: 3 }} - (24px / {{ section.settings.products_per_row_desktop | default: 3 }} * {{ section.settings.products_per_row_desktop | default: 3 | minus: 1 }}))
{%- else -%}
(max-width: 699px) 74vw, (max-width: 999px) 38vw, calc((100vw - 96px) / {{ section.settings.products_per_row_desktop | default: 3 }} - (24px / {{ section.settings.products_per_row_desktop | default: 3 }} * {{ section.settings.products_per_row_desktop | default: 3 | minus: 1 }}))
{%- endif -%}
{%- endcapture -%}

{%- capture main_image_classes -%}product-card__image product-card__image--primary {% if settings.product_image_aspect_ratio contains 'crop' %}object-cover{% endif %} aspect-{{ settings.product_image_aspect_ratio | split: '_' | first }}{%- endcapture -%}
{{- product.featured_media | image_url: width: product.featured_media.width | image_tag: loading: 'lazy', sizes: sizes, widths: '200,300,400,500,600,700,800,1000,1200,1400,1600,1800', class: main_image_classes -}}

{%- if show_secondary_image and product.media.size > 1 -%}
{%- assign next_media = product.media[product.featured_media.position] | default: product.media[1] -%}
{{- next_media | image_url: width: next_media.width | image_tag: class: 'product-card__image product-card__image--secondary', loading: 'lazy', fetchpriority: 'low', sizes: sizes, widths: '200,300,400,500,600,700,800,1000,1200,1400,1600,1800' -}}
{%- endif -%}
</a>


</div>
{%- endif -%}


{%- comment -%}
--------------------------------------------------------------------------------------------------------------------
PRODUCT INFO
--------------------------------------------------------------------------------------------------------------------
{%- endcomment -%}

<div class="product-card__info empty:hidden">
{%- assign text_class = '' -%}

{%- if settings.product_card_text_font == 'heading' -%}
{%- assign text_class = 'h6' -%}
{%- endif -%}

{%- if show_title or show_prices or show_vendor and product.vendor != blank -%}
<div class="v-stack justify-items-center gap-2">
{%- if show_vendor and product.vendor != blank -%}
{%- capture vendor_class -%}smallcaps {% if settings.product_card_text_font == 'heading' %}heading{% endif %}{% endcapture %}
{%- render 'vendor' with product.vendor, class: vendor_class -%}
{%- endif -%}

{%- if show_title or show_prices -%}
<div class="v-stack justify-items-center gap-1">
{%- if show_title -%}
<a href="{{ product.url }}" class="product-title {% if text_class != blank %}{{ text_class }}{% endif %} {% if settings.product_title_max_lines > 0 %}line-clamp{% endif %}" {% if settings.product_title_max_lines > 0 %}style="--line-clamp-count: {{ settings.product_title_max_lines }}"{% endif %} data-instant>
{{- product.title -}}
</a>
{%- endif -%}

{%- if show_prices -%}
{%- render 'price-list', product: product, context: 'card' -%}
{%- endif -%}
</div>
{%- endif -%}
</div>
{%- endif -%}

{%- if show_swatches and settings.product_color_display != 'hide' -%}
{%- assign color_label_list = 'general.label.color' | t | replace: ', ', ',' | downcase | split: ',' -%}

{%- for color_label in color_label_list -%}
{%- if product.options_by_name[color_label] != blank -%}
{%- assign product_option = product.options_by_name[color_label] -%}
{%- capture name -%}swatch-{{ quick_buy_context }}-{{ section.id }}-{{ product.id }}-{{ product_option.position }}{%- endcapture -%}

{%- case settings.product_color_display -%}
{%- when 'count' -%}
<p class="smallcaps text-subdued">{{- 'product.general.available_colors_count' | t: count: product_option.values.size -}}</p>

{%- when 'swatch' -%}
<fieldset class="h-stack wrap justify-center gap-1" data-option-position="{{ product_option.position }}">
{%- liquid
for option_value in product_option.values
if forloop.first or product.selected_or_first_available_variant.matched and option_value == product_option.selected_value
assign selected = true
else
assign selected = false
endif

if option_value.swatch.image
render 'option-value', type: 'swatch', value: option_value, image: option_value.swatch.image, name: name, selected: selected, size: 'sm'
elsif option_value.swatch.color
render 'option-value', type: 'swatch', value: option_value, color: option_value.swatch.color, name: name, selected: selected, size: 'sm'
else
render 'option-value', type: 'swatch', value: option_value, name: name, selected: selected, size: 'sm'
endif
endfor
-%}
</fieldset>
{%- endcase -%}

{%- break -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

{%- if show_rating -%}
{%- render 'product-rating', product: product, show_empty: settings.show_product_rating_if_empty, display_mode: settings.product_rating_mode -%}
{%- endif -%}
</div>

{%- if show_quick_buy and product.available -%}
{%- if product.variants.size == 1 and product.selling_plan_groups.size == 0 -%}
{%- form 'product', product, is: 'product-form' -%}
<input type="hidden" name="on_success" value="force_open_drawer">
<input type="hidden" name="quantity" value="1">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
<button type="submit" class="button button--outline w-full">
<span class="sr-only">{{ 'product.general.add_to_cart_button' | t }}</span>
Add to cart</button>
{%- endform -%}
{%- else -%}
{%- capture quick_buy_id -%}product-quick-buy-{{ section.id }}-{{ block.id }}-{{ quick_buy_context }}-{{ product.id }}{%- endcapture -%}

<button type="submit" aria-controls="{{ quick_buy_id }}" class="button button--outline w-full">
<span class="sr-only">{{ 'product.general.choose_options' | t }}</span>
Add to cart</button>

<quick-buy-modal handle="{{ product.handle }}" class="quick-buy-modal modal" id="{{ quick_buy_id }}">
</quick-buy-modal>
{%- endif -%}
{%- endif -%}

</product-card>

 

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?