Home > Shopify Tutorials > Hide or Remove Add to Cart Buttons temporarily in Shopify

How to Hide or Remove Add to Cart Buttons temporarily in Shopify

Last updated: March 01, 2024
This article has been written and researched by our expert Avada through a precise methodology. Learn more about our methodology

Sam

Author

Daniel

Researcher

This post is definitely what you need when you want to Hide or Remove Add to Cart Buttons temporarily. I will take you through a step-by-step guide to do this. But first, you should know what type of theme supports section you are using is. It can be a sectioned or non-sectioned theme. You can figure out by taking a view of the Sections directory. If there are files in that directory, it must be a sectioned theme. Vice versa, if there are none, you are using the non-sectioned theme.

Depend on what kind of theme you’re using, there are two different instructions for you to carry out. Therefore, make sure that you know and choose the right guide to follow.

Table of content

Hide or Remove Add to Cart Buttons temporarily in sectioned themes

Step 1: Go to Online Store > Themes

After logging in your Shopify account, you will go to the admin page. Make sure that you press on the Online Store button. Then, choose Themes.

Hide add to cart buttons temporarily

Step 2: Tap on Edit code

There comes a list of themes you have. Find the one you expected to edit and select Actions. Afterward, tap on Edit code in the drop-down list.

Hide add to cart buttons temporarily

Step 3: Open the product-template.liquid file

Take a look at the Sections field, make sure that you find your product-template.liquid file. Then, look for the HTML code for the Add to cart button. Below is a picture illustrate for the Add to cart button code. You can find the code similar to this with an <input> or <button> tag with some words such as Add to cart, AddToCart, or add-to-cart.

Hide add to cart buttons temporarily

Step 4: Make a change to the Add to cart code

You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Look at the following image. It is what the code looks like when you’ve done.

Hide add to cart buttons temporarily

Step 5: Save

Remember to click Save to finish.

Hide add to cart buttons temporarily

Hide or Remove Add to Cart Buttons temporarily in sectioned themes for iPhone (Click here)

Step 1: Go to Store
From the admin page, make sure to choose Store at the bottom of the page.

Hide add to cart buttons temporarily

Step 2: Click Online Store
Look at the Sales channels section, click Online Store then.

Hide add to cart buttons temporarily

Step 3: Choose Manage themes
In this step, you choose Manage themes and go to the next step,

Hide add to cart buttons temporarily

Step 4: Go to Edit code
A list of your themes will appear. Find the one you want to make a change and click the Actions button next to it. Go to Edit code.

Step 5: Open the product-template.liquid file
Take a look at the Sections field, make sure that you find your product-template.liquid file. Then, look for the HTML code for the Add to cart button. You can find the code with an <input> or <button> tag with some words such as Add to cart, AddToCart, or add-to-cart. For example, here is the code in the Debut theme:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

Step 6: Make a change to the Add to cart code
You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Take a view of the example below.

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Step 7: Save
Click Save to complete hiding the Add to cart button from your product page.

Hide or Remove Add to Cart Buttons temporarily in sectioned themes for Android (Click here)

Step 1: Go to Store
From the admin page, make sure to choose Store at the bottom of the page.

Step 2: Click Online Store
Look at the Sales channels section, click Online Store then.

Step 3: Choose Manage themes
In this step, you choose Manage themes and go to the next step,

Step 4: Go to Edit code
A list of your themes will appear. Find the one you want to make a change and click the Actions button next to it. Go to Edit code.

Step 5: Open the product-template.liquid file
Take a look at the Sections field, make sure that you find your product-template.liquid file. Then, look for the HTML code for the Add to cart button. You can find the code with an <input> or <button> tag with some words such as Add to cart, AddToCart, or add-to-cart. For example, here is the code in the Debut theme:

<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>

Step 6: Make a change to the Add to cart code
You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Take a view of the example below.

{% comment %}
<button type="submit" name="add" id="AddToCart-{{ section.id }}" {% unless current_variant.available %}disabled="disabled"{% endunless %} class="btn product-form__cart-submit{% if product.options.size == 1 and product.variants[0].title == 'Default Title' %} product-form__cart-submit--small{% endif %}">
  <span id="AddToCartText-{{ section.id }}">
    {% unless current_variant.available %}
      {{ 'products.product.sold_out' | t }}
    {% else %}
      {{ 'products.product.add_to_cart' | t }}
    {% endunless %}
  </span>
</button>
{% endcomment %}

Step 7: Save
Click Save to complete hiding the Add to cart button from your product page.

Hide or Remove Add to Cart Buttons temporarily in non-sectioned themes{#hide-add-to-cart-buttons-temporarily-non-sectioned-themes}

Step 1: Go to Themes

After logging in your Shopify account, you will go to the admin page. Make sure that you press on the Online Store button. Then, choose Themes.

Step 2: Tap on Edit code

There comes a list of themes you have. Find the one you expected to edit and select Actions. Afterward, tap on Edit code in the drop-down list.

Step 3: Open the product.liquid file

Take a look at the Template field, make sure that you find your ` product.liquid file. Then, look for the HTML code for the Add to cart button. You can find the code similar to this with an or

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">products.product.add_to_cart</span>
</button>

Step 4: Make a change to the Add to cart code

You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Look at the following example.

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Step 5: Save

Remember to click Save to finish.

Hide or Remove Add to Cart Buttons temporarily in non-sectioned themes for iPhone (Click here)

Step 1: Go to Store
From the admin page, make sure to choose Store at the bottom of the page.

Step 2: Click Online Store
Look at the Sales channels section, click Online Store then.

Step 3: Choose Manage themes
In this step, you choose Manage themes and go to the next step,

Step 4: Go to Edit code
A list of your themes will appear. Find the one you want to make a change and click the Actions button next to it. Go to Edit code.

Step 5: Open the product.liquid file
Take a look at the Template field, make sure that you find your product.liquid file. Then, look for the HTML code for the Add to cart button. Below is an example illustrate for the Add to cart button code. You can find the code similar to this with an <input> or <button> tag with some words such as Add to cart, AddToCart, or add-to-cart.

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">products.product.add_to_cart</span>
</button>

Step 6: Make a change to the Add to cart code
You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Look at the following example.

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Step 7: Save
Click Save to complete hiding the Add to cart button from your product page.

Hide or Remove Add to Cart Buttons temporarily in non-sectioned themes for Android (Click here)

Step 1: Go to Store
From the admin page, make sure to choose Store at the bottom of the page.

Step 2: Click Online Store
Look at the Sales channels section, click Online Store then.

Step 3: Choose Manage themes
In this step, you choose Manage themes and go to the next step,

Step 4: Go to Edit code
A list of your themes will appear. Find the one you want to make a change and click the Actions button next to it. Go to Edit code.

Step 5: Open the product.liquid file
Take a look at the Sections field, make sure that you find your product.liquid file. Then, look for the HTML code for the Add to cart button. You can find the code with an <input> or <button> tag with some words such as Add to cart, AddToCart, or add-to-cart. For example, here is the code in the Debut theme:

<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">products.product.add_to_cart</span>
</button>

Step 6: Make a change to the Add to cart code
You must have already found the code. Next, you will wrap it in Liquid {% comment %} and {% endcomment %} tags. With these tags, the Add to cart button will be hidden and your customers will not see it. Besides, you can effortlessly put it back if you expect to change the code later. Take a view of the example below.

{% comment %}
<button type="submit" name="add" id="AddToCart" class="btn">
  <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% endcomment %}

Step 7: Save
Click Save to complete hiding the Add to cart button from your product page.

Summary

In conclusion, this transparent post helps you to hide add to cart buttons temporarily. Hope you find it useful and easy to do. You can make a change to the Add to cart code whenever you want. If you are concern about the way to generate a new product template effectively, you can click here to visit an instruction about that.


Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.