password​

The password template shows the password page, which is displayed when the store is password protected. This page includes a message that the merchant can edit for visitors and a password form for customers to access the store.

Directory​

The password template is in the theme's templates folder:

└── theme
    ├── layout
    ├── templates
    |   ...
    |   ├── password.json
    |   ...
    ...

Content​

The password template includes the following:

• Password message
• Password form
• Email sign-up form

Password message​

When the store is password protected, you can also edit the visitor message. You can use the Handlebars shop object password_message property to display this message:

  {{#if shop.password_message}}
    <div class="password-modal__content-desc">
      {{shop.password_message}}
    </div>
  {{/if}}

Password form​

You can use the Handlebars form tag with the 'storefront_password' parameter to add a password form. Inside the form tag block, you need to include an <input> and a <button> with the following attributes:

• input - type="password"
• input - name="password"
• button - name="commit"

For example:

{{#form "storefront_password" class="password-form" return_to=routes.root_url}}
<div class="password-field field">
  <input type="password" name="password"/>
  <label class="field__label" for="Password">Password</label>
</div>
<button name="commit" >Sign in</button>
{{/form}}

Email sign-up form​

You can add an email sign-up form to capture customer emails using the Handlebars form tag with the 'customer' parameter. Inside the form tag block, you need to include:

For example:

{{#form "customer" class="newsletter-form"}}
  <div class="field__container">
    <input type="email" name="contact[email]" id="NewsletterForm" />
    <label for="NewsletterForm" class="field__label">Email </label>
  </div>
  <div class="field__suffix">
    <button type="submit" class="button button--link">
      {{snippet "icon-mail"}}
    </button>
  </div>
{{/form}}

Usage​

If you are developing a store and have enabled "password protection," visitors cannot view the pages they want. They will always be redirected to the password page.

Even though the custom password page is not used to control access to the development store, you can still view it after logging in or edit it from the SHOPLINE admin.

To view the custom password page, a logged-in visitor can navigate to https://your-store-name.myshopline.com/Password, where your-store-name is the name of the development store.