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
