How to Create Password Protected Collections on Shopify | No App Required

This solution helps you create password-protected collections in your Shopify store. When customers try to access these collections, they’ll see a popup asking for a password, along with a contact form to request access if needed.

Key Features:

Simple password protection for any collection
Professional popup design with password field
Built-in contact form for password requests
Automatic access remembering (using browser storage)
Mobile-responsive layout

Implementation Requirements:

Basic Shopify store access
Ability to edit theme code
Metafields enabled for collections

The system stores successful password entries locally, so customers won’t need to re-enter passwords during their browsing session. For store owners, you can set different passwords for different collections through Shopify’s metafields interface.

1. Make Changes in Liquid Code

You need to add the following code in your theme.liquid or collection template:

				
					{% if collection.metafields.custom.password_protected %}
  <div id="password-popup" style="display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);z-index:9999;">
    <div style="background:#fff;max-width:500px;margin:100px auto;padding:20px;border-radius:5px;position:relative;">
      <div id="password-form">
        <h3>Enter Password</h3>
        <p>This collection is password protected. Please enter the password to view.</p>
        <input type="password" id="collection-password" style="width:100%;padding:10px;margin:10px 0;">
        <button id="submit-password" style="background:#000;color:#fff;padding:10px 20px;border:none;cursor:pointer;">Submit</button>
        <p id="password-message" style="margin-top:10px;"></p>
      </div>
      
      <!-- Contact Form -->
      <div style="margin-top:20px;border-top:1px solid #eee;padding-top:20px;">
        <h4>Don't have the password? Contact us</h4>
        {% form 'contact' %}
          <input type="hidden" name="contact[subject]" value="Password Request for {{ collection.title }} Collection">
          {% if form.posted_successfully? %}
            <p style="color:green;">Thank you! We'll contact you soon with the password.</p>
          {% endif %}
          <input type="text" name="contact[name]" placeholder="Your Name" required style="width:100%;padding:8px;margin:5px 0;">
          <input type="email" name="contact[email]" placeholder="Your Email" required style="width:100%;padding:8px;margin:5px 0;">
          <textarea name="contact[body]" placeholder="Message" style="width:100%;padding:8px;margin:5px 0;height:100px;"></textarea>
          <button type="submit" style="background:#000;color:#fff;padding:10px 20px;border:none;cursor:pointer;">Request Password</button>
        {% endform %}
      </div>
    </div>
  </div>

  <script>
    document.addEventListener('DOMContentLoaded', function() {
      // Check if access is already granted
      if(localStorage.getItem('collection_{{ collection.id }}_access') === 'granted') {
        return; // Don't show popup if already accessed
      }

      const password = '{{ collection.metafields.custom.collection_password }}';
      const popup = document.getElementById('password-popup');
      const messageEl = document.getElementById('password-message');
      
      // Show popup if collection is protected
      if(password && password.length > 0) {
        popup.style.display = 'block';
      }
      
      document.getElementById('submit-password').addEventListener('click', function() {
        const enteredPassword = document.getElementById('collection-password').value;
        if(enteredPassword === password) {
          messageEl.style.color = 'green';
          messageEl.textContent = 'Password correct! Access granted...';
          
          // Store access in localStorage
          localStorage.setItem('collection_{{ collection.id }}_access', 'granted');
          
          // Hide popup without reloading
          setTimeout(function() {
            popup.style.display = 'none';
          }, 1500);
        } else {
          messageEl.style.color = 'red';
          messageEl.textContent = 'Incorrect password. Please try again.';
        }
      });
      
      // Allow submitting with Enter key
      document.getElementById('collection-password').addEventListener('keyup', function(event) {
        if (event.key === 'Enter') {
          document.getElementById('submit-password').click();
        }
      });
    });
  </script>
{% endif %}

2. Use Metafields

Go to Shopify Admin → Settings → Custom Data

Create a new definition for “Collections” with the following fields:

password_protected (Boolean type)
collection_password (String type)

3. Set Password for Each Collection

Go to the collection you want to protect

In the Metafields section:

Set password_protected to true
Enter your desired password in the collection_password field