All Tutorials

Hide product prices

All Tutorials

Hide product prices

Hide product prices

You can hide all of your product prices and 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. In the Store currency section, click Change formatting.

  3. Wrap the first two formats in a span element with a class set to hidden. Don't use quotes. For example, below is the HTML with currency format for a store that uses USD as its currency:

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

    Below is the HTML without currency format:

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

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

  4. 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
    • theme.css.liquid
    • timber.scss.liquid
  5. At the very bottom of the file, add the following code:

    .hidden {
      display: none;
    }
  6. Click Save.

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 reverts your settings to the default money formats for your shop's currency and shows the prices in your storefront again.