[{"value":"Location","id":"location","hLevel":2,"level":1},{"value":"Content","id":"content","hLevel":2,"level":1,"children":[{"value":"Customer Registration Form","id":"customer-registration-form","hLevel":3,"level":2}]},{"value":"Usage","id":"usage","hLevel":2,"level":1,"children":[{"value":"Provide “Register with Phone Number” Option","id":"provide-phone-number-registration-option","hLevel":3,"level":2},{"value":"Redirect After Registration","id":"redirect-after-registration","hLevel":3,"level":2}]}]

customers/register

The customers/register template shows the customer sign-up page, which is used for creating customer accounts.

Location

The customers/register template is found in the theme's template folder templates > customers:

└── theme
    ├── layout
    ├── templates
    │   └── customers
    │     ├── register.json
    │     ...
    ...

Content

You can include the customer registration form in the customers/register template or within a section in the template.
(Optional) You can add the “Register with Phone Number” option.

Customer Registration Form

The customer sign-up form can use the Handlebars form helper with the 'create_customer' parameter. Within the form helper block, you need to include the following fields:

Field	Type	Form Name
Email	email	customer[email]
Verification Code	text	customer[verifycode]
Phone Number	text	customer[phone]
First Name	text	customer[first_name]
Birthday	text	customer[birthday]
Gender	text	customer[gender]
Last Name	text	customer[last_name]
Area Code	text	customer[code]
Password	password	customer[password]

Note

You should support both phone number and email registration. However, only when registering with a phone number, you need to provide the area code field, which is used together with the phone number.

The following fields are required under specific conditions:

The verification code field is required when the merchant enables the "Customer must verify to complete registration" option in the SHOPLINE Admin customer account settings for email or phone number verification.
The first name, last name, gender, or birthday fields are required when the merchant enables the "Optional information fields" option in the SHOPLINE Admin customer account settings.

Example code:

{{#form "create_customer"}}
    <div class="email">
      <label for="email">Email</label>
      <input type="email" name="customer[email]">
    </div>
    <div class="password">
      <label for="password">Password</label>
      <input type="password" name="customer[password]">
    </div>
    <div class="submit">
      <input type="submit" value="Register">
    </div>
{{/form}}

Usage

When using the customers/register template, you should know the following:

Provide “Register with Phone Number” Option
Redirect After Registration

Note

If you use JSON templates, any HTML or Handlebars code needs to be included within the sections referenced by the template.

Provide “Register with Phone Number” Option

For phone number registration, you need to provide an area code selection. The area code data is delivered through the all_country_dialing_code object. You also need to check the register_config.check_tag attribute in the form context to determine if verification code validation is required. Finally, use loadFeatured to include the customer-account-api SDK to handle sending the verification code logic to the user account:

{{#form "customer_login"}}
<div class="field">
  <input
    class="field__input"
    type="tel"
    name="customer[phone]"
    required
    placeholder="Phone"
  />
  <label for="RegisterPhone" class="field__label body3">
    Phone
  </label>
</div>
<div class="field__suffix">
  <select name="customer[code]" id="country-select">
    {{#for all_country_dialing_code}}
       <option value="{{dialing_code}}" data-iso-code="{{iso_code}}">{{name}}</option>
    {{/for}}
  </select>
</div>
  
  {{#if form.register_config.check_tag}}
    <div class="field">
      <div class="field__container">
        <input
          type="text"
          id="RegisterVerifyCode"
          class="field__input"
          name="customer[verifycode]"
          required
          placeholder="Verify Code"
        />
        <label for="RegisterVerifyCode" class="field__label">
          Verify Code
        </label>
      </div>
      <div class="field__suffix">
        <button class="verifycode-button">
          Send
        </button>
      </div>
    </div>
  {{/if}}
{{/form}}

Note

For an example implementation, refer to the assets/section-main-register.js and sections/main-register.html files in Seed.

Redirect After Registration

By default, after a user successfully registers, they are redirected to the account page. You can change this setting using the return_to parameter of the Handlebars form helper.

The following example shows how to direct users to the URL of the collection list page:

{{#form "create_customer" return_to=routes.collections_url}}
   <!-- form detail -->
{{/form}}

Was this article helpful to you?

SHOPLINE

Legal

customers/register​

Location​

Content​

Customer Registration Form​

Usage​

Provide “Register with Phone Number” Option​

Redirect After Registration​

customers/register

Location

Content

Customer Registration Form

Usage

Provide “Register with Phone Number” Option

Redirect After Registration