Sign-in and customer area
With customer accounts, your site gains two pages for your customers: the sign-in page, where they sign in or create an account, and their personal area, where they find their orders, addresses and favorites. You design each one in the editor, with your logo, colors and texts.
Open them from Themes, Customer accounts tab: Customer sign-in for the sign-in page, Customer personal area for the member area. This group only appears when you have a shop.
Both pages show without your site's header and footer, like the checkout steps: each keeps a link back to the store.
What do you want to do?
- Design the sign-in page
- Design the personal area
- Start from another layout
- Change a text
- Put a page live
Design the sign-in page
The sign-in page hosts several forms. In the editor bar, Preview with picks the one shown on the canvas: Login, Sign-up, Forgotten password, Email code or New password. Your layout applies to all of them.
The Elements button offers:
- Logo: your store's logo, linking to the home page.
- Heading: the title and subtitle of the form shown.
- Sign in / Sign up switch: switches between signing in and creating an account; hidden on the other forms.
- Sign-in form: the form shown, with its error messages (and Continue with Google when Google sign-in is set up).
- Continue as guest: the link to order without an account, hidden when an account is required.
You can also add regular blocks, for example a brand image next to the form or a text listing the benefits of an account.
Design the personal area
In the editor bar, Preview with picks the page of the area shown on the canvas: Orders, Favorites, Downloads, Subscriptions, Returns, My details, Addresses, Payment methods, Security or Communications. The layout frames all of these pages.
The Elements button offers:
- Logo and Back to the store: your store's logo and the link to its home page.
- Greeting: the customer's name, sign-up date and loyalty points.
- Navigation: links to the pages of the area, as a Sidebar (a column that turns into a scrolling row on small screens), a Horizontal bar or a Drawer on mobile (the column on desktop; on small screens, a My account button opens it in a drawer).
- Current page: the page the customer opened (orders, details, addresses, favorites…).
- Log out: the button that signs the customer out.
Start from another layout
On first opening, each page takes the structure of the original page. Click the page background, then, under Templates, click Change:
- sign-in page: Centered, Brand panel, Split, Card or Minimal;
- personal area: Sidebar, Top bar or Cards.
Pick a layout, then confirm with Replace. Every section is replaced, but the texts you typed on the elements are kept; the change can be undone. Reset layout goes back to the original structure.
Change a text
Select an element, such as the sign-in page Heading, then click it again and type your text directly on the page. Enter or a click elsewhere saves, Escape cancels. On the sign-in page, pick the form in Preview with first: each form has its own heading. An emptied text goes back to the default text, translated into the visitor's language.
Put a page live
Click Publish layout, check the desktop and mobile preview, then Publish. So that no customer gets stuck, these elements must be present on desktop and mobile:
- sign-in page: Sign-in form, Sign in / Sign up switch and Logo (the way back to the store);
- personal area: Current page, Navigation, Log out, and Back to the store or Logo.
Until the layout is published, your customers see the original page. Each page is published separately.
Good to know
- Customer accounts are opened and set up in Customer accounts > Settings: Google sign-in, required account at checkout, bot protection.
- The personal area canvas shows a sample customer: nobody needs to be signed in to design it.