Did you know that you can install a Customer Fields form on a store's password page?
This is a very useful way to collect customer data before the store is opened, and it's much better than simply asking customers to sign up for the store's newsletter.
All Shopify stores are password protected by default, and depending on the situation, you might want to start collecting customer data before the store is open. This is possible by allowing customers to fill out a form or even fully register for an account while the store is still password protected.
This guide is designed for newer Shopify OS 2.0 themes that are compatible with app blocks. If your theme's password page does not support app blocks, you will need to edit the theme code for this page to add a form via shortcode.
Note: Any new dev stores created through the Shopify Partners dashboard have a special type of password protection page that cannot be edited or disabled. However, if you'd like to test this process, you can still do so and visit yourdomain.myshopify.com/password to see the result.
Let's get started
Create a form in Customer Fields
For this guide, we're going to create a new form in Customer Fields using the app's Forms page. Simply click the 'Add form' button to begin.
1. Add form
As shown below, we've named the form "Registration on PW Page". We've decided to allow customers to automatically create customer accounts in Shopify, but you are welcome to enable the account approval option if you prefer. We've also used the 'Modern' template, but you're welcome to pick any template you'd like!
2. Form settings
After continuing, we suggest making some edits to the form settings using the 'Settings' tab in the form builder:
Notice in the above screenshot that we've edited a couple of different settings:
'Display success step after submitted' has been turned on, instead of redirecting. This is important since the store is "closed", and customers can only see the password page.
'Display cancel button' has been disabled since it's not really necessary for this form.
3. Success step settings
The 'Modern' form template is quite perfect as-is for this particular use case, since the form already has fields that allow you to collect the customer's first name, last name, email, phone, and password. It also allows customers to sign up for email marketing in Shopify so they can easily opt-in for promotions, newsletters, or whatever else you plan on doing.
In this case, the only changes we're going to make to the form are on the success step. The edits made are meant to help set expectations, show a personalized message, and suggest that customers follow us on Instagram:
Notice that we've used a data column variable for
:first_name:, which adds a nice personal touch to the paragraph field 😎. You can learn more about data column variables using this help article.
Install the form on your password page
Just a couple more steps will have this form live on your password page to start collecting customer information.
1. Navigate to the password page in your shop's theme editor
In your Shopify Admin, navigate to 'Online Store' and click the 'Customize' button for your theme.
Using the dropdown at the top of the theme editor, navigate to Others > Password, or just search for "password" in the search box
2. Install the Customer Fields app block
On the left sidebar menu, select 'Add section' and choose 'Customer form'
In the app block's dropdown menu, select the form that you would like to use and copy the ID into the settings in the right sidebar.
3. Customize the rest of the page
You may want to take a moment to remove other elements that already exist on the page such as the email signup banner and add a rich text block to add a message to your new customers.
Make sure you save your work in the theme editor, and you can now test out the form on the storefront! Since you are logged in as an admin in Shopify, you might not see the store's password protection page, so it's a good idea to use a Private/Incognito window in your browser when viewing the storefront.