Hide Add to cart buttons

You can hide your Add to cart buttons on your storefront and reveal them again in the future.

Caution

This is an advanced tutorial and is not supported by Shopify. Knowledge of web design languages such as HTML, CSS, JavaScript, and Liquid is required. We suggest hiring a Shopify Partner if you are not comfortable proceeding with the following tutorial.

Caution

Vintage themes aren't available in the Theme Store. Vintage themes don't have the features included in Shopify's Online Store 2.0 themes, and Shopify free vintage themes don't receive updates except security fixes.

Note

This customization is for vintage Shopify themes, and doesn't apply to Online Store 2.0 themes.

• Find out your theme's architecture version
• Explore Online Store 2.0 theme customizations

Sectioned and non-sectioned themes

Note

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. A sectioned theme lets you drag and drop to arrange the layout of your home page, and a non-sectioned theme doesn't.

To figure out whether your theme supports sections, go to the theme's Edit code page. If there are files in the Sections directory, you are using a sectioned theme. Non-sectioned themes were released before October 2016, and do not have files in the Sections directory.

If you are using a sectioned theme, click the Sectioned themes button and follow the instructions. If you are using an older, non-sectioned theme, click the Non-sectioned themes button and follow the instructions.

Sectioned

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Sections directory, click to open your product-template.liquid file. Find the HTML code for the Add to cart button. You can search for the word cart as a start.

The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text like Add to cart, AddToCart, or add-to-cart.

In the Debut theme, the add to cart button code looks like this:

<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>

1. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being displayed on your store, but will let you more easily put it back if you want to change your new template later.

Using the example above, the new code would look like this:

{% 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 %}

Caution

Make sure that you don't comment out the <form> tags for your product page. Your comment tags should not surround any <form> or </form> tags, otherwise customers could experience errors when viewing your product page.

1. Click Save to confirm your changes.

When you are ready to display your Add to cart buttons again, go back to your product-template.liquid file on the Edit HTML/CSS page, remove the {% comment %} and {% endcomment %} tags, and click Save.

Non-sectioned

1. From your Shopify admin, go to Online Store > Themes.
2. Find the theme you want to edit, click the … button to open the actions menu, and then click Edit code.
3. In the Templates directory, click to open your product.liquid file. Find the HTML code for the Add to cart button. You can search for the word cart as a start.

The code for the add to cart button varies theme to theme. Look for an <input> or <button> tag with text such as Add to cart, AddToCart, or add-to-cart.

In the Minimal theme, the add to cart button code looks like this:

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

1. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being displayed on your store, but will let you more easily put it back if you want to change your new template later.

Using the example above, the new code would look like this:

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

Caution

Make sure that you don't comment out the <form> tags for your product page. Your comment tags should not surround any <form> or </form> tags, otherwise customers could experience errors when viewing your product page.

1. Click Save to confirm your changes.

When you are ready to display your Add to cart buttons again, go back to your product.liquid template on the Edit HTML/CSS page, remove the {% comment %} and {% endcomment %} tags, and click Save.