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

AlexGalt
Visitor
3 0 0

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!

Replies 5 (5)

Ishan_Makkar
Shopify Expert
115 7 8

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

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
AlexGalt
Visitor
3 0 0

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
Shopify Expert
115 7 8

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

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us

soulchild37
Shopify Partner
166 9 46

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 :

soulchild37_0-1692816556867.gif

 

 


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 : 

soulchild37_1-1692816556693.png

 

 



soulchild37_2-1692816556596.png

 

 


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"

soulchild37_3-1692816556739.png

 

 

 

Click "Add definition" :

 

soulchild37_4-1692816556657.png

 

 



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.

 

soulchild37_5-1692816556729.png

 

 

 

 

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

 

soulchild37_6-1692816556591.png

 

 



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)

 

soulchild37_7-1692816556729.png

 

 


Hope this helps!

Axel Kee

Spent too much support time dealing with order cancellation request from customer? Wouldn't it be good if customer can cancel order on their own without bugging your support? Try out Cancellable app! https://apps.shopify.com/cancellable . I also write articles about store customization that can improve your customer shopping experience here : Yagi Software Blog
Renehgade
Visitor
1 0 0

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.