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

Copy

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