Foxify App
Foxify App
FoxstudioAdd and edit elements

Password form

4 min read
image

Add a password-protected entry field to your Shopify password page — so visitors can unlock access before your store launches.

When to use this element

Use the Password form element when you're building a custom password page in Foxify and need to let visitors enter a password to access your store.

Best fits for:

  • A coming soon page before your store officially launches
  • A members-only or VIP early-access page
  • A wholesale or B2B storefront with restricted access
  • Any page where you want to control who can enter using Shopify's password feature

How is this different from similar elements?

Use this
Password form
Use instead if...
Subscribe form
Note: The Password form element only works on Password page type.

Quick setup

Before you start: Make sure your Shopify store's password protection is enabled. Learn how to add your online store password

Add the Password form element

Click Add elements (or press E) → find Password form under Advanced elements → drag it onto your canvas.

Configure the form

In the Inspector panel → General tab, set the password placeholder text, button label, button icon, and button style.

Style the form

Switch to the Design tab to style the element container, form input, submit button, and submit button hover state separately.

Preview and publish

Switch to mobile preview to check how the form renders. Click Save & Publish when ready.

Expected result: Your password page now shows a styled input field and submit button. Visitors enter the password to unlock access to your store. The form connects directly to Shopify's password protection — no additional setup needed.

Settings — General

SettingWhat it doesWhen to use
Password placeholderThe hint text shown inside the password input field before the visitor typesUse something clear like "Enter password" — keep it short
Button labelThe text on the submit buttonCommon options: "Enter", "Unlock", "Access store". Keep it 1-2 words.
Button iconOptional icon displayed on the submit buttonUse when you want an icon-only or icon+text button.
Leave empty for text only.
Button styleApply a predefined button style from Global stylesClick Select style to choose from your saved button presets — keeps the button consistent with the rest of your store.

Settings — Design

The Password form has 4 design layers you can style independently:

The outer wrapper — controls overall width, padding, background, and borders of the entire form block.

Available settings:

  • Form layout: You can set the input field and button to display on the same line or stack them across two lines.
  • Input & Button height: Allow adjustment of the height for the input field & button.

The password input field — controls background, border, text color, font, and padding of the input area.

Available settings:

  • Color: Set the color for the text form.
  • Font: Choose from hundreds of fonts. You can also upload your own fonts to Foxify.
  • Weight: Set the thickness (font weight) of the text.
  • Size: Define the font size of the text.
  • Spacing: Change the spacing between the lines and characters in the text box.
  • Align: Allows for aligning the position of the text inside the input field.
  • Text case: Click the icons to set the text's capitalization: As typed — , Upper case AG, Title case Ag, or Lower case ag.

The normal state of the submit button — background color, text color, font, size, and border.

Available settings:

  • Fill: Set the text color and background color of the button.
  • Font: Choose from hundreds of fonts. You can also upload your own fonts to Foxify.
  • Weight: Set the thickness (font weight) of the text.
  • Size: Define the font size of the text.
  • Text case: Click the icons to set the text's capitalization: As typed — , Upper case AG, Title case Ag, or Lower case ag.
  • Spacing: Change the spacing between the lines and characters in the text box.

How the button looks when a visitor hovers over it. Set a different background or text color to signal interactivity.

Available settings:

Fill: Set the text color and background color of the button hover.

FAQs

Can I use the Password form element on a regular Foxify page?

No — it only works on Password page type.

Where do I set the actual store password?

In Shopify Admin → Online Store → Preferences → Password protection. The Password form element in Foxify handles the visual form only — the password itself is managed in Shopify.

Can I have multiple Password form elements on the same page?

You can add more than one, but only one is needed — Shopify's password page only requires a single form to authenticate. Adding multiple forms doesn't add functionality.

Last updated

Product details

Previous Page

Layout & styling

Next Page

ON THIS PAGE

When to use this elementHow is this different from similar elements?Quick setupSettings — GeneralSettings — DesignFAQsCan I use the Password form element on a regular Foxify page?Where do I set the actual store password?Can I have multiple Password form elements on the same page?

Was this helpful?