Solved

Add to cart button - Collections page - Prestige Theme

GTStudio
Shopify Partner
11 0 0

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!

Accepted Solution (1)
MandasaTech
Shopify Expert
723 146 152

This is an 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 %}

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page

View solution in original post

Replies 11 (11)

MandasaTech
Shopify Expert
723 146 152

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

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
GTStudio
Shopify Partner
11 0 0

@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
Shopify Expert
723 146 152

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

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
GTStudio
Shopify Partner
11 0 0

@MandasaTech it's blaske. Thank you!

SmallTask
Shopify Partner
973 41 55

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.

banned
GTStudio
Shopify Partner
11 0 0

@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
Shopify Partner
11 0 0

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

I would be so grateful if you could help! 🙏

MandasaTech
Shopify Expert
723 146 152

This is an 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 %}

☞ Helpful or Question answered? Please Click Like & Mark it Accepted Solution
☞ Want to modify or custom changes on store for affordable price? Click on Contact button here
☞ Email at info@mandasa.in
☞ Whatsapp at +918989609120 | Hire us at: Website Support Page
GTStudio
Shopify Partner
11 0 0

Thanks so much @MandasaTech!

This worked! You're a star 

Laurice
New Member
4 0 0

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
Excursionist
145 1 4

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