Is it possible to make password protected pages with different set password?

[Etdesigns888]

Hi there, 

I pair curated playlists with my products and I was wanting to create multiple pages that only customers who have the password to can enter and get the links to their specific playlists. I was wondering if this is possible to set up a password catch and depending on what password is put in (would be set by me on my end), it will take them to a specific page where the link to their playlist will be. Mostly so they can't just get access to all the playlists when they only need one. Is this possible to do?? I have Dawn theme on my site right now also. Thanks in advance to anyone who has insight on this! 🙂

[PageFly-Amelia]

Hi @Etdesigns888 ,

This is Amelia from PageFly - a Landing Page Builder App,

You can try to use this way to make the customization for your password pages

Here's a step-by-step guide to help you set this up:

Step 1: Create the Password-Protected Pages

1. Create the Pages:

   • Go to Online Store > Pages in your Shopify admin.

   • Create a new page for each playlist you want to protect. For example, create pages like "Playlist 1", "Playlist 2", etc.

   • Add the playlist links to these pages.

Step 2: Create a Password Entry Page

1. Create a New Page:

   • Go to Online Store > Pages.

   • Create a new page called "Password Entry".

2. Add the Password Form:

   • In the content editor, add an HTML form for password entry. For example:

<form id="password-form">
  <label for="password">Enter Password:</label>
  <input type="password" id="password" name="password">
  <button type="submit">Submit</button>
</form>

Step 3: Add JavaScript for Password Handling

1. Create a New JavaScript File:

   • In the Assets folder, click Add a new asset and create a new JavaScript file (e.g., password-redirect.js).

2. Add the Following JavaScript Code:

document.addEventListener('DOMContentLoaded', function() { var form = document.getElementById('password-form'); form.addEventListener('submit', function(event) { event.preventDefault(); var password = document.getElementById('password').value; // Define your passwords and corresponding pages var passwordPages = { 'password1': '/pages/playlist-1', 'password2': '/pages/playlist-2', 'password3': '/pages/playlist-3' }; if (passwordPages[password]) { window.location.href = passwordPages[password]; } else { alert('Invalid password. Please try again.'); } }); });

Step 4: Include the JavaScript File in Your Theme

1. Include the JavaScript File:

   • In the Layout folder, open theme.liquid.

   • Add the following line before the closing </body> tag

<script src="{{ 'password-redirect.js' | asset_url }}"></script>

I hope that my solution works for you.

Best regards,

Amelia | PageFly