The Customer Registration template is the most complex template ShopSite has. It contains definitions for 21 different screens and four e-mail messages. Fortunately, providing a consistent look to the Customer Registration interface would allow you to design a single page framework with only the content, which in most cases is minimal, changing.
The 21 screens in Customer registration can be grouped into four basic categories; account management, password management, order history, and error messages. The four e-mail messages are related to recovering forgotten passwords or changing the contact e-mail address.
All the Customer Registration screens must have the following:
Form Validation JavaScript
The Form Validation JavaScript is generated by ShopSite and checks form input for valid data. It should be included in the head section of each screen.
Form Tags
ShopSite generates the opening HTML form tag, as well as several hidden input fields for each screen. This must be included before any other form elements in the body section of the HTML page for all the screens. You will also need to include a closing form tag at the end of the screen.
ShopSite Messages
ShopSite will generate an error message if it encounters a problem, such as invalid form data. You should plan to include error information, if it exists, in a highly visible place on the screen, such as above any form fields.
The New Registration screen contains a form that allows the customer to create a new account. The following elements are used on the screen:
Registration Form Elelements
There are several form elements that must be included on a New Registration screen, although you do have some control over what order they are displayed. The Customer Name includes several fields for the name, depending on what fields the merchant wants displayed. The second segment includes fields for the customer to enter an e-mail address, which is used as the account ID, and a password, as well as a password verification field. There is also a section containing the challenge question fields, which includes question selection and the answer. Depending on the merchant settings, there may also be an option to select whether or not to save payment information. Finally, there is a radio button to allow the customer to choose whether to recieve e-mail messages in HTML or plain text format.
Buttons
There are two buttons available for the New Registration screen. The Cancel button returns the customer to the previous screen without submitting the form. The Submit button will submit the form to create a new customer registration account. If the form submits correctly, the customer will then be taken to the Customer Information screen.
The Sign In Screen contains a form for the customer to enter their account ID and password. The following elements are used on the screen:
Sign In Instructions
The Sign In Instructions are set by the merchant in the Back Office, and the location they are displayed in may be influenced on what instructions the merchant writes. The default instructions remind the customer to use the same e-mail address they used when they created the registered customer account.
Sign In Form Elements
The Sign In Form includes an account ID (e-mail address) field and a password field, as well as links to recover forgotten passwords or to register a new account.
Buttons
The Sign In screen has a button to cancel and return to the previous screen, and a button to sign in.
The Sign Out screen is used to confirm that the customer meant to sign out. The following elements are used on the screen:
Confirmation Text
The Sign Out Confirmation Text prompts the customer to click on one of the buttons to confirm the selection to sign out.
Buttons
The Sign Out confirmation screen has a Yes button to confirm the customer wants to sign out, and a No button to cancel signing out.
The Customer Information screen is used to navigate the various features of Customer Registration, with links to the preferences, password management, and order history screens. The following elements are used on the screen:
Reward Program Info
If the merchant has customer rewards linked to customer registration, the customer's progress towards a reward is displayed on the Customer Information screen. Most merchants will want reward program information to be displayed prominently on the Customer Information screen.
Buttons
There are several buttons used on the Customer Information screen. The Back To Cart button takes the customer from the customer registration screens and to the shopping cart, and for this reason, it is usually a good idea to locate it separately from the other buttons. There are five buttons that allow a customer to navigate the Customer Registration screens. Two of these buttons are for account management; the Change password button and the preferences button. The other three buttons allow the customer to view, edit, or delete saved shipping, payment, or order information.
The Account Preferences screen is similar to the New Registration screen, but is instead used for existing account holders to change their settings. The following elements are used on the screen:
Preferences Form Elements
The Preferences form is similar to the customer registration form. It allows the customer to change their contact e-mail address, name, e-mail format, or whether or not to save payment information. Each of these options can be laid out in whatever order you desire.
Buttons
The Preferences screen has buttons to save the changes, or cancel the changes. Both buttons will return the customer to the Customer Information screen.
The Change Password screen contains a form from which the customer can change their account password, as well as a link to the screen to change the challenge question. The following elements are used on the screen:
Change Password Form Elements
The Change Password Form creates three fields, one for the old password, and two to enter and verify the new password.
Change Challenge Information
The Change Challenge Information is a text block defined by the merchant, providing information about using the link to change the challenge question.
Change Challenge Question Link
The Change Challenge Question Link takes the customer to a new screen to change the challenge question/answer pair.
Buttons
The Change Password Form has buttons to submit the change, or to cancel the change.
The Change Challenge screen has a form that allows the customer to change the challenge question and answer, which are used to recover lost passwords. The following elements are used on the screen:
Change Challenge Instructions
The instructions for the Change Challenge screen are intended to provide basic instructions for setting a Challenge Question/Answer. The text can be modified by the merchant through the Back Office.
Change Challenge Form Elements
The Change Challenge form includes a field to select a challenge question, another field to enter an answer to the question, and a third field for the customer password. These are created by ShopSite as a single block of HTML.
Buttons
The Change Challenge screen has a submit button and a cancel button.
The Forgot Password screen allows the customer to enter their E-mail address and request an e-mail that will contain a link to let them recover a forgotten password. The following elements are used on the screen:
Forgot Password Instructions
The Forgot Password Instructions provide basic guidelines for using the forgot password form. The text can be changed by the merchant in the Back Office.
Forgot Password Form Elements
The Forgot Password Form is a single text box, where the customer can enter their e-mail address.
Buttons
There is a cancel button and a submit button on the Forgot Password screen.
This screen appears after the Forgot Password screen, and simply notifies the customer that an e-mail message containing a link to recover the forgotten password has been sent to their address. The following elements are used on the screen:
E-Mail Sent Text
The E-Mail Sent Text informs the customer that an e-mail message has been sent to the address entered on the previous screen, and that the message will contain a link that can be used to recover a forgotten password. The text can be modified by the merchant in the Back Office.
Buttons
There is only one button on this screen, which returns the customer to the shopping cart. The customer will probably use the link in the e-mail message to leave this screen.
This screen is accessible from the link in the Forgot Password E-Mail, and allows the customer to enter the answer to their selected challenge question, in order to prove they are who they claim to be. The following elements are used on the screen:
Answer Challenge Question Instructions
The Instructions for the Answer Challenge Question screen provide guidelines for using the form. The instructions can be modified by the merchant through the back office.
Answer Challenge Question Form Elements
The Answer Challenge Question form displays the selected challenge question and includes a text entry box for the answer.
Buttons
The Answer Challenge screen should include a cancel button and a submit button.
After a customer has verified who they are by answering the challenge question, they are taken to this screen, which lets them reset their password. The following elements are used on the screen:
Change Password Instructions
The Change Password Instructions provide guidance for setting a new password. The text can be modified by the merchant through the Back Office.
Change Password Form Elements
The Change Password form includes two password entry boxes for the customer to enter and confirm the new password.
Buttons
The Challenge Change Password screen should include a submit button and a cancel button.
If a customer has chosen to save payment information from orders, the saved information will be viewable using this screen. Any saved payment methods are listed on this screen, and can be edited or deleted. The following elements are used on the screen:
Payment Information Instructions
The Payment Information Instructions outline the use of the payment information form. The text can be modified by the merchant through the Back Office.
Payment Information Form Elements
The Payment Information Form includes a select box for the merchant to select various saved payment types to view, edit, or delete.
Add Payment Information Message
The Add Payment Information Message instructs the customer that new payment methods can be added through the shopping cart. The text can be modified by the merchant through the Back Office.
Buttons
There are three buttons on the Payment Information screen. The Edit button allows the customer to view and edit a saved payment method. The Delete button allows the customer to delete saved payment methods. The Done button returns the customer to the main Customer Information screen.
The Edit Payment Information screen allows a customer to view or edit details of their saved payment method. This is useful if, for example, the credit card billing address or expriation date has changed and needs to be updated. The following elements are used on the screen:
Edit Payment Information Form Elements
The Edit Payment Information Form contains a number of elements that can be layed out however you choose. The display name is used to identify different payment methods, and should be grouped with the display name instructions. The payment method form includes the payment method information, such as the credit card type and number, and the card billing name and expiration date. Credit card numbers are displayed with stars (*) replacing the first 12 numerals for security. The Billing Address form allows the merchant to view or edit all the configured billing address elements, such as the name, street address, city, state, etc.
Buttons
The Edit Payment Information screen should include buttons to submit or cancel changes to the information.
If a customer selects to delete a payment method listed on the Payment Information screen, they are taken to this screen to confirm that they want to delete the information. The following elements are used on the screen:
Delete Payment Confirmation Message
The Delete Payment Confirmation Message asks the customer to confirm that they want to delete the selected payment methods. The text of the message can be modified by the merchant through the Back Office.
Buttons
The Delete Payment Confirmation screen should have a Yes and No button.
Customers who choose to save the shipping address can access that information from the Shipping Information screen. This lets them select saved addresses and view, edit, or delete the information. The following elements are used on the screen:
Shipping Information Instructions
The Shipping Information Instructions provide help for using the Shipping Information form. The text of the instructions can be modified by the merchant through the Back Office.
Shipping Information Form Elements
The Shipping Information Form is a select box for the customer to select which saved shipping address to view, modify, or delete.
Add Shipping Information Message
The Add Shipping Information Message instructs the customer that new shipping addresses can be added by entering them in the shopping cart. The text can be modified by the merchant using the Back Office.
Buttons
The Shipping Information screen should include buttons to Edit or Delete saved shipping addresses, and a Done button to return to the Customer Information screen.
The Edit Shipping Information screen allows customers to view details about saved shipping addresses, and correct or update the information. The following elements are used on the screen:
Edit Shipping Information Form Elements
The Edit Shipping Information Form includes fields for the display name, used to reference individual saved shipping addresses, instructions for the display name, and a section including the various allowed shipping address fields.
Buttons
The Edit Shipping Information screen should have a submit button and a cancel button.
If a customer selects to delete a shipping address on the Shipping Information screen, they are taken to this screen to confirm that they want to delete the information. The following elements are used on the screen:
Delete Shipping Confirmation Message
The Delete Shipping Confirmation Message asks the customer to confirm that they want to delete the selected shipping methods. The text of the message can be modified by the merchant through the Back Office.
Buttons
The Delete Shipping Confirmation screen should have a Yes and No button.
The Order Information screen shows a list of orders placed by the customer, and allows the customer to view details or delete individual order history entries. The following elements are used on the screen:
Order History Instructions
The Order History instructions provide help for using the Order History form. The text can be modified by the merchant through the Back Office.
Order History Form Elements
The Order History form includes a select box from which the customer can select orders to view or delete.
Delete History Notice
The Delete History notice is intended to remind customers that deleting orders from their history will not cancel an order that has been placed. The text of the notice can be modified by the merchant through the Back Office.
Buttons
The Order History screen should have a View button, a Delete button, and a Done button.
The View Order Information screen displays the details of previous orders, much like an invoice. The following elements are used on the screen:
Order Details Elements
The Order Details are much like the Shopping Cart Thank You screen or reciept e-mail message. Orders are identified by the order number, so it is a good idea to place the order number in a highly visible area of the screen. Another important identification tool is the date the order was placed, which can also be displayed on the Order Details screen. Cart contents, order options, cart totals, billing and shipping addresses, and payment information can be shown in any order. You may want to model the appearance of the View Order screen off the same layout used in the Thank You screen, or you could use a different layout for this screen with a higher emphasis on certain information.
Buttons
Because orders can not be modified, there is only a Done button on the View Order screen.
The Delete Order screen is used to confirm that a customer wants to delete the order from their saved history. Deleting an order from the saved history does not cancel a placed order. The following elements are used on the screen:
Delete Order History Confirmation Text
The Delete Order History Confirmation Message asks the customer to confirm that they want to delete the selected orders. The text of the message can be modified by the merchant through the Back Office.
Buttons
The Delete Order Confirmation screen should have a Yes and No button.
If the Customer Registration system encounters an error that doesn't belong on any specific screen, the error will be displayed on this screen. The following elements are used on the screen:
Buttons
The Error screen is most often used when a customer's session times out or if the customer has signed out and then tries to return to a customer registration screen. The only button used on the error screen is a Return To Cart button.
If a customer enters an e-mail address into the Forgot Password form, and that address is not associated with a customer registration account, this message will be sent to that e-mail address. The following elements are used in the message:
Unknown E-Mail Address Text
This message is configured by the merchant through the Back Office, and is intended to notify the recipient that the specified e-mail address is not associated with a Customer Registration account.
Link To Store
A link to the store in the e-mail message is not required, but can be included.
If a customer enters a valid e-mail address into the Forgot Password form, this message will be sent to their e-mail address. The message contains a link to take the customer to the Answer Challenge screen. The following elements are used in the message:
Forgot Password Instructions
The Forgot Password Instructions prompt the customer to click on or copy the included link into a browser to recover a forgotten password. The text of the instructions can be modified by the merchant through the back office.
Forgot Password Link
The Forgot Password Link is generated by ShopSite, and provides a URL that will take the customer to the challenge question screen.
If a customer changes their contact e-mail address on the Preferences screen, this message is sent to both the old and new e-mail addresses. The following elements are used in the message:
E-Mail Address Changed Notice
The E-Mail Address Changed notice text informs the recipient of the message that the e-mail account used is no longer associated with a customer registration account.
New Account Address
The New E-mail address associated with the account can be included in the E-mail message as a reminder to the customer.
If a customer changes account settings, such as the password or challenge question, this message is sent to the contact e-mail address to confirm the change. The message should include the following:
Next Topic: Table Of ContentsAccount Change Message
The Account Change message informs the customer that a change has been made to the account settings. The text of this message can be modified by the merchant in the Back Office.
ShopSite Messages
The Account Changes message uses the ShopSite Messages information to tell the customer what action was actually taken, such as changing the password.