How to Hide or Remove Add to Cart Buttons temporarily in Shopify
Do you want to start? Get shopify free trial here!
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.
Stay in the know
Get special offers on the latest news from AVADA.
Earn $10 in reward now!