---
title: "Sign-in and customer area: your customer account pages in the editor"
description: "Design your customers' sign-in page and their personal area; the original pages stay live until you publish your layouts."
url: https://docs.vivlab.com/en/sections/themes-accounts
---

# Sign-in and customer area

With [customer accounts](https://docs.vivlab.com/en/sections/customer-accounts.md), 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.

<DocsAccess />

Open them from [Themes](https://docs.vivlab.com/en/sections/branding.md), **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](https://docs.vivlab.com/en/sections/themes-checkout.md): each keeps a link back to the store.

## What do you want to do?

- [Design the sign-in page](#sign-in-page)
- [Design the personal area](#personal-area)
- [Start from another layout](#start-from-another-layout)
- [Change a text](#change-a-text)
- [Put a page live](#publish)

## Design the sign-in page {#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](https://docs.vivlab.com/en/sections/memberships-settings.md#google-sign-in) is set up).
- **Continue as guest**: the link to order without an account, hidden when an [account is required](https://docs.vivlab.com/en/sections/memberships-settings.md#checkout-accounts).

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 {#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](https://docs.vivlab.com/en/sections/loyalty.md) 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 {#publish}

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](https://docs.vivlab.com/en/sections/memberships-settings.md): 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.