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 😉
This help article is meant to act as a step-by-step guide for installing a registration form on a store's password page using the Customer Fields app. 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 register for an account in advance -- even while the store is still password protected.
Note: This guide is meant for non-dev stores only. Any new dev stores (created through the Shopify Partners dashboard) have a special type of password protection page which cannot be edited or disabled.
Let's get started
For this guide we're going to use the Venture theme, which is a free theme offered by Shopify. Please note that each Shopify theme is unique, so there's a chance that your store's theme may use different files for the password page than the ones referenced in this guide.
If you are not comfortable editing theme code then we suggest you proceed with caution, or hire a theme developer. We also offer customization services in-house if needed 👍
Password protection settings in Shopify
Before we get too far into the app or theme editing, it's a good idea to add a simple message to encourage new customers who visit the store while it's password protected to fill out the form. Here's an example:
You can find the settings shown in the screenshot above in the Shopify admin under Online Store > Preferences > Password protection.
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. Simple 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're welcome to enable the account approval option if you prefer. We've also used the 'Modern sign-up form' 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:
- 'Mark required fields' has been enabled to help customers understand which fields are required, and which are optional.
- '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 sign-up 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 marketing in Shopify so they can easily opt-in for SMS promotions, newsletter emails, 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 variable using this help article.
4. Install the form
After saving the form, you are going to want to install the form on the store's theme using the 'Other location' option:
Make sure to click the 'Copy' button shown above after the form has been installed, since you will need this embed code for the next steps 👍
5. Add code to theme
As previously mentioned, we're using the Venture theme for this guided example. Venture, Debut, and most of the other free themes for Shopify use a Liquid Template or Section to control the password page.
To add the code you copied from Customer Fields, you will need to use the code editor in Shopify. You can find the code editor in the Shopify admin under Online Store > Themes > Actions > Edit code.
Once in the code editor, you should be able to find a
password.liquid file inside the Templates folder. If you open this file, you should see something like this:
Notice that the actual content for the password template is in a Liquid section named
password-content. If this is the case, you need to go into the Sections folder in the code editor, and in that folder you will find the file for
password-content.liquid. When opening the section file, you should notice some code for the theme's normal newsletter form, as outlined in the following screenshot:
Since we're going to be installing a Customer Fields form that includes newsletter signup (and much more), you will want to replace the code outlined above with the code that you copied from the Customer Fields app. After doing so, the file should look something like this:
Make sure to click the 'Save' button in the code editor to save your changes.
After the file has been saved, 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.
6. The end result
Here's a screencast that shows an example of what the end result will look like: