Hi, I’m hoping someone will know if this is possible.
I am using the Refresh theme. I have removed the Add to Cart buttons on a whole Collection of products but I now need to do this on a few others within a different Collection page.
Background.. we offer injector servicing and sell products to accompany this. I have removed the Add to Cart button on all services within the main Servicing Collection but we have a few other services available within the Historic Injector Restoration Collection page. I have removed their Add to Cart buttons so that they can’t be seen when you’re on the individual product pages but they still show when you look at the whole Collection page.
It would be great if I could remove all Add to Cart buttons in every view for these services as customers are encouraged to contact us first for a quote/turnaround time.
I have tried following another demo online whereby you use the tag ‘noshow’ on certain products then change the code to use an {% unless product.tags contains ‘noshow’ %}. There is also the option of adding an {% else%} but I need help with where to put this or whether this would work with this theme.
Any help gratefully received please.
Hey @mrinjectoruk
To remove the “Add to Cart” button from specific products on the collection page in the Refresh theme, you can indeed use product tags and modify your theme’s Liquid code. Here’s a general approach:
-
Add a Tag to the Products: In your Shopify admin, go to the products you want to hide the “Add to Cart” button for and add a unique tag to them. For example, you could use the tag ‘noshow’.
-
Modify the Collection Template: In your Shopify admin, go to Online Store > Themes > Actions > Edit code. Then, find the file that renders your collection items. This is usually called product-card.liquid, product-grid-item.liquid, or something similar, and it’s typically located in the Snippets directory.
-
Add a Conditional Statement: In the collection template, find the code that outputs the “Add to Cart” button. It might look something like this:
Wrap this code in an {% unless %} statement that checks if the product has the 'noshow' tag:
{% unless product.tags contains 'noshow' %}
{% endunless %}
This code will prevent the “Add to Cart” button from being outputted for products with the ‘noshow’ tag.
Please note that this is a general guide and the exact steps might vary based on your theme and how your product data is structured. If you’re not comfortable editing your theme’s code, you might want to consider hiring a Shopify expert to help you.
Remember to always make a backup of your theme before making any changes to the code.
Hi, that’s great to know that this is possible, thank you. I’m having trouble finding where exactly to place that code within my card-product.liquid because it seems my code is made of ‘ifs’, for example:
{%- if show_quick_add -%}
{%- assign product_form_id = 'quick-add-' | append: section_id | append: card_product.id -%}
{%- if card_product.variants.size == 1 -%}
{%- form 'product', card_product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<button
id="{{ product_form_id }}-submit"
type="submit"
name="add"
class="quick-add__submit button button--full-width button--secondary"
aria-haspopup="dialog"
aria-labelledby="{{ product_form_id }}-submit title-{{ section_id }}-{{ card_product.id }}"
aria-live="polite"
data-sold-out-message="true"
{% if card_product.selected_or_first_available_variant.available == false %}disabled{% endif %}
There is another one where it states that if the item is available then to allow quick add. I think it’s this quick add button that I need to intersect but I can’t find exactly the right place. Any tips for this would be gratefully received and many thanks already for your help.
hey,
You are correct it it the card-product.liquid but some time it the in another file in the Snippets called product-grid-item.liquid. But it always depend on theme to theme.
To confirm the location to place updated code you can add some dummy class or some text and then using code inspector check that you are on the right file.
Thank you for clarifying. I think I am looking in the correct place but I have tried various places and cannot find the add to cart button properly. It is very confusing because most of the code on the page I need is made of ‘if’, which makes it hard to insert an ‘unless’.
Thank you very much for your help on this matter.
can you send the file which you are updating?
where should i put this code: or it will work?
{% assign product_label_new = false %}
{% capture _time %}{{settings.product_new_time | times:86400}}{% endcapture %}
{% assign time = _time|plus:0 %}
{% assign now = ‘now’ | date: ‘%s’|plus:0 %}
{% capture _value %}{{product.published_at | date: “%s” | plus : time }}{% endcapture %}
{% assign value = _value|plus:0 %}
{% if now < value %}
{% assign product_label_new = true %}
{% endif %}
{% assign label_popular = false %}
{% if product.tags contains “hot” %}
{% assign label_popular = true %}
{% endif %}
{% assign on_sale = false %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
![{{ product.featured_image.alt | escape }}]()
{% if settings.show_new_label and product_label_new == true %}
{{settings.new_label_name}}
{% endif %}
{% if settings.show_hot_label and label_hot %}
{{settings.hot_label_name}}
{% endif %}
{% if settings.show_sale_label and on_sale %}
-{% if product.compare_at_price_max > product.price %}{{ product.compare_at_price_min | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_min | money_without_currency | times: 100 | replace: '.0', ''}}%{% endif %}
{% endif %}
{% if settings.show_sold_out_label and sold_out %}
{{settings.sold_out_label_name}}
{% endif %}
{% for option in product.options %}
{% if option == 'Color' %}
{% assign index = forloop.index0 %}
{% assign colorlist = '' %}
{% assign color = '' %}
{% for variant in product.variants %}
{% capture color %}{{ variant.options[index] }}{% endcapture %}
{% unless colorlist contains color %}
{% assign text = color | handleize %}
<a href=“javascript:void(0)” {% if variant.image != null %}data-engojvariant-img=“{{ variant.image.src | product_img_url: ‘grande’ }}”{% endif %} style=“{% if text == ‘white’ %}border: 1px solid #bcbcbc; {% endif %}background-color: {{ color | split: ’ ’ | last | handle }};”>
{% capture tempList %}
{{ colorlist | append: color | append: ’ ’ }}
{% endcapture %}
{% assign colorlist = tempList %}
{% endunless %}
{% endfor %}
{% endif %}
{% endfor %}
{% include 'add-wishlist' %}
{% capture price %}{{ product.price | money }}{% endcapture %}
{% if on_sale %} {{ product.compare_at_price | money }} {% endif %}
{% if product.price_varies %}{{ 'products.general.from_text_html' | t: price: price }}{% else %}{{ price }}{% endif %}
{% if sold_out %}
{% else %}
{% if product.variants.size > 1 %}
{% else %}
{% unless product.tags contains ‘noshow’ %}
{% endunless %}
{% endif %}
{% endif %}