How to hide prices to unlogged customers in Shopify

Learn how to show prices only to your registered customers with a clean code solution. No need of an app
October 27, 2023

Hiding product prices is a common practice in eCommerce, especially for B2B businesses. This is because it can help to protect pricing strategies and secure wholesale prices. Also some businesses may choose to hide product prices in order to turn their online store into a product catalog. Or to require a quotation prior to complete purchases.

Many of these scenarios call for prices to be shown only to registered users. We wanted to provide you with this simple code solution that allows you to hide prices and cart actions from unlogged users. You can apply directly in your theme files and should work in most of them. No need of an app, just a minimal technical knowledge and having Shopify Customer Accounts enabled.

How to hide prices to unlogged users in Shopify without an app

  1. Go to your Shopify admin and navigate to Online Store > Themes. Find the theme you want to edit and click on the Three points icon > Edit code.
  2. In the Theme Editor, search for the word "price" to find the price elements. This is usually a snippet named price.liquid, product-price.liquid, or something similar. Click on it to open it in the editor.
  3. See the code block below ↓ for the code you need to paste. Paste the beginning of the conditional (red text) on top of the code in the snippet, and the end of the conditional (blue text) at the very end. You can customize the text to show when a user is unlogged ("Please login to see the price").
  4. Save and it's done.
  5. Additionally you can require your customers to log-in before checkout. View here.

{% comment %} START CUSTOMER CONDITIONAL {% endcomment %} {% if customer %} {% comment %} ALL THE CODE IN THE SNIPPET, BELOW IT'S JUST AN EXAMPLE {% endcomment %} <div class="price"> <div class="price__container"> <div class="price__regular"> <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span> <span class="price-item price-item--regular"> {{ money_price }} </span> </div> </div> </div> {% comment %} END CUSTOMER CONDITIONAL {% endcomment %} {% else %} <a href="/account/login">Please login to see the price</a> <style>form[data-type="add-to-cart-form"] { display: none !important; }</style> {% endif %}

Froonze Account Approval

Hiding prices and restricting account creation are two features that go hand-in-hand. They are often used together to make sure that only authorized customers can create accounts or make purchases. Shopify does not offer these features natively, but our Custom Forms plugin does.

With our Account Approval feature, customers will submit an account application instead of registering directly on your store. The application will need to be reviewed and approved (or rejected) by a shop admin before the customer can create an account. The application form can also be used to collect additional information. Information that you may require from customers before they can create an account, such as tax details or addresses. This allows you to have more control over who has access to your store.

If you are interested in using our Account Approval feature, please visit this link to learn more about the Custom Forms plugin, or just contact us.

Related questions

What do I need to complete the steps you mentioned in this article?

You don't need an app. You only need to have Customer Accounts enabled in Shopify. We also recommend using Classic Customer Accounts instead of New Customer Accounts. As Classic will handle customer status on-site cookies better. More information here.

Is there any way to lock the prices completely regardless of if the customer is logged or not?

Yes, there is. In this case you can do it directly from the Shopify Currency settings. You can find more instructions in this Shopify article.

Is there any way to lock them for particular products?

Yes, you can. You would only need to add a conditional to identify products, instead of (or in addition to) the customer login status conditional. For example, to find a particular product, you would write {% if product.handle == "yourproducthandle" %}. Where yourproducthandle needs to be replaced with the correct product handle.

I'm not finding any element named price.liquid or product-price.liquid, or there are more than one

Yes, unfortunately, not all themes use these elements, but we believe that most of them do at this time. Custom or paid themes can use elements with different names, or have different snippets to code prices on different pages. In this case, if you are not familiar with HTML code, it is perhaps better to consult with a developer to implement this solution.

In your code you are hiding the Add To Cart form with CSS, is this a good solution?

Yes, we think this is a simple solution that should work in most cases. A better solution would be to locate the Add To Cart forms and wrap them in a similar condition {% if customer %}. However, these elements usually do not have their own snippet, so they are more difficult to locate. They are usually in the product template next to the prices. If you can locate the element, you can wrap it in the condition, and this would be a cleaner solution.

I'd like to hide also product quantity or other elements while the customer is unlogged

You can do this. Just add the elements to the <style> rule in the code preceded by commas. For example let's say that quantity is in a class "product-form__quantity". Then the code would be:
<style>form[data-type="add-to-cart-form"], .product-form__quantity { display: none !important; }</style>

Your fix is not hiding all of my prices

Yes, unfortunately, we cannot guarantee that this simple code solution will work in every circumstance. In complex themes (like paid ones with many features) or in cases where you are using apps that could be adding price snippets (like Subscription apps), the solution may not work. If you cannot locate all price elements in your theme, it is possible to apply a CSS solution. In this case, you need to identify the selectors that contain the prices first, then write down the CSS rule and wrap it in the conditional:

{% comment %} REPLACING '.MYPRICE-1', '.MYPRICE-2',... FOR YOUR SELECTORS {% endcomment %} {% if customer %} {% else %} <style> .myprice-1, .myprice-2, .myprice-3 { display: none !important; } </style> {% endif %}

What are the benefits of hiding prices to customers

Hiding product prices on Shopify can be beneficial for a number of reasons, especially for B2B businesses.

  • To protect pricing strategies: When product prices are visible to the public, it can give competitors an unfair advantage.
  • To secure wholesale prices: Wholesale customers often expect discounts. And they may be more likely to negotiate if they do not know the original price of the product.
  • To gain an edge in price negotiation: In B2B trading, wholesalers often place large orders. By hiding prices, businesses have the opportunity to offer customized discounts to wholesalers. This can help to encourage repeat business.
  • To turn your store into a product catalog: Some businesses may choose to hide product prices to turn their online store into a product catalog. This can be useful for businesses that want to showcase their products without the option to purchase them online. Customers can then contact the business directly to inquire about pricing and availability.

Froonze Customer Accounts Concierge
Get the app today
Turn the account page into a beautiful portal with
Froonze Customer Accounts Concierge
  • 220+