The `password` template renders the password page, which is a landing page that's shown when [password protection is applied to a store](https://help.shopify.com/manual/online-store/themes/password-page). This page includes a message that is editable by merchants, and the password form for customers to gain access to the store.

> Tip:
> Refer to the [password template](https://github.com/Shopify/dawn/blob/main/templates/password.json) and its sections in Dawn for an example implementation.

<figure class="figure">
  <img src="/assets/themes/templates/password.png" style="width: 100%; max-width: 550px;" alt="An example of the password template in Dawn">
</figure>

## Location

The `password` template is located in the `templates`  directory of the theme:

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

## Content

You can include the following in your password template or a section inside of the template:

- [A password message](#the-password-message)
- [The password form](#the-password-form)
- [The email sign-up form](#the-email-sign-up-form)

> Tip:
> If you're using a JSON template, then any HTML or Liquid code needs to be included in a [section](/docs/storefronts/themes/architecture/sections) that's referenced by the template.


### The password message

When password protection is enabled on a store, there's also the option to include a message. This message can be shown using the `password_message` attribute of the Liquid [`shop` object](/docs/api/liquid/objects/shop#shop-password_message):

<p>
<div class="react-code-block" data-preset="file">
<div class="react-code-block-preload ThemeMode-dim">
<div class="react-code-block-preload-bar "></div>
<div class="react-code-block-preload-placeholder-container">
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>
<div class="react-code-block-preload-code-container">
<div class="react-code-block-preload-codeline-number"></div>
<div class="react-code-block-preload-codeline"></div>
</div>

</div>
</div>

<script data-option="filename" data-value="Example"></script>

<script type="text/plain" data-language="liquid">
RAW_MD_CONTENT
{% unless shop.password_message == blank %}
  {{ shop.password_message }}
{% endunless %}

END_RAW_MD_CONTENT</script>

</div>
</p>


### The password form

The password form can be added with the Liquid [`form` tag](/docs/api/liquid/tags/form#form-storefront_password) and accompanying `'storefront_password'` parameter. Within the form tag block, you need to include an `<input>` with the following attributes:

- `type="password"`
- `name="password"`

For example:

```liquid

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

  <div class="password">
    <label for="password">Password</label>
    <input type="password" name="password">
  </div>

  <div class="submit">
    <input type="submit" value="Sign in">
  </div>
{% endform %}

```

### The email sign-up form

You can include an email sign-up form, to capture customer emails, with the Liquid [`form` tag](/docs/api/liquid/tags/form#form-customer) and accompanying `'customer'` parameter. Within the form tag block, you need to include the following:

<table>
  <thead>
    <tr>
      <th>Input</th>
      <th><code>type</code></th>
      <th><code>name</code></th>
      <th><code>value</code></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tags</td>
      <td><code>hidden</td>
      <td><code>contact[tags]</code></td>
      <td><code>prospect, password page</code></td>
    </tr>
    <tr>
      <td>Email</td>
      <td><code>email</td>
      <td><code>contact[email]</code></td>
      <td>-</td>
    </tr>
  </tbody>
</table>

For example:

```liquid

{% form 'customer' %}
  {{ form.errors | default_errors }}

  <div class="tags">
    <input type="hidden" name="contact[tags]">
  </div>

  <div class="email">
    <label for="email">Email</label>
    <input type="email" name="contact[email]">
  </div>

  <div class="submit">
    <input type="submit" value="Sign in">
  </div>
{% endform %}

```

> Tip:
> Shopify assists merchants in marketing to customers created with the `prospect` and `password page` tags, but you can use your own custom tags as well.

## Usage

If you're working on a [development store](/docs/storefronts/themes/tools/development-stores), then you can't show a custom password page on the store. A development store-specific password page is always displayed.

Although the customizable password page isn't used to control access to your development store, you can still view it after you log in, or edit it from the Shopify admin.

To view the customizable password page, logged-in visitors can navigate to `https://your-store-name.myshopify.com/password`, where `your-store-name` is the name of the development store.