Solved

How do I hide quick add buttons for certain products?

PavelLin
Excursionist
20 4 6

Hello, looking for advice!
I have a few digital products that are not for sale in my store - they're displayed with the other goods, but when you open the product page, you can click the link to buy it somewhere else. The problem is they have quick add buttons on mainpage, or on collection page. I need to hide quick add buttons for digital products.
I tried using the following code in card-product.liquid:

{% unless product.collections contains 'digital' %}
...(all the quick add code)...
{% endunless %}

=== no result 😞

I tried also using tags and {% unless product.tags contains 'digital' %}  -- no result.
I tried changing names and {% unless product.title contains 'digital' %} -- no result.

I thought "maybe I'm placing the code in wrong place?" - and, for experiment, changed UNLESS to IF. All of the quick add buttons for all products were hidden (including the digital products). So I guess the place is correct, but I'm doing something wrong.
Any advice much appreciated! Theme Dawn 2.0

Accepted Solution (1)
PavelLin
Excursionist
20 4 6

This is an accepted solution.

I did! It's for Dawn theme.

First, add a specific tag to the products where you need to hide quick add buttons (in my case, the tag is 'digital')

Then, you need to amend the file 'main-collection-product-grid.liquid'. Find the code for a product card:

 <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
					%}       
                </li>

The string which display quick add button is (surprise!) show_quick_add. Thus, we need to create two instances for this part of cose - one with this line, one without it. Here we go: we replace the code above with the following:

{%- unless product.tags contains "digital" -%}        
                <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
					%}       
                </li>
{%- endunless -%}

{%- if product.tags contains "digital" -%}        
                <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    section_id: section.id
					%}       
                </li>
{%- endif -%}

This code hides quick add buttons for products tagged 'digital' in product grids (both on a collection page and on a frontpage in 'featured collection').

View solution in original post

Replies 4 (4)

anne_kd
Shopify Partner
2 0 1

I have the same problem. Any update on this? Were you able to solve it? Thank you!

PavelLin
Excursionist
20 4 6

This is an accepted solution.

I did! It's for Dawn theme.

First, add a specific tag to the products where you need to hide quick add buttons (in my case, the tag is 'digital')

Then, you need to amend the file 'main-collection-product-grid.liquid'. Find the code for a product card:

 <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
					%}       
                </li>

The string which display quick add button is (surprise!) show_quick_add. Thus, we need to create two instances for this part of cose - one with this line, one without it. Here we go: we replace the code above with the following:

{%- unless product.tags contains "digital" -%}        
                <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    show_quick_add: section.settings.enable_quick_add,
                    section_id: section.id
					%}       
                </li>
{%- endunless -%}

{%- if product.tags contains "digital" -%}        
                <li class="grid__item">
                  {% render 'card-product',
                    card_product: product,
                    media_aspect_ratio: section.settings.image_ratio,
                    show_secondary_image: section.settings.show_secondary_image,
                    show_vendor: section.settings.show_vendor,
                    show_rating: section.settings.show_rating,
                    lazy_load: lazy_load,
                    section_id: section.id
					%}       
                </li>
{%- endif -%}

This code hides quick add buttons for products tagged 'digital' in product grids (both on a collection page and on a frontpage in 'featured collection').

anne_kd
Shopify Partner
2 0 1

Thank you so much for this! 😀👏

Rik4
Tourist
5 0 1

Hi, I'm trying to affect a similar change on my site (Venue Theme)

But my product card code is a little different:

{% render 'product-card',
                                            current_product: product,
                                            section_id: section.id,
                                            collection: collection,
                                            image_sizes: sizes,
                                            small_buttons_on_mobile: small_buttons_on_mobile,
                                            quick_shop_type: 'remote'
                                        %}

 

I was wondering if I could affect the same change by tweaking the quick-shop-type:  'remote' line. But I'm unsure.

Many Thanks
Rik