How can I create an interactive password page on Shopify?

[Mazen98]

hello, I am trying to make my Shopify password page look and interact like the images above. I’d like to have a password form that people can enter a password and allows them into the store directly. If they don’t have a password they can press the join waitlist and it opens an email form where they can register. How can I achieve that?

thank you

[irene-vintage]

Hello @Mazen98 ,

You can try to follow these steps:

• Go to Online Store -> Themes -> Actions -> Edit code
• Go to Templates -> Add a new template -> Page -> Name your new template (e.g., "password-page") and click on "Create template."
• Edit the new template file: Once the template file is created, you'll see the code editor open with a new file. Add the following code to the file:

{% layout none %}
{% comment %} 
  Template Name: Password Page
  This template is used for the password page.
{% endcomment %}

{% if page.password_required %}
  <div id="password-page">
    <h2>Enter the Password</h2>
    <form action="{{ routes.password }}" method="post" id="password-form">
      <input type="password" name="password" id="password" placeholder="Enter the password" required>
      <input type="submit" value="Submit">
    </form>
    <p class="join-waitlist-link">Don't have a password? <a href="#" id="join-waitlist-link">Join the Waitlist</a></p>
    <div id="waitlist-form" style="display: none;">
      <h2>Join the Waitlist</h2>
      <form action="/contact" method="post">
        <input type="email" name="email" id="email" placeholder="Enter your email" required>
        <input type="submit" value="Submit">
      </form>
    </div>
  </div>

  <script>
    document.getElementById('join-waitlist-link').addEventListener('click', function(event) {
      event.preventDefault();
      document.getElementById('password-form').style.display = 'none';
      document.getElementById('waitlist-form').style.display = 'block';
    });
  </script>
{% else %}
  <p>The password page is disabled. Please check your settings.</p>
{% endif %}

• Save and preview

Hope this can help.

Ali Reviews team.

[IMANLTD]

i want the same for my website. this code doesnt work. can you help me