How to hide the add to cart button in Shopify

Hailey
Hailey

Share:

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

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 {% comment %} and {% endcomment %} 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

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 <input> or <button> tag and the text such as add-to-cart or AddToCart in the code. The fastest way you can carry out is that press on Ctrl + F in your keyboard. Then, type the above keywords into the textbox. Thanks to this, you can easily find out the code you expected.

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 {% comment %} and {% endcomment %} 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.



Hailey
Hailey
I'm a detail-oriented, honest and hard-working of Shopify Expert, ready to work with you to find solutions to help you start your business or grow it. We offer fast deliveries without compromising quality. Fast and effective!
Recommend for you
Image Description
SEO Suite [FREE]

Auto-optimize website elements and structure in one-click.

Learn more
proofo
Proofo - Social Proof [FREE]

Use Social proof to boost sales

Learn more
Image Description
Size Chart [FREE]

Stunning size guide for great shopping experience

Learn more
Image Description
Free Shipping Bar [FREE]

Increase customers’ shopping cart size with free shipping offer

Learn more

Comments for Hide the add to cart button



Subscribe

Stay in the know

Get special offers on the latest news from AVADA.

40k subscribers has been joined!

Earn $10 in reward now!

comment
iphone
go up