Designing user pages

User pages are used for user-related operations and are accessible to the guest user (users that are not logged in) on the storefront. The user pages include:

• User Registration (/user/register)
• User Login (/user/login)
• Forgot Password (/user/forgot)
• User Verification (/user/verification)

In StoreHippo themes, there is single user page which contains different sections (register, login, forgot, verification) that are used for above pages. The different pages are available on /user/:section URLs e.g.

• https://www.mystore.com/user/register
• https://www.mystore.com/user/login

1. Editing the User page in your theme

<steps to find and edit the user page in design theme>

2. Add a customer registration form to your store

You can add a customer registration form to your store to let customers set up their own accounts. Following is a typical customer registration form:

Enabling user register form

The register form is by default enabled in all StoreHippo stores. Register form is one of the built-in forms and is used to control the user registration on the storefront. You can find and edit the register form in Site > Forms section in StoreHippo Admin Panel. 

Using the register form on user page

You can use ms.form.user_registration widget to show the register form in the store. The widget uses the register form and adds a user using the data filled by the user. Use the following code to add the register form:                                                                                

  <form ms-widget="ms.form" ms-data-formname="register" ng-submit="submit()">
        <div ms-widget="form_layout" ms-data-buttonname="Register"></div>
    </form>

Every StoreHippo theme has a default form_layout widget that contains default implementation of forms. You can customize the form layout as per your brand requirement. 

Using Social Logins

3. Add a customer Login form to your store

The customer login form is used by visitors to log in to their customer account page.

• Enabling Customer Login form
• Linking to the Customer Login form
• Redesigning Customer Login form

Enabling Customer Login form

The Login form is by default enabled in all StoreHippo stores. Login form is one of the built-in forms and is used to control the user login on the storefront. You can find and edit the login form in Site > Forms section in StoreHippo Admin Panel. 
Click here for details of Login Form in StoreHippo Admin Panel

Linking to the Customer Login form

Login Form is by default available on " /user/loginl  "  URL. You can include the link in any of your widget templates.
Example:

• http://myshop.storehippo.com/user/login
• http://myshop.com/user/login

You can place the code to include the form in any of your templates. For this example, follow the steps below:

1. Edit the template of widget or page where you want to include the Login form.
2. Include the following code in the widget:                                                                                                                                 

<div ms-widget="ms.th2.login_controller" ms-data-formname="login" ms-data-buttonname="login">
    <form ng-submit="submit()">
        <div ms-widget="form_layout"></div>
    </form>
</div>​

In this code:

• ms-data-formname is used for providing the Name of the form created in StoreHippo admin panel for the Customer's Login.
• ms-data-buttonname is used for display the text on submit button of the login form.
• form_layout is the widget used for designing and layout of form fields. You can redesign form fields from this widget.

Redesigning Customer Login form

In the form's, layout and structure of form fields are managed in form_layout widget. In this widget, you can edit the template or you can change the look of form by CSS.