Password page
The page shoppers see while the store is locked: an optional full-bleed background image with a solid card for the eyebrow, heading, introduction, password message, email signup, and social media icons, plus an Enter using password button that opens the storefront password form in a panel (a bottom sheet on mobile).
- Merchant-addable
- No — template section
- Settings
- 14
- Block types
- —
- File
sections/password.liquid
Used by default on: Password
When to use it
Automatic while password protection is on.
Setting it up
- Edit Eyebrow, Heading, and Introduction. Use italic in the heading to set a phrase apart. A blank heading uses the translated store-closed title.
- The password message itself is set in Shopify admin under Online Store → Preferences and appears below the introduction.
- Choose a Background image (2400 x 1600px .jpg recommended) and set its focal point, then turn on Show background image (off by default, which gives a plain page with the card centered). Add an optional Status label for its chip.
- Configure Email signup: show or hide it, set the button label, and the line of text below it. With the signup off, the password form moves into the card and the header button is hidden. Show social media icons uses the links in Theme settings.
- Set Card position on desktop to Left, Center, or Right. It applies when an image is set; without one, the card is centered.
- Set Color scheme and padding. The password panel uses the global motion style and interface animation speed.
Where the content comes from
Section settings own the eyebrow, heading, introduction, image, status label, signup labels, and card position. Shopify owns the password message, shop name, storefront password form, and customer signup form. Theme settings own the logo and social media links. No metafields are required.
Notes and cautions
- This is the only page most people see before launch. It is worth more attention than it usually gets.
- Text never sits directly on the photograph, so any image keeps the copy readable.
Password page
The password page is what shoppers see while the store is locked. A card sits on the page, and on desktop an optional background image can fill the page behind it. The card holds the introduction, an email signup, social media icons, and the store owner login link. An Enter using password button in the top bar opens the storefront password form in a small panel. On mobile, the image moves into a rounded frame directly under the top bar, and the password form slides up from the bottom of the screen.
Open Online Store → Themes → Customize, then choose Password page from the template menu at the top of the editor.
Content
| Setting | What it does |
|---|---|
| Eyebrow | Short label above the heading, with a thin rule before it. Clear it to hide it. Default: Opening soon. |
| Heading | The page’s main heading. Use italic to set a phrase apart, as in the default A quieter ritual is almost ready. Leave it blank to use the translated “This shop is private” title. |
| Introduction | Optional supporting copy under the heading. |
The password message from Online Store → Preferences appears below the introduction. When both say the same thing, it appears once. Shopify owns the password message; the section owns the introduction.
Image
| Setting | What it does |
|---|---|
| Show background image | Off by default, so a new install opens on a plain page in your color scheme with the card centered. Turn it on to fill the page behind the card with Background image. While it is off, the image is not shown even when one is selected, and Card position on desktop is hidden. |
| Background image | Fills the page behind the card on desktop and sits above the text on mobile. 2400 x 1600px .jpg recommended. Set a focal point on the image to control the crop at each screen size. Without an image, the page uses the color scheme background and the card is centered. |
| Status label | Short note shown on a small chip near the bottom of the image, such as Preparing our first collection. Clear it to hide the chip. |
The card has a soft layered shadow in the color scheme’s shadow color, so it reads as raised off the page or the photograph. Text never sits directly on your photograph. The card, top bar, chip, and password panel all use solid color scheme surfaces, so any image keeps the text readable.
Email signup
| Setting | What it does |
|---|---|
| Show email signup | Shows an email field with its submit button. Signups are added to Customers with the newsletter tag and accept email marketing. When off, the password form takes its place in the card, and the Enter using password button is hidden. |
| Signup button label | The button text. Default: Notify me. Leave it blank to use Subscribe. |
| Text below signup | One short line under the field, such as Unsubscribe anytime. Clear it to hide it. |
| Show social media icons | Shows icons for the social media links set in Theme settings → Social media. Nothing appears when no links are set. |
The field and button sit together in one control. On phones narrower than 420px, the button moves below the field.
Layout
| Setting | What it does |
|---|---|
| Card position on desktop | Left (default), Center, or Right. Applies when a background image is set. With Right, the status chip moves to the left. Without an image, the card is centered. On mobile, the image and text stack. |
| Color scheme | Colors for the page, the card, and the password panel. The default is the warm cream scheme (stored as scheme-6). |
| Top padding / Bottom padding | Space above and below the card. Mobile uses about 72 percent of these values. With an image on mobile, the image sits directly under the top bar and top padding is not used. |
Turn the signup off for stores where everyone who visits has the password, such as private or wholesale stores. The card then leads with the password field and its Enter button, followed by a short line explaining what the password is for. Update the Introduction too, since the default text asks visitors for their email.
Password panel
This section applies while Show email signup is on.
Enter using password opens a panel with the storefront password form and a store owner login link. On desktop, it opens below the top bar. On mobile, the button reads Password (screen readers still announce the full label), and the panel is a bottom sheet over a dimmed page with a drag handle. Swipe it down, or tap the dimmed page, to close it. While the sheet is open, the page behind it does not scroll, and Tab stays inside the sheet.
- The panel opens and closes without JavaScript. Escape, the close button, and clicking outside the panel close it, and focus returns to the button.
- On open, focus moves to the password field. After a wrong password, the panel reopens on its own and focus moves to the error message.
- The panel uses the theme’s Global motion style and Interface animation speed. With Rise into view, the mobile sheet slides up from the bottom of the screen. No motion and reduced-motion preferences open it instantly.
- In browsers without popover support, the button is hidden and the password form shows below the page content instead.
The logo comes from Theme settings → Logo; without one, the shop name appears in spaced capitals. Fonts, corner style, the custom control corner radius, and button hover effects follow theme settings. The footer of the card always shows the store owner login link and Shopify’s required Powered by Shopify link.
Section settings
Every setting on the section itself, in the order it appears in the theme editor. Group headings match the editor's own grouping.
Content
Use italic to set a phrase apart. Leave blank to use the default store-closed title.
The password message from Online Store > Preferences also appears below it.
Image
Fills the page behind the card. When off, the page uses your color scheme with the card centered.
Fills the page behind the card on desktop and sits above the text on mobile. 2400 x 1600px .jpg recommended. Set a focal point to control the crop.
Short note shown on the image. Leave blank to hide.
Email signup
When off, the password form takes its place in the card and the header button is hidden.
Uses the social media links in theme settings.
Layout
Applies when a background image is set. On mobile, the image and text stack.