Can I password protect a page by creating a second, customized "Password Page?"

[AlexGalt]

So I've been banging my head at this problem for a little while. All I really want to do is password protect my wholesale ordering page. (Looks like I'm not the only one.) It looks like the solution that most people land on is to use a third party app. But what I'm wondering is, is there a way to:

1. Duplicate the password page template

2. Gut it and replace the relevant bits of code with new bits of code that allows for a simple, non-dynamic password (I don't need much security)

3. that when entered sends the wholesale customer to the page that contains the wholesale collection.

Seems like it should be possible, but I'm not a code guy so I'm having trouble figuring out how to do it.

Any help is very much appreciated!

[Ishan_Makkar]

You can just add tags to customer profiles and show them content based on their segment - 

{% if customer.tags contains 'wholesale' %}
content goes here 
{% endif %}

Use this in menu and pages for wholesale customer, so only they will be able to see content .
Some more details here - https://help.shopify.com/en/manual/shopify-admin/productivity-tools/using-tags

[AlexGalt]

Hi Ishan, thank you very much for the response. What you're saying sounds very promising. I've been looking for the right spot to insert the code. I'd love very much for it to appear in the menu in the header. Going through the code (I'm using the Dawn theme) I can see where header.liquid references something called 'main-menu' but I can't seem to find where that connects to. I assume the code snippet you shared belongs inside of the main-menu bit? 

[Ishan_Makkar]

You can not use this for a dynamic menu, You need add it as a separate menu maybe in a different place. 

[soulchild37]

Hi Alex,

I have written custom code for one of the stores I manage, for password protecting certain page (no apps required), you just need to make changes to one file in the theme (assuming you are still using the Dawn theme), and utilize metafields for storing the password for a particular page. 


Below is a simplified instruction for copy pasting the code and how to use the metafield for storing password . (You can go to my tutorial link here if you want a more thorough step by step guide with screenshots and customization option : https://yagisoftware.com/articles/how-to-password-protect-a-page-on-shopify)

I didn't create a new page template for separate page that needs password protection, what I did was modify the original page template, to show a password prompt and hide the content, if the destination page contains value on its password metafield (the template will show normal page as usual, if the page left the password blank on its metafield).

Here's the example demo :

Before beginning, it is best to make a duplicate of your current theme in case anything breaks and you want to revert quickly.

You can go to your store theme, select "Edit code", then search for "main-page.liquid" , and replace the existing code with the code below : 

Replace the code in the "main-page.liquid" with the code below :

{% 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 %}

{{ 'section-main-page.css' | asset_url | stylesheet_tag }}

{%- style -%}
  .section-{{ section.id }}-padding {
    padding-top: {{ section.settings.padding_top | times: 0.75 | round: 0 }}px;
    padding-bottom: {{ section.settings.padding_bottom | times: 0.75 | round: 0 }}px;
  }

  @media screen and (min-width: 750px) {
    .section-{{ section.id }}-padding {
      padding-top: {{ section.settings.padding_top }}px;
      padding-bottom: {{ section.settings.padding_bottom }}px;
    }
  }
{%- endstyle -%}
  
<div class="page-width page-width--narrow section-{{ section.id }}-padding">
  <h1 class="main-page-title page-title h0{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--fade-in{% endif %}">
    {{ page.title | escape }}
  </h1>
  <div class="rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
    {% if page.metafields.custom.password == empty or page.metafields.custom.password == pagePassword %}
    {{ page.content }}
    {% 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=' + this.value;">{{ section.settings.submit_password_text }}</button>
    </div>
    {% endif %}
  </div>
</div>

{% schema %}
{
  "name": "t:sections.main-page.name",
  "tag": "section",
  "class": "section",
  "settings": [
    {
      "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"
    },
    {
      "type": "header",
      "content": "t:sections.all.padding.section_padding_heading"
    },
    {
      "type": "range",
      "id": "padding_top",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_top",
      "default": 36
    },
    {
      "type": "range",
      "id": "padding_bottom",
      "min": 0,
      "max": 100,
      "step": 4,
      "unit": "px",
      "label": "t:sections.all.padding.padding_bottom",
      "default": 36
    }
  ]
}
{% endschema %}

Click Save, then go to your Store > Settings, and select "Custom data" on the left sidebar, and click "Pages"

Click "Add definition" :

Input "password" as the Name, and ensure the value for "Namespace and key" is "custom.password". Enable storefronts read access, and select "single line text" as the type.

After saving the metafield definition, then go to your desired page, then scroll down to Metafields section, and click "Show all"

Then type the password required to access the page in the "password" definition, visitor will then need to input this password to access your page. (You can repeat this step for other pages you want to password protect)

Hope this helps!

Axel Kee

[Renehgade]

This works great, but how would you apply the same logic to a custom template page? I have a custom page for people to view a table, but I want to password protect it. It's called page.database.liquid, in which i've added custom HTML/CSS/JS.