Legacy customer accounts settings

Customer accounts let your customers log in to view their orders, profile information, and saved addresses. When a customer logs in, the details stored in their account are autofilled during checkout for a faster checkout experience.

There are two versions of customer accounts:

  • Customer accounts is the newest version of customer accounts, and lets your customers log in using a one-time 6-digit verification code sent by email. A password isn't required to log in.
  • Legacy customer accounts lets your customers log in using an email and a password.

Both customer accounts and legacy customer accounts are available to you and can be used by your customers. You can choose which version of customer accounts to use in your online store. If you decide to use the new version of customer accounts, then most links to legacy customer accounts will automatically redirect to customer accounts. Learn more about upgrading to customer accounts.

Follow this link to get more information.

Legacy customer accounts

We have seven legacy accounts pages

When you click on any of these pages, the settings allow you to customize their appearance. The settings in the left panel can be the same or different for all customer pages.

You can instantly access the Login or Register pages by clicking on Customer Login or Customer Register at the top of the customizer.


To see settings of order and addresses pages, you need to log in at first to see these pages. After login, click on Customer addresses or Customer Account at the top of the customizer to see settings of these pages.

Click on Order number

and you will see Order detail page

Addresses page


For login and reset password page, you will see these settings:

Setting Description
Color scheme
  • After creating your custom color schemes in the Theme Settings > Colors tab, you can apply them to various sections, blocks, or pages.
  • Each section, block, or page settings includes a Color Scheme Dropdown, allowing you to select a scheme that aligns with your brand identity for a cohesive appearance.
Switch section background

Within each color scheme, you can define a secondary background in addition to the main background.

When you enable Switch section background, the main background of the section changes to the secondary background.
Container color scheme

This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned.

Also, this color scheme applies colors for Blockquote placed on the image.
Image login page

Add an image to the right side of the section that will be visible on the Login page.

You can upload a new image or select one from the media library.

Blockquote login page

Add a short blockquote at the top of the image. This blockquote will be visible on the Login page.

This will be displayed when an image is added. You can edit it and write your own text.
Image reset page

Add an image to the right side of the section. This image will be visible on the Reset Password page when a user clicks the Forgot Password link on the login page, navigating them to the reset page.

You can upload a new image or select one from the media library.
Blockquote reset page

Add a short blockquote at the top of the image. This blockquote will be visible on the Reset Password page when a user clicks the Forgot Password link on the login page, navigating them to the reset page.

This will be displayed when an image is added. You can edit it and write your own text.
Enable Sign in with Shop Activate this option to allow customers to sign in using their Shop App credentials.

Button styles


Setting Description
Sign in button style

Choose the “Sign-in” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
Create account button style (Login page)

Choose the “Create Account” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
Cancel button style (Password page)

Choose the “Cancel” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

For Create Account page, you will see these settings:


Setting Description
Color scheme
  • After creating your custom color schemes in the Theme Settings > Colors tab, you can apply them to various sections, blocks, or pages.
  • Each section, block, or page settings includes a Color Scheme Dropdown, allowing you to select a scheme that aligns with your brand identity for a cohesive appearance.
Switch section background

Within each color scheme, you can define a secondary background in addition to the main background.

When you enable Switch section background, the main background of the section changes to the secondary background.
Container color scheme

This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned.

Also, this color scheme applies colors for Blockquote placed on the image.
Image

Add an image to the right side of the section.

You can upload a new image or select one from the media library.

Blockquote

Add a short blockquote at the top of the image.

This will be displayed when an image is added. You can edit it and write your own text.

Button styles


Setting Description
Create account button style (Create button)

Choose the “Create” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
Login button style (Sign In button)

Choose the “Sign In” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

For Order History, you will see these settings:


Setting Description
Color scheme
  • After creating your custom color schemes in the Theme Settings > Colors tab, you can apply them to various sections, blocks, or pages.
  • Each section, block, or page settings includes a Color Scheme Dropdown, allowing you to select a scheme that aligns with your brand identity for a cohesive appearance.
Switch section background

Within each color scheme, you can define a secondary background in addition to the main background.

When you enable Switch section background, the main background of the section changes to the secondary background.
Color scheme

This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned.

Also, this color scheme applies colors for Blockquote placed on the image.

Button styles


Setting Description
Logout button style

Choose the “Log out” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
View addresses button style

Choose the “View addresses ” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

For Addresses, you will see these settings:

Setting Description
Color scheme
  • After creating your custom color schemes in the Theme Settings > Colors tab, you can apply them to various sections, blocks, or pages.
  • Each section, block, or page settings includes a Color Scheme Dropdown, allowing you to select a scheme that aligns with your brand identity for a cohesive appearance.
Switch section background

Within each color scheme, you can define a secondary background in addition to the main background.

When you enable Switch section background, the main background of the section changes to the secondary background.
Color scheme

This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned.

Also, this color scheme applies colors for Blockquote placed on the image.

Button styles


Setting Description
Add address button style

Choose the “Add a new address” , “Add address”,  “Update address” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.
Cancel button style

Choose the “Cancel” button’s appearance:

  • Primary: Uses the primary button color defined in color scheme.
  • Secondary: Uses the secondary button color defined in each color scheme.
  • Outline: A button with a border and no fill.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

For Order detail page you will see these settings:


Setting Description
Color scheme
  • After creating your custom color schemes in the Theme Settings > Colors tab, you can apply them to various sections, blocks, or pages.
  • Each section, block, or page settings includes a Color Scheme Dropdown, allowing you to select a scheme that aligns with your brand identity for a cohesive appearance.
Switch section background

Within each color scheme, you can define a secondary background in addition to the main background.

When you enable Switch section background, the main background of the section changes to the secondary background.
Color scheme

This option lets you select a color scheme for the container that can be different from the page’s default. It helps make the section visually more cohesive and aligned.

Also, this color scheme applies colors for Blockquote placed on the image.

Section padding


Setting Description
Top padding The 'Top padding' setting allows you to adjust the amount of space at the top of the section using a slider. 
Bottom padding The 'Bottom padding' setting functions similarly to the “Section top padding” setting, but controls the space at the bottom of the section. 
Top padding mobile The 'Top padding mobile' setting allows you to adjust the amount of space at the top of the section specifically for mobile devices, using a slider.
Bottom padding mobile The 'Bottom padding mobile' setting works similarly to the 'Top padding mobile' setting but controls the space at the bottom of the section for mobile devices.

Note: Click save on every page to save all changes.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us