> For the complete documentation index, see [llms.txt](https://docs.foxecom.com/foxify-app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/password-form.md).

# Password form

<figure><img src="/files/AxRXHTJcdKlZvIeO6INd" alt=""><figcaption></figcaption></figure>

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?

<table data-card-size="large" data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td>Use this</td><td><strong>Password form</strong></td><td>Lets visitors unlock access to your store by entering a password. Works with Shopify's built-in password protection. Use when your store isn't publicly accessible yet.</td><td></td></tr><tr><td>Use instead if...</td><td><strong>Subscribe form</strong></td><td>You want customers to sign up for updates while your store is still being built — collecting emails before you launch, without requiring a password to proceed.</td><td><a href="/pages/3Whhsb02XuYqrBfq6OOV">/pages/3Whhsb02XuYqrBfq6OOV</a></td></tr></tbody></table>

{% hint style="info" %}
Note: The Password form element only works on [Password page type](/foxify-app/page-management/page-creation/create-a-password-page.md).
{% endhint %}

## Quick setup <a href="#how-to-add-a-button" id="how-to-add-a-button"></a>

{% hint style="info" %}
**Before you start:** Make sure your Shopify store's password protection is enabled. [Learn how to add your online store password](https://help.shopify.com/manual/online-store/themes/password-page)
{% endhint %}

{% stepper %}
{% step %}
**Add the Password form element**

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

{% step %}
**Configure the form**

In the Inspector panel → **General** tab, set the password placeholder text, button label, button icon, and button style.
{% endstep %}

{% step %}
**Style the form**

Switch to the **Design** tab to style the element container, form input, submit button, and submit button hover state separately.
{% endstep %}

{% step %}
**Preview and publish**

Switch to mobile preview to check how the form renders. Click **Save & Publish** when ready.
{% endstep %}
{% endstepper %}

**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.<br>

## Settings — General

<table><thead><tr><th width="205">Setting</th><th>What it does</th><th>When to use</th></tr></thead><tbody><tr><td>Password placeholder</td><td>The hint text shown inside the password input field before the visitor types</td><td>Use something clear like "Enter password" — keep it short</td></tr><tr><td>Button label</td><td>The text on the submit button</td><td>Common options: "Enter", "Unlock", "Access store". Keep it 1-2 words.</td></tr><tr><td>Button icon</td><td>Optional icon displayed on the submit button</td><td><p>Use when you want an icon-only or icon+text button. </p><p>Leave empty for text only.</p></td></tr><tr><td>Button style</td><td>Apply a predefined button style from <a href="/pages/yYRPgVEGWZAOwyYKbUHB">Global styles</a></td><td>Click <strong>Select style</strong> to choose from your saved button presets — keeps the button consistent with the rest of your store.</td></tr></tbody></table>

## Settings — Design

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

{% tabs %}
{% tab title="Element Container" %}
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.
  {% endtab %}

{% tab title="Form input" %}
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](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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** ![](https://docs.foxecom.com/foxify-app/~gitbook/image?url=https%3A%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2F12345678-1234-1234-1234-1234567890ab%2F651c25b0-2d60-43c8-addf-1df2fd575568%2F2024%2F08%2F14%2Fcf835ac2-622c-4066-a95e-39e9ff1a7f38%2Fc4f1d248-c718-427e-9db5-77369c22fb67.png\&width=300\&dpr=4\&quality=100\&sign=ac4af2c5\&sv=2), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
  {% endtab %}

{% tab title="Submit button" %}
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](https://docs.foxecom.com/foxify-app/faqs/edit-your-pages/add-custom-font).
* **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** ![](https://docs.foxecom.com/foxify-app/~gitbook/image?url=https%3A%2F%2Fd2x3xhvgiqkx42.cloudfront.net%2F12345678-1234-1234-1234-1234567890ab%2F651c25b0-2d60-43c8-addf-1df2fd575568%2F2024%2F08%2F14%2Fcf835ac2-622c-4066-a95e-39e9ff1a7f38%2Fc4f1d248-c718-427e-9db5-77369c22fb67.png\&width=300\&dpr=4\&quality=100\&sign=ac4af2c5\&sv=2), **Upper case** **AG**, **Title case** **Ag**, or **Lower case** **ag**.
* **Spacing:** Change the spacing between the lines and characters in the text box.
  {% endtab %}

{% tab title="Submit button hover" %}
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.
{% endtab %}
{% endtabs %}

## FAQs

#### Can I use the Password form element on a regular Foxify page?&#xD;

No — it only works on Password page type.&#x20;

#### Where do I set the actual store password?&#xD;

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.

#### &#xD;Can I have multiple Password form elements on the same page?&#xD;

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.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.foxecom.com/foxify-app/foxstudio/add-and-edit-elements/password-form.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.