Protect store pages with the Password protection feature – Swissuplabs

You can protect any pages from visitors using the Password protection feature. In the example, we show you how to protect a product page.

Before diving into the code, you must create new meta fields with the Definition "password" and its type "Single line text".

Here you can set the validation params like "Minimum character count" / "Maximum character count" or even specify a pattern of the value.

The next step is to choose a product that should be protected from visitors and navigate to its configurations. Scroll down to the Metafields section and enter the input value "password".

Now you can go to the theme code and modify the templates.

1. Here we have to obtain the query params from the page URL and verify the "password" param existing.

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

2. Wrap the page content in the code below:

<!-- allows to show the product page's content in case the metafields "password" has an empty value or its value appropriate to the password. -->
{% if product.metafields.custom.password == empty or product.metafields.custom.password == pagePassword %}

<!-- PAGE content here -->

{% else %}
<!-- Password protection container with styles and script code below -->
<div class="password-container">
    <!-- You can adapt the styles according to your store design -->
    <style>
        .password-container {
            position: fixed;
            width: 100%;
            height: 100%;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            background: rgba(0,0,0,.5);
            z-index: 99;
        }
        .password-form {
            position: relative;
            top: 50%;
            width: 100%;
            max-width: 400px;
            margin: 0 auto;
            transform: translateY(-50%);
            background: #ffffff;
            border-radius: 6px;
            padding: 2.5rem 1.5rem;
        }
        .password-form button {
            width: 100%;
            margin-top: 1.25rem;
            background: red;
            color: white;
        }

        .password-form button:not(._active) {
            pointer-events: none;
            opacity: .5;
        }

        .password-form span {
            display: block;
            color: #000000;
        }
        .password-form .wrong_password {
            display: block;
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            color: rgb(255, 0, 0);
        }
          [type=password] {
            border-color: #e8e8e8;
            color: #000000;
          }
        @media(min-width: 767px), print {
            .password-form {
                max-width: 50%;
                padding: 2rem 5rem 3rem;
            }
        }
    </style>
    <div class="password-form">
        <span class="title h3">{{ section.settings.password_prompt_text | escape}}</span>
        <input type="password" id="password-input" class="field__input" minlength="8" maxlength="8" required placeholder="Password" autofocus autocomplete="off" onkeypress="if(event.keyCode == 8){ window.location.href = '{{ request.path }}?password=' + this.value; }"/>
        <br />
        <!-- the button has disabed click event by default to prevent get page access when the input password is empty -->
        <button type="button" id="password-button" class="button" onclick="window.location.href = '{{ request.path }}?password=' + document.querySelector('#password-input').value;">{{ section.settings.submit_password_text | escape }}</button>
        {% if pagePassword %}
        <span class="wrong_password">{{ section.settings.wrong_password_prompt_text }}</span>
        {% endif %}
    </div>
</div>
<!-- activate the password button on typing the input value -->
<script type="text/javascript" async="async">
    const input = document.querySelector('#password-input')?.addEventListener('input', activateBtn.bind(this));
    const btn = document.querySelector('#password-button');
    function activateBtn(el) {
        if(el.target.value.length > 1) btn.classList.add('_active');
        else btn.classList.remove('_active');        
    }
</script>
{% endif %}

{% schema %}
{
  "name":"t:sections.main-product.name",
  "tag":"section",
  "class":"product-section spaced-section",
  "settings":[
    {
        "id":"password_prompt_text",
        "type":"text",
        "label":"Text to tell the visitors to input password",
        "default":"Please input password to view this page"
    },
    {
        "id":"wrong_password_prompt_text",
        "type":"text",
        "label":"Text to tell the visitors 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"
    }
  ]  
}
{% endschema %}

You can do the same for other pages. You have to simply use specific metafields parts: Collections, Pages, Blog posts, Orders, Customers, etc.

Related articles