How to Hide or Remove Add to Cart Buttons temporarily in Shopify
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 add to cart buttons temporarily in sectioned themes
- Hide add to cart buttons temporarily in non-sectioned themes
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.
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-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.
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.
Step 5: Save
Remember to click Save to finish.
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.
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 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.
