{"id":6024,"date":"2025-01-24T19:00:00","date_gmt":"2025-01-24T19:00:00","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=6024"},"modified":"2026-02-23T11:52:23","modified_gmt":"2026-02-23T06:22:23","slug":"shopify-hide-price-until-logged-in","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/shopify-hide-price-until-logged-in\/","title":{"rendered":"How to Add Login to View Price in Shopify?\u00a0"},"content":{"rendered":"\n

If you want to hide the product price and display \u201clogin to view price\u201d in your Shopify, this simple guide will help you to achieve it without any technical hassles.  <\/p>\n\n\n\n

At the end of the blog, we will be able to achieve the following if you follow all the instructions correctly. <\/p>\n\n\n

\n
\"Hide<\/figure>\n<\/div>\n\n\n

Shopify Login for Pricing: 2 Methods <\/h2>\n\n\n\n

There are two practical ways to hide prices until a customer logs in on Shopify:<\/p>\n\n\n\n

Method 1: Custom Code<\/h3>\n\n\n\n

You manually edit your theme’s Liquid files to hide price elements for guest visitors.<\/p>\n\n\n\n

This works well if you’re comfortable with code and want a lightweight, no-cost solution. However, it may require updates whenever your theme changes, and it doesn’t give you a polished “Login to View Price” button experience out of the box.<\/p>\n\n\n\n

Method 2: Shopify App<\/h3>\n\n\n\n

You use a dedicated login to view the price Shopify app that handles price hiding through a simple dashboard \u2014 no coding required.<\/p>\n\n\n\n

This method gives you more control: you can choose which pages, products, or customer groups to target, customize the button text, and show a “Login to View Price” or “Get a Quote” button automatically.<\/p>\n\n\n\n

Both methods are covered step-by-step below.<\/p>\n\n\n\n

Steps to Hide Price Until Logged in to Shopify\u00a0Via Code<\/h2>\n\n\n\n

Step 1: Navigate to Theme Editor <\/h3>\n\n\n\n

Login to your Shopify admin and head to Online Store > Themes<\/strong><\/p>\n\n\n

\n
\"Navigate<\/figure>\n<\/div>\n\n\n

Then, click on the three dots beside the Customize button<\/strong> and select Edit code <\/strong>for your current theme.<\/p>\n\n\n

\n
\"Edit<\/figure>\n<\/div>\n\n\n

Step 2: Add the Code to The theme.liquid file<\/h3>\n\n\n\n

Next, head to theme.liquid and in the Theme File editor, open the theme.liquid file and paste the following code before the closing <\/body> tag:<\/p>\n\n\n\n

<script>\n  window.isLoggedIn = {% if customer %} true {% else %} false {% endif %};\n\n  document.addEventListener('DOMContentLoaded', function() {\n    var priceElements = document.querySelectorAll('.product-price, .price, .product-card__price');\n\n    priceElements.forEach(function(priceElement) {\n      if (window.isLoggedIn) {\n        priceElement.style.display = 'inline';\n      } else {\n        priceElement.style.display = 'none';\n        var loginMessage = document.createElement('span');\n        loginMessage.innerHTML = '<a href=\"\/account\/login\">Login<\/a> to view price';\n        priceElement.parentNode.appendChild(loginMessage); \/\/ Add the login message next to the price element\n      }\n    });\n  });\n<\/script><\/pre>\n\n\n\n
You can modify the messaging that you would like to keep instead of “login to see the price” and click Save. <\/strong><\/p>\n\n\n
\n
\"Add<\/figure>\n<\/div>\n\n\n
Step 3: Hide Price in the Front End <\/h3>\n\n\n\n
Test the functionality, try browsing your Shopify store without login and you will notice the product prices are hidden. This simple method will not display pricing to the guest (not logged in) customers on product as well as collection pages.<\/p>\n\n\n
\n
\"Hide<\/figure>\n<\/div>\n\n\n
Steps to Hide Price Until Login Using Shopify App<\/h2>\n\n\n\n
Step 1: Install and Enable Hiding Price<\/h3>\n\n\n\n
Install the MIT Request a Quote app<\/a> from the Shopify App Store and open the app dashboard. In the Pricing Display Rules, check Enable Price Hiding<\/strong> to activate the price hiding functionality across your storefront.<\/p>\n\n\n\n
Step 2: Configure Hide Price Rules<\/h3>\n\n\n\n
Under the Hide Price Rules<\/strong> section, choose your page targeting:<\/p>\n\n\n\n