Hide product prices or disable your cart

You can hide your product prices and/or your Add to Cart buttons on your storefront and reveal them again in the future.

Temporarily hide your product prices

You can hide all of your product prices and easily reveal them again in the future by editing your currency formats.

  1. Confirm you are in the General section, or click General if you are not already there.

  2. Scroll down to the Standards and formats section.

  3. Click the Change formatting link next to Currency to view additional formatting options:

    Hide prices before

  4. Wrap the first two formats in a span element with a class set to hidden. Don't use quotes. For example, if your shop uses USD as currency, your format HTML with currency will be:

    <span class=hidden>${{ amount }} USD</span>
    

    The second format, HTML without currency, will be:

    <span class=hidden>${{ amount }}</span>
    

    Caution

    Do not place <span class=hidden>${{ amount }}</span> into the Email with Currency and Email without Currency fields.

    Your currency formatting should now look like this:

    Hide prices after

    Caution

    It is important that you do not add quotes to your money formats, as doing so may interfere with the functionality of your theme's JavaScript.

    This should hide all the prices on your storefront. If prices are still showing, then you will need to add some code to the bottom of your theme's stylesheet. Continue to follow the next steps.

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. In the Assets directory, click to open your theme.scss.liquid file.

    The name of the stylesheet can vary theme to theme, so if you cannot find theme.scss.liquid, look for one of the following:

    • style.scss.liquid
    • styles.scss.liquid
    • timber.scss.liquid
  3. At the very bottom of the file, add the following code:

    .hidden {
      display: none;
    }
    
  4. Click Save to apply your changes.

Tip

When you are ready to show your prices again, change your shop's currency to any other one, then change it back to your own currency. This will revert your settings to the default money formats for your shop's currency and show the prices in your storefront again.

Temporarily hide your add to cart buttons

The steps for this tutorial differ depending on whether you are using a sectioned or a non-sectioned theme. To figure out whether your theme supports sections, go to the theme's Edit HTML/CSS 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, then click the Sectioned themes button and follow the instructions. If you are using non-sectioned theme, then click the Non-sectioned themes button and follow the instructions.

Sectioned themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. 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>
    
  3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you 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.

  4. Click Save to confirm your changes.

Tip

When you are ready to show 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 themes

  1. Find the theme you want to edit, click the ... button, and then click Edit HTML/CSS.

  2. 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 like 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>
    
  3. When you find the code, wrap it in Liquid {% comment %} and {% endcomment %} tags. This will stop the code from being shown on your store, but will let you 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.

  4. Click Save to confirm your changes.

Tip

When you are ready to show 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.

Want to discuss this page?

Visit the Shopify Community