Registration Page Builder

Learn how to access your CustomerHub settings within Shopify to enable the registration background feature. This guide will help you quickly configure your customer portal sign-up page for a more branded experience.

Ezra Miller
16 steps
3 minutes

Run

Shopify

Registration Page Overview

The registration page feature, is a custom built registration form, that replaces your current registration form with a version that you can add additional fields to. Need to get birthdates from customers during registration? Or Favorite hobbies, product preferences, gender? All possible with our custom build registration form. Does the registration form work on both Shopify legacy and Shopify new customer accounts? Yes! Absolutely, the registration form works on both Shopify legacy and Shopify new customer accounts.

Want to toggle on the 'Registration Page'. Simply head to the 'Registration Page Builder' from the navigation bar on the left side of the editor

Enabling a background

Once on the 'Registration Page Builder' the first section you'll see, will be to: - Enable registration background - A toggle to add an optional background to the registration page. By default, once toggled on, we have 8 generic backgound images to choose from. You can use your own custom URL, to load your image from. Or, you can also set a solid color, from the 'Form area background' color picker.

Enable and Configure Registration Form

Below the background section is the section to toggle the: **Enable registration form** - Which enables the registration form on your store. To access this, customers simply need to click on the 'Account Icon' on your store. Once clicked, they'll automatically be taken to the registration form. By default the registration page builder, has 4 fields already setup and enabled on the registration form: - **First Name** - An editable field that contains the customers first name - **Last Name** - An editable field that contains the customers last name - **Email** - Which is a required field. And contains the email address the customer uses for logging into the store - **Accept Email Marketing** - An opt in/out toggle for email marketing All fields, outside of the 'Email' field can be removed from the registration form, by simply clicking on the edit, pencil icon and selecting 'Remove'. You can also set any field to a 'Required' field as well, that cannot be left blank during the registration process and must be filled in. To do this, simply click the edit, pencil icon of the field you'd like to make 'Required' and tick the 'Required' box.

Insert Custom fields/ Metafields

Want to add existing metafields to the registration form. It's easy with the built in '+ Custom Metafields' button, positioned below the existing fields. Simply click on the '+ Custom Metafields' button to add an existing field to the registration form.

A window will pop-up with the existing fields you're able to add to the registration form. By Default, we already have the 'Phone' and 'Accept SMS Marketing' fields ready for you to add. You can simply tick them and select 'Insert Meta Fields' down the bottom right of the pop-up window.

You'll then see the field/s you've selected to insert, added to below the existing fields and added to the registration form inside of the live preview.

Add metafields from different namespaces/apps

A lot of apps use Shopify Customer Metafields to store information like loyalty points, customer info, form fields, etc. These are usually stored with a namespace that the app chooses. To add these to the profile builder, follow the steps below.

Using a metafield that's not using the default Shopify namespace '**custom**' and want to display those fields on the customer registration form. You'll need to navigate to the **profile builder**, then simply scroll down to the '**Active Namespaces**' section and click the '**Manage**' button. Here, you'll see the enabled namespaces. By default the namespace 'custom' will be ticked as it's the default Shopify namespace that's used when creating metafields and recommended when creating new fields. If however you have metafields using another namespace, simply tick that namespace and click the save button up the top right to save the namespace into the profile builder. Once done, simply click the 'Reload Fields' button in the section above 'Active Namespaces', called 'Manage Customer Data'. This will sync the fields under the selected namespace/s into the C:Hub profile builder, and allow you to add them to the Profile Page and the Customer Card.

Create Custom Metafields

Want to build and add fields to the registration form? Simply select the '+ Custom Metafield' button.

Click "Create new"

Click here.

Type "Birthday"

Click this dropdown.

And select 'Create New' up the top left of the pop-up. In this section you'll be given a set of fields and drop downs to work with. - **Name** - This is where you name your field, which is what will also appear on the customers account - **Type** - This is a selector for the data types you can select from - **Namespace** - Set to custom by default and recommended to leave as custom - **Key** - Set automatically based on the text added to the name field (can be edited, but not recommended) - **Description** - A simple description field you can fill in with a brief description of the field you're building. Not required. - **Use as dropdown list** - An optional toggled to turn 'Single Line Text' fields into drop down menus. Only available on 'Single Line Text' fields - **Validation rules** - Allows you to add a minimum and/or maximum character limit to a field - **Use in app** - Allows you to immediately select to add the newly built field into the profile page, customer card, registration form. You can select none, or one or many. For this example, we'll build a Birthday field, so we'll fill in the fields as below: - Name - Birthday - Type - Date We don't need to make any other changes to the other fields.

You'll see that because we've selected the 'Date' type of field, we have new validation rules that allow us to set an earliest date and latest date. For this example, we'll skip these. Once you're happy with the field you've created, simply click the 'Create custom data' down the bottom right.

You'll now see the new field you've created is in the registration page builder below the rest of the fields, and it's also been added to the registration form