How to hide the add to cart button in Shopify

As a shop owner, you might want to hide the add to cart button sometime. For example, if the product is not currently for sale, you can’t sell it to your customers. Or else, in case the item is made to the order, you don’t expect the button to be shown again to who have already ordered it. In addition, you can do this for some other reasons to suit your need. Below is a step-by-step instruction for you to hide the add to cart button in the easiest way.

Hide the add to cart button

Hide add to cart buttons in sectioned themes{#hide-add-to-cart-buttons-sectioned-themes}

Step 1: Select Themes

Make sure to log in your Shopify account firstly. Afterward, look for the Online Store button and tap on it. Then, it will automatically go to Themes.

Hide add to cart buttons

Step 2: Choose Edit code

There are lots of themes shown. Choose the one you want and press on Actions next to it. A drop-down list will appear. Choose the Edit code button in it.

Hide add to cart buttons

Step 3: Click the product-template-requires-contact.liquid file

In the Section directory, click the product-template-requires-contact.liquid file.

Hide add to cart buttons

Step 4: Find the code for Product form

Take a view of the product-template-requires-contact.liquid file. What you need to do is that find out the HTML code for the Product form. There is a tip for you. You can save your time by looking for the word form in the code. The fastest way you can carry out is that press on Ctrl + F in your keyboard. Then, type the word form into the textbox. Thanks to this, you can easily find out the code you expected.

Step 5: Make a change to the code

After you’ve found the code for the Product form. Make sure that you wrap it in Liquid tags. By doing this, you can stop the Add to cart button from being displayed to your clients. Look at the following example to be more transparent. It will look like this in the Narrative:

{% comment %}
{% include 'product-form' %}
{% endcomment %}

Step 6: Choose Save

Remember to choose the Save button to finish. Afterward, the Add to cart button has already hidden.

Hide add to cart buttons in non-sectioned themes{#hide-add-to-cart-buttons-non-sectioned-themes}

Step 1: Select Themes

Make sure to log in your Shopify account firstly. Afterward, look for the Online Store button and tap on it. Then, it will automatically go to Themes.

Hide add to cart buttons

Step 2: Choose Edit code

There are lots of themes shown. Choose the one you want and press on Actions next to it. A drop-down list will appear. Choose the Edit code button in it.

Hide add to cart buttons

Step 3: Click the product-template-requires-contact.liquid file

In the Section directory, click the product-template-requires-contact.liquid file.

Hide add to cart buttons

Step 4: Find the code for the Add to cart button

Take a view of the product-template-requires-contact.liquid file. What you need to do is that find out the HTML code for the Add to cart button. There is a tip for you. You can save your time by looking for an or

Hide add to cart buttons

Step 5: Make change to the code

After you’ve found the code for the Product form. Make sure that you wrap it in Liquid tags. By doing this, you can stop the Add to cart button from being displayed to your clients. Look at the following example to be more transparent. It will look like this in the Brooklyn theme:

{% comment %}
<button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>
                  <span class="btn__text">
                    {% if current_variant.available %}
                      {{ 'products.product.add_to_cart' | t }}
                    {% else %}
                      {{ 'products.product.sold_out' | t }}
                    {% endif %}
                  </span>
                </button>
{% endcomment %}

Hide add to cart buttons

Step 6: Choose Save

Remember to choose the Save button to finish. Afterward, the Add to cart button has already hidden.

Hide add to cart buttons

Summary

This guide with clear steps and illustrated images take you through how to hide the add to cart button. Hope this post brings you benefits and make you feel comfortable while following. You might want to replace the add to cart button with an email link or a contact form. If you are concern about that topic, click here to visit an article about it.