How to password protect a page on Shopify

You might have some content that you want to gate from public access, for example wholesale price list, or downloadable content for customers who have previously purchased certain product etc.

There’s way to create a new page template that only show content to logged in customer which have certain tags, but what if you want to allow visitor to view the content without creating an account / logging in?

This tutorial will guide you (with copy paste code) on how to implement password protected page with metafields and custom coding on theme, and you can set different password for different page with ease.

Before we begin the tutorial, it would be best to make a backup of your theme, in case anything goes wrong, you can revert the changes by publishing the copy of the original theme.

Table of contents

Create metafield definition for page to store the password
Modify theme code to add password input box and gate the content

Create metafield definition for page to store the password

First, we will create a metafield definiton for pages, to store the password value. Go to your store settings, select “Custom Data” on the left side bar, and click “Pages”:

Then click “Add definiton”:

In the definition form, input password for the “Name” field, and ensure the “Namespace and key” field value is custom.password, and select “Single line text” for the type, and remember to enable “Storefront access”, so the theme code can access this value later on. Click “Save” to save the changes.

Next, go to your desired page (Online Stores > Pages, and select your page), and scroll down to “Metafields” section, and click “Show all” :

In the password metafield section, type in your desired password value (visitor will need to input this password value to view the page content) :

Modify theme code to add password input box and gate the content

Go to your store Shopify Admin, then select “Online Store” > “Theme”, go to your current theme and select “Edit Code” :

Then search for “page.json” in the left side bar of the Theme code editor, and open the “page.json” file, locate the value for “main” -> “type”. The value usually should be “main-page”, we will then search for this file, search this value on the left side bar, and open the file.

(If your store theme does not have “page.json”, then you can search for “page.liquid”, and use it as a replacement for the “main-page.liquid” file for the steps below)

Open the “main-page.liquid” in the code editor (or another file name if it is different), and paste the following code at the top of the file :

{% capture contentForQueryString %}{{ content_for_header }}{% endcapture %}
  {% assign pageParams = contentForQueryString
    | split: '"pageurl":"'
    | last
    | split: '"'
    | first
    | split: '.myshopify.com'
    | last
    | split: '?'
    | last
    | replace: '\/', '/'
    | replace: '%20', ' '
    | replace: '\u0026', '&'
    | split: '&'
  %}

{% for param in pageParams %}
  {% if param contains 'password=' %}
  {% capture pagePassword %}{{ param | split: '=' | last }}{% endcapture %}
  {% endif %}
{% endfor %}

Next, search for {{ page.content }} in the same file, and paste this line above it :

{% if page.metafields.custom.password == empty or page.metafields.custom.password == pagePassword %}

Next, search for {{ page.content }} in the same file, and paste this line below it :

{% else %}
<p>
  {% if pagePassword %}
  {{ section.settings.wrong_password_prompt_text }}
  {% else %}
  {{ section.settings.password_prompt_text }}
  {%  endif %}
</p>
<div class="field">
  <input type="password" id="password-input" class="field__input" placeholder="Password" autofocus autocomplete="off" onkeypress="if(event.keyCode == 13){ window.location.href = '{{ request.path }}?password=' + this.value; }"/>
  <br>
  <button type="button" class="button" onclick="window.location.href = '{{ request.path }}?password=' + document.querySelector('#password-input').value;">{{ section.settings.submit_password_text }}</button>
</div>
{% endif %}

Next, search for {% schema %} in the same file, and paste the following lines below the “settings: [” line :

{
  "id": "password_prompt_text",
  "type": "text",
  "label": "Text to tell visitor to input password",
  "default": "Please input password to view this page"
},
{
  "id": "wrong_password_prompt_text",
  "type": "text",
  "label": "Text to tell visitor to input a correct password",
  "default": "Wrong password, please try again"
},
{
  "id": "submit_password_text",
  "type": "text",
  "label": "Text for the submit password button",
  "default": "Submit"
},

Save the code changes, then go to your theme, and click “Customize” :

Then navigate to the default page template in the Theme Editor (Click the top “Home page”, and navigate to “Pages” > “Default page”).

Then click the “Page” section of the left sidebar :

You can then customize the text prompt that will be shown to visitor on password protected page :

After saving, you can try go to your store and access the page that is password protected, you should see a password box with the text prompt! You can try enter a wrong password, you should see that the page content is only shown when a correct password is supplied.

You can set password on other pages by setting the metafield (custom.password) value, go to the selected page, scroll down to “Metafields” section, and click “Show all” :

In the password metafield section, type in your desired password value (visitor will need to input this password value to view the page content) :