Advanced: Hide Add to Cart button for certain products

Disclaimer: This is a more advanced tutorial which requires you to modify the theme code and add Liquid code. If you're unfamiliar with these type of modifications, we strongly advise that you hire a small task agency or Shopify Expert to make the modification. Invisible themes does not provide any warranty or further support for this code. Use this code at your own risk. The code provided below is only a suggestion. You are responsible for any and all code customizations made to your theme and for making backups. Be sure to have a good working backup available in the event any errors are made or your theme stops functioning. 

The purpose of this article is to assist with a common request we receive in support - How to we hide the Add to Cart button for certain products only? To address this, we have some simple Liquid code that you can add to hide the Add to Cart button/options for products that belong to a certain collection. 

Tutorial example - Hide Add to Cart button/options for all products that belong to the collection "surfboards"

Sample result of product after customization:

Before:

With this customization, all products that belong to the Collection "surfboards" or "Surfboards" will not display the Add to Cart form which includes variants, quantity and Express Checkout button. 


Optional version:

Add a Contact us form in place of the Add to Cart options:

This will allow your customers to send you a note about the current product. You'll receive a link to the product they sent the form from. 


How to:

1

Make a duplicate of your theme

Important: Don't skip this step.

From your list of themes, use the Actions link and choose Duplicate:

2

Modify product.liquid from the Snippets folder

Edit code:

** If it's a draft theme, then choose the Actions link for the theme you'd like to edit. The above example is for a live theme. 

From the Snippets folder, open product.liquid:

Use the find feature (Command-F on Mac or Control-F in Windows) and search for:

product-form

Locate that section of code:

We are going to replace this section of code with new code:

Select those 3 lines of code and replace with the code from this link:

Click to view code

Example:

OR:

For the optional Contact us form version, use this code instead of the above (place in the same position):

Click to view code - Contact us form version

Example if you use the contact us form version (longer code):

The arrow indicates where you can change the text above the form. 

Save the file:


Notes regarding above code:

Our tutorial collection is called "surfboards". You can change that to your collection. Be sure you use the Collection handle that's in the SEO portion of your collection page. Example:

Navigate to the collection you'd like to use in the main Shopify Admin:

In this example, I'll use the collection "Snowboard Bindings":

Scroll to the bottom of the page and choose "Edit website SEO":

Notice at the very bottom where the URL Address is - This is your collection handle:

Since Snowboard Bindings is two words, a hyphen was added. You'll need that exact handle to customize for your store's collection. 

Correct handle:

snowboard-bindings

3

Code change for Quick view feature

We also need to apply similar code to the Quick view snippet file to hide the Add to Cart options in Quick view. 

In the Code Editor, from the Snippets folder, open product-quick-view.liquid:

Locate the similar section, use the find feature and find:

product-form

Locate this section of code:

We will be replacing these 3 lines, similar to the previous step with new code:

Replace with all the code from this link:

Click to view code

Note: The Quick view code is different than the first product.liquid code, be sure to use this link for Quick view.

Save the file:

Your theme

Same rules apply, for your collection, you'll want to change the collection from "surfboards" to your collection like "snowboard-bindings".


Expert mode - Hide for multiple collections

To hide the Add to Cart form from multiple collections, you can simply add some extra code to the sample code provided. I'll add "snowboard-bindings" to the code so that products that belong to "surfboards" OR "snowboard-bindings" won't show the Add to Cart form.

In the case statement:

 {% case product.handle %}                    

    {% when 'surfboards'| downcase %}
            {% assign hide_buy = 'true' %}
                        
  {% endcase %}

Add an additional when condition before endcase:

 {% case product.handle %}                    

    {% when 'surfboards'| downcase %}
            {% assign hide_buy = 'true' %}

    {% when 'snowboard-bindings'| downcase %}
            {% assign hide_buy = 'true' %}
                        
  {% endcase %}

You can keep adding more if needed, be sure to follow the exact format - Experts only here.

Still need help? Contact Us Contact Us