Hide product prices or disable your cart

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 Expert if you are not comfortable proceeding with the following tutorial.

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. From your Shopify admin, click Settings (or press G S):

    Settings

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

  3. Scroll down to the Standards and formats section.

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

    Hide prices before

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

    This will hide all the prices on your storefront.

    If that does not work, add the following at the bottom of your theme stylesheet:

    .hidden {
      display: none;
    }
    

    Caution

    Notice how we're not wrapping the word hidden in quotes? Do not ever add quotes, single or double, straight or curly, to your money formats. Adding quotes will break your theme's scripts, resulting in all kinds of functionality breakage, when that functionality depends on JavaScript.

  6. Click Save to apply your changes.

Did you know?

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

  1. From your Shopify admin, click Online Store, and then click Themes (or press G W T).

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

  3. In the Templates folder, click the product.liquid file to open it in the online code editor. If you use the Solo theme, you will need to edit the file single-product.liquid in the Snippets folder instead. Inside your file, look for your Add to Cart button. That button is inside a form element that has an action attribute set to /cart/add.

    Here are a few tricks that will help you locate your button:

    • Press ctrl + F on a PC or command + F on Mac to look for the text products.product.add_to_cart.
    • If that doesn't work, look for the text type="submit".

    For example, your Add to Cart button could look like this:

    
    <input class="btn" type="submit" value="Add to Cart">
    
    

    Or like this:

    
    <button type="submit" id="AddToCart" class="btn">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
    
    
  4. When you have located the HTML for your Add to Cart button, wrap it in Liquid comment tags.

    Using the examples in the previous steps, here is what the code will look like when you apply the Liquid comment tags:

    
    {% comment %}
    <input class="btn" type="submit" value="Add to Cart">
    {% endcomment %}
    
    

    Or like this:

    
    {% comment %}
    <button type="submit" id="AddToCart" class="btn">
      <span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
    </button>
    {% endcomment %}
    
    
  5. Click Save to update your template.

Did you know?

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