Password form

Last updated: Mar 11, 2019

The password page is a landing page that adds password protection to your online store. Password pages are also sometimes used to collect email addresses before a store opens. This page is displayed after setting a store-wide password within the store preferences section of the Shopify admin.

Place the following code in the Layout/password.liquid file.
Insert code for header and footer where appropriate.
Enable store password protection by adding a password in the Shopify admin by navigating to "Online Store" > "Preferences".

<!-- Content for header here -->

<main role="main" id="MainContent">
  {{ content_for_layout }}
</main>

<div id="Login">
  <h2>Login</h2>

  {%- form 'storefront_password' -%}
    {{ form.errors | default_errors }}

    <label for="password">Password</label>
    <input type="password"
      name="password"
      id="password"
      placeholder="Your password">

    <button type="submit" name="commit">
      <p>Enter</p>
    </button>
  {%- endform -%}

  <p>Are you the store owner? <a href=\"\/admin\" class=\"text-link\">Log in here<\/a></p>
</div>

<!-- Content for footer here -->

Please note: We have intentionally limited CSS and JavaScript, and removed translation strings in order to keep these examples compatible with any theme. Any CSS we have included is for accessibility or rendering purposes.