Hi,
I wish to remove the Add to Cart button from particular products in the grid view. These products sit within different collections. These products are by enquiry only. I have been able to remove the pricing but it can still be added in the cart.
I have been able to remove the buy button from the individual product pages but not from the grid view.
I have attached a pic of the grid. I wish for 3 of them to continue to have the add to cart feature and for it to be removed from the others.
I am using the refresh theme.
Thanks
Hello there @Summertime You should check out the replies in this previous community thread https://community.shopify.com/c/shopify-discussions/hide-add-to-cart-on-certain-products-in-grid-view/m-p/2166987 and see if it will be helpful to you since the main poster in question was also making use of the refresh theme.
Hi @Summertime ,
Can you share your store URL so that I can help you on that?
Best,
Daisy
Thank you. Will this remove it from all products? I just want to be able to remove it from some products.
Yes, it will be removed from all products. Which products do you want to remove? Is there a pattern?
Hi @Summertime
Please add this code to Custom CSS in Sales Channels > Online Store > Themes > Customize > Theme settings
#quick-add-template--14922656514111__product-grid7683313303615,
#quick-add-template--14922656514111__product-grid7683310092351,
#quick-add-template--14922656514111__product-grid7683314155583 { display: none !important; }
The products are special order items only. I can add a tag to them to identify them. I have also marked their prices as $0. They fall into different collections.
I need a code to just change these items in the grid and leave the other ones as they are.
Thanks.
there are multiple items through the store which are special order only items.
I can add a tag to each item to identify them. I have also marked their prices as $0. They fall into different collections.
I need a code to just change these items in the grid and leave the other ones as they are.
Hi @Summertime ,
You can follow the steps here:
Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there
Here is the code for step 3:
.card__information + .quick-add {
display: none !important;
}
Here is the result:
Please let me know if it works!
Best,
Daisy
So you can try to replace the code of card-product.liquid file with this code and check again
{% comment %}
Renders a product card
Accepts:
- card_product: {Object} Product Liquid object (optional)
- media_aspect_ratio: {String} Size of the product image card. Values are "square" and "portrait". Default is "square" (optional)
- image_shape: {String} Image mask to apply to the product image card. Values are "arch", "blob", "chevronleft", "chevronright", "diamond", "parallelogram", and "round". (optional)
- show_secondary_image: {Boolean} Show the secondary image on hover. Default: false (optional)
- show_vendor: {Boolean} Show the product vendor. Default: false
- show_rating: {Boolean} Show the product rating. Default: false
- extend_height: {Boolean} Card height extends to available container space. Default: true (optional)
- lazy_load: {Boolean} Image should be lazy loaded. Default: true (optional)
- skip_styles: {Boolean} Don't include component styles. Useful when rendering multiple product cards in a loop. Default: false (optional)
- quick_add: {Boolean} Show the quick add button.
- section_id: {String} The ID of the section that contains this card.
- horizontal_class: {Boolean} Add a card--horizontal class if set to true. Default: false (optional)
- horizontal_quick_add: {Boolean} Changes the quick add button styles when set to true. Default: false (optional)
- placeholder_image: {String} The placeholder image to use when no product exists. Default: 'product-apparel-2' (optional)
Usage:
{% render 'card-product', show_vendor: section.settings.show_vendor %}
{% endcomment %}
{%- unless skip_styles -%}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-volume-pricing.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'quick-order-list.css' | asset_url | stylesheet_tag }}
{{ 'quantity-popover.css' | asset_url | stylesheet_tag }}
{%- endunless -%}
{%- if card_product and card_product != empty -%}
{%- liquid
assign ratio = 1
if card_product.featured_media and media_aspect_ratio == 'portrait'
assign ratio = 0.8
elsif card_product.featured_media and media_aspect_ratio == 'adapt'
assign ratio = card_product.featured_media.aspect_ratio
elsif card_product.featured_media and media_aspect_ratio == '5_4'
assign ratio = 1.25
endif
if ratio == 0 or ratio == null
assign ratio = 1
endif
-%}
{%- if card_product.featured_media -%}
{% comment %}theme-check-disable ImgLazyLoading{% endcomment %}
{% comment %}theme-check-enable ImgLazyLoading{% endcomment %}
{%- if card_product.media[1] != null and show_secondary_image -%}
{%- endif -%}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
###
{{ card_product.title | escape }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ card_product.vendor }}
{%- endif -%}
{{ block.settings.description | escape }}
{%- if show_rating and card_product.metafields.reviews.rating.value != blank -%}
{% liquid
assign rating_decimal = 0
assign decimal = card_product.metafields.reviews.rating.value.rating | modulo: 1
if decimal >= 0.3 and decimal <= 0.7
assign rating_decimal = 0.5
elsif decimal > 0.7
assign rating_decimal = 1
endif
%}
{{- card_product.metafields.reviews.rating.value }} /
{{ card_product.metafields.reviews.rating.value.scale_max -}}
({{ card_product.metafields.reviews.rating_count }})
{{- card_product.metafields.reviews.rating_count }}
{{ 'accessibility.total_reviews' | t -}}
{%- endif -%}
{% render 'price', product: card_product, price_class: '', show_compare_at_price: true %}
{%- if card_product.quantity_price_breaks_configured? -%}
{% if card_product.variants.size == 1 and quick_add == 'bulk' %}
{% liquid
assign quantity_rule = card_product.selected_or_first_available_variant.quantity_rule
assign has_qty_rules = false
if quantity_rule.increment > 1 or quantity_rule.min > 1 or quantity_rule.max != null
assign has_qty_rules = true
endif
%}
{% endif %}
{%- endif -%}
{% unless card_product.price == 0 %}
{% assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id %}
{% if quick_add == 'standard' %}
{%- liquid
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{%- if card_product.variants.size > 1 or qty_rules -%}
{%- else -%}
{%- endif -%}
{% elsif quick_add == 'bulk' %}
{% if card_product.variants.size == 1 %}
{% else %}
{%- liquid
assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id
assign qty_rules = false
if card_product.selected_or_first_available_variant.quantity_rule.min > 1 or card_product.selected_or_first_available_variant.quantity_rule.max != null or card_product.selected_or_first_available_variant.quantity_rule.increment > 1
assign qty_rules = true
endif
-%}
{% endif %}
{% endif %}
{% endunless %}
{%- if card_product.available == false -%}
{{- 'products.product.sold_out' | t -}}
{%- elsif card_product.compare_at_price > card_product.price and card_product.available -%}
{{- 'products.product.on_sale' | t -}}
{%- endif -%}
{%- else -%}
{%- liquid
assign ratio = 1
if media_aspect_ratio == 'portrait'
assign ratio = 0.8
endif
-%}
{%- if placeholder_image -%}
{{ placeholder_image | placeholder_svg_tag: 'placeholder-svg' }}
{%- else -%}
{{ 'product-apparel-2' | placeholder_svg_tag: 'placeholder-svg' }}
{% endif %}
###
{{ 'onboarding.product_title' | t }}
{%- if show_vendor -%}
{{ 'accessibility.vendor' | t }}
{{ 'products.product.vendor' | t }}
{%- endif -%}
{% render 'price', show_compare_at_price: true %}
{%- endif -%}
1 Like
product.tag==â123â Replace with the value you need
{% if product.tag == '123' %}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
skip_styles: skip_card_product_styles,
section_id: section.id
%}
{% else %}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
skip_styles: skip_card_product_styles,
section_id: section.id,
quick_add: section.settings.quick_add
%}
{% endif %}
1 Like
Thank you. That worked. Much appreciated 
1 Like
Hi @Summertime We still need some minor modifications.
{% assign hasTag = false %}
{%- for tag in product.tags -%}
{% if tag == '123' %}
{% assign hasTag = true %}
{% endif %}
{% endfor %}
{% if hasTag == true %}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
skip_styles: skip_card_product_styles,
section_id: section.id
%}
{% else %}
{% render 'card-product',
card_product: product,
media_aspect_ratio: section.settings.image_ratio,
image_shape: section.settings.image_shape,
show_secondary_image: section.settings.show_secondary_image,
show_vendor: section.settings.show_vendor,
show_rating: section.settings.show_rating,
skip_styles: skip_card_product_styles,
section_id: section.id,
quick_add: section.settings.quick_add
%}
{% endif %}
Hi @Summertime ,
To conditionally remove the Add to Cart button from specific products in the grid view, you can add a condition based on a product attribute such as a tag, product type, or metafield.
Hereâs how to modify your code:
Updated Code with Condition
Use a specific product tag, like enquiry-only, to identify products where the âAdd to Cartâ button should not appear. Update your grid view code as follows:
- To assign product tag:
2. Go to Online Store > Themes > Actions > Edit Code > card-product.liquid > Find âquick-add__submitâ
3. Update code as per below code
{%- if card_product.tags contains 'enquiry-only' -%}
Enquire Now
{% else %}
{% endif %}
- Save and check the changes.
Out put:
Note: I have applied this logic only to the grid card products. You can use the same approach wherever you want to hide the âAdd to Cartâ button for specific products.
Thank You!
