Add to cart button - Collections page - Prestige Theme

[GTStudio]

Hi there!

I'm using the Prestige theme, and I have added some code to add a 'add to cart' button on the collections page. It works great, but now I need to hide it for products sold out or unavailable.

Unfortunately, the button keeps showing up, so I am manually hiding those products at the moment, which is not ideal.

I would appreciate your help so much!

Thanks!

[MandasaTech]

Hello @GTStudio,
Please share your website URL.
and also share you product-grid.liquid file code.

[GTStudio]

@MandasaTech The website URL is: https://sunshineliving.dk/
But I can't find the product-grid.liquid file code. Is there anything else I can provide you with?

[MandasaTech]

https://sunshineliving.dk/password - please share your store password.

[GTStudio]

@MandasaTech it's blaske. Thank you!

[SmallTask]

Hi @GTStudio,

You can hide the add to cart button by using a liquid condition, we need access to the code to provide a solution.

[GTStudio]

@SmallTask This is the code I pasted in product-item.liquid 

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

Thanks so much. Let me know if you need anything else.

[GTStudio]

@SmallTask @MandasaTech, any updates on this, please?

I would be so grateful if you could help! 🙏

[MandasaTech · Accepted solution]

@GTStudio 

Replace your code with below code.

{% if product.available %}
<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>
{% endif %}

[GTStudio]

Thanks so much @MandasaTech!

This worked! You're a star ⭐

[Laurice]

Hi, I was hoping you could help us too.

I pasted this code on our prestige theme. It shows the button on the collection pages, but when I click the "add to cart button", it just open the cart drawer and not put the products in. Also, how can we add a choice for variants here? We have some products that have variants, is it possible for the customer to select the variants on the quick add?

Our URL is https://www.usandtheearth.com/collections/all

[Jahid-KlinKode]

Hi @GTStudio, resolve the issue of missing "Add to Cart" buttons on Shopify collection pages by watching this helpful YouTube tutorial: https://www.youtube.com/watch?v=s98l1bUZe6k