# Customer accounts

> Let customers log in on your Webflow site with Shopify's customer accounts. Covers the Shopify set-up, the key Smootify needs, login and logout, the customer's details, the customer conditions and the pages only logged-in customers can open.

Status: Ready (Smootify 2.0)  
1.x page: https://docs.smootify.io/docs/accounts/how-to-enable  
URL: https://www.smootify.io/docs/build/account  
Updated: 2026-10-10

Customers log in on your Webflow site with Shopify’s customer accounts. There is no password: Shopify sends a one-time code by email. This page sets up the Shopify side and the key Smootify needs, then covers login and logout, the customer’s details, the elements shown only to some customers, and the pages only logged-in customers can open.

> [!NOTE]
> Smootify 2.0 works with Shopify's **new customer accounts**. Shopify has deprecated its classic customer accounts and will remove them soon. You also need a Headless storefront in Shopify: see [Set up the Shopify store](https://www.smootify.io/docs/start/shopify-store).

## How it fits together

What Smootify needs:

- new customer accounts turned on in Shopify;
- the client id of your Headless storefront’s Customer Account API, in the option `newCustomerAccountsPublicKey`;
- a `passwordless-login` form, where customers log in.

What is up to you:

- where the login goes: the navbar, a page of its own, or both;
- which account pages you build, and their layout. Every part of them is optional.

The parts an account can have, each with its own guide:

| Part | What it shows | Elements |
|---|---|---|
| [Addresses](https://www.smootify.io/docs/build/addresses) | saved addresses, with forms to add, edit and delete them | `customer-addresses`, `create-address`, `edit-address`, `delete-address` |
| [Orders](https://www.smootify.io/docs/build/orders) | past orders, a page for each order, and Buy again | `customer-orders`, `order-page`, `line-item`, `order-fulfillment` |
| [Subscriptions](https://www.smootify.io/docs/build/account-subscriptions) | subscriptions, a page for each one, and forms to pause, resume and cancel them | `customer-subscriptions`, `subscription-page`, `subscription-pause`, `subscription-activate`, `subscription-cancel` |
| [Customer data](https://www.smootify.io/docs/build/customer-data) | the name, customer metafields, the email subscription and store credit | `customer-user-update`, `customer-metafields-editor`, `customer-subscribe-email`, `customer-unsubscribe-email`, `store-credit` |

You do not have to build account pages at all. Shopify has its own account pages, and you can link to them from any Webflow link. Shopify gives their address under **Settings › Customer accounts**.

## 1. Turn on customer accounts in Shopify

The Shopify screens, in order, numbered as the steps below:

1. **Settings › Customer accounts**: choose the new customer accounts. The classic customer accounts are deprecated by Shopify.
2. **Headless › your storefront › Customer Account API settings**: set the **Client type** to **Public** (step 3) and turn on all the **permissions** (step 4).
3. **Application setup**, on the same page: **JavaScript origins** `https://www.example.com` and `https://example.webflow.io` (step 5), and **Callback URIs** with the same two addresses (step 6), each without a slash at the end.
4. **Client ID**: copy it (step 7). It is the public key Smootify needs, for the option `newCustomerAccountsPublicKey`.

1. In Shopify, go to **Settings › Customer accounts** and choose the new customer accounts.
2. Open the **Headless** channel and your storefront, then its **Customer Account API** settings.
3. Set the **Client type** to **Public**.
4. Turn on all its permissions.
5. Under **JavaScript origins**, add the address of your site without a slash at the end, such as `https://www.example.com`. Add your `.webflow.io` address too, so you can log in while you build.
6. Under **Callback URIs**, add the address Shopify sends customers back to after the login. By default it is your home page, written the same way: `https://www.example.com`, and your `.webflow.io` address.
7. Copy the **Client ID**. This is the public key Smootify needs.

Shopify’s login page shows your store’s logo and colours. You set them in Shopify’s checkout settings.

## 2. Give Smootify the key

Put the Client ID in Smootify’s options. The options go in your site’s head code, in a script **before** the Smootify loader: see [Install Smootify 2.0](https://www.smootify.io/docs/start/install). If the site already has an options script, add the key to it. A second script replaces the first.

```html
<script>
  window.SmootifyUserOptions = {
    newCustomerAccountsPublicKey: "{Customer Account API client id}",
  };
</script>
```

Without the key, the login does nothing and the account elements remove themselves from the page.

**Where the login lands.** After the login, Shopify sends the customer back to your home page. To send them somewhere else, set `newCustomerLoginRedirect` to that address, and add the same address to the **Callback URIs** in Shopify. With `newCustomerLoginRedirect: "same-page"`, customers go back to the page where they started the login. The callback is then your home page address.

## 3. Log in and log out

**Log in.** Add a Custom element with the tag `passwordless-login`, and put a Webflow **Form Block** inside it. The Form needs only a Form Button, such as “Log in”. A click takes the customer to Shopify’s login page, where they type their email and the code Shopify sends them. Then Shopify sends them back to your site, logged in.

There is no separate sign-up. A customer who has no account yet creates one in the same step, so “Log in” and “Create account” can be the same form.

**Log out.** Add a Custom element with the tag `logout-form`, with a Form Block and a Form Button inside it. It ends the session on your site and in Shopify. The browser also forgets the cart, so the next visitor on that device starts with an empty cart.

**How long the login lasts.** The customer stays logged in until they log out or Shopify ends the session, such as when it expires. If Shopify cannot be reached for a moment, the page shows the visitor as not logged in, and the next page tries again with the same session: there is no new login to do.

**Show one or the other.** Wrap the login in an element with `customer-condition="not-logged-in"`, and the logout and account links in one with `customer-condition="logged-in"`:

```html
<div>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <div class="w-form">
        <form><input type="submit" value="Log in" data-wait="Please wait…"></form>
        <div class="w-form-done"><div>Redirecting…</div></div>
        <div class="w-form-fail"><div>Something went wrong</div></div>
      </div>
    </passwordless-login>
  </div>
  <div customer-condition="logged-in">
    <div>Hi, <span customer="first-name">there</span></div>
    <logout-form>
      <div class="w-form">
        <form><input type="submit" value="Log out"></form>
        <div class="w-form-done"><div>Logged out</div></div>
        <div class="w-form-fail"><div>Something went wrong</div></div>
      </div>
    </logout-form>
  </div>
</div>
```

In a navbar, the same parts work as in [Navbar: cart, search and account](https://www.smootify.io/docs/build/navbar).

## 4. Show the customer’s details

Add a custom attribute to a Text block or a Heading to fill it with a detail of the logged-in customer. These work anywhere on any page, with no wrapper.

| Attribute | What it shows |
|---|---|
| `customer="first-name"`, `customer="last-name"` | the first name, the last name |
| `customer="display-name"` | the name Shopify shows for the customer |
| `customer="email"` | the email; on a link, the link opens an email to it |
| `customer="phone"` | the phone number; on a link, the link calls it |
| `customer="defaultAddress"` | the default address, one line under the other |
| `customer="tags"` | one copy of the element per customer tag |
| `company="name"` | the company of a B2B customer |

- **Tags.** `exclude="Wholesale, Staff"` on the `customer="tags"` element leaves those tags out.
- **Company.** Every `company` element is taken out when the customer has no company.
- **Logged out.** For a visitor who is not logged in, these elements are taken out of the page. They come back after the login.
- **While it loads.** Until Smootify knows who the visitor is, these elements show as a placeholder shimmer.
- **A value that is missing.** `data-fallback="there"` on the element keeps it and shows that text when the customer has no value, such as a customer without a first name: `Hi, <span customer="first-name" data-fallback="there">name</span>`. It works on every element Smootify fills, product and metafield values included. To show or hide a whole block instead, use `customer-condition="has-names"` / `"no-names"`.

The full list is in [customer values](https://www.smootify.io/docs/reference/attributes/customer). To show the customer’s metafields, see [Customer data and newsletter](https://www.smootify.io/docs/build/customer-data).

```html
<div>
  <h2>Hello, <span customer="first-name">name</span></h2>
  <div customer="email">email@example.com</div>
  <div customer="defaultAddress">Default address</div>
</div>
```

## 5. Show or hide by customer

An element with `customer-condition="…"` shows only while the customer is in that state. This is separate from Webflow’s conditional visibility. The conditions come in pairs, one for each state:

| Condition | Shown when the customer |
|---|---|
| `logged-in` / `not-logged-in` | is logged in / is not logged in |
| `has-names` / `no-names` | has both a first and a last name / lacks one of them |
| `has-addresses` / `no-addresses` | has saved addresses / has none |
| `has-orders` / `no-orders` | has orders / has none (only on a page with a `customer-orders` list, which counts the orders) |
| `has-subscriptions` / `no-subscriptions` | has subscriptions / has none (only on a page with a `customer-subscriptions` list) |
| `email-subscribed` / `email-not-subscribed` | is subscribed to your email marketing / is not |

**Logged-out visitors.** The conditions after the first pair are for logged-in customers. Use them on account pages, or inside an element with `customer-condition="logged-in"`.

**Customer tags.** `customer-tagged="vip"` shows an element only to customers with that tag. With several tags, `customer-tagged="vip, gold"`, the customer needs all of them. Add `any="true"` to show it when the customer has at least one, or `exclusive="true"` to show it only when the customer has exactly those tags and no other. `customer-not-tagged="…"` does the opposite, and reads `any="true"` too. For a visitor who is not logged in, both are taken out of the page.

Every condition is in [customer conditions](https://www.smootify.io/docs/reference/conditions/customer) and [customer tag conditions](https://www.smootify.io/docs/reference/conditions/customer-tags).

> [!WARNING]
> These conditions hide elements on the page, but what they hide is still in the published page's code. Never use them to hide private information.

## 6. Pages for logged-in customers

Pages inside a Webflow page folder with the slug `account`, such as `/account/orders`, are for logged-in customers only. A visitor who is not logged in is sent to your home page. Only the folder’s own page and the pages inside it count: `/accounts` or `/accounting/rates` stay open to everyone.

- **Other languages.** With Webflow Localization, the same pages in each language are covered, such as `/fr/account/orders`.
- **Pages that stay open.** A page in the folder whose address contains `login`, `register`, `reset`, `activate` or `recover` is open to everyone.
- **Where visitors go.** `accountPageRedirectTo` sends them to another address, such as `"/login"`. With `accountPageRedirectTo: "passwordless-login"`, they go straight to Shopify’s login page. That needs `newCustomerAccountsPublicKey`: without it no login can open, so they go to the home page, and on your `.webflow.io` address the debugger points out the missing key.
- **Another folder.** If your account pages are in a folder with another slug, set it in `accountBase`, such as `accountBase: "my-account"`.

These options go in the same options script as the key:

```html
<script>
  window.SmootifyUserOptions = {
    newCustomerAccountsPublicKey: "{Customer Account API client id}",
    accountPageRedirectTo: "passwordless-login",
  };
</script>
```

Two pages have a fixed address by default: the order page at `/account/order` and the subscription page at `/account/subscription`. See [Orders and buy again](https://www.smootify.io/docs/build/orders) and [Subscriptions in the account](https://www.smootify.io/docs/build/account-subscriptions). Every option is in the [options reference](https://www.smootify.io/docs/reference/options).

## Common questions

- **Can I import customers from another platform?** Yes, their emails, with Shopify’s customer import. Passwords cannot be imported, and none are needed: customers log in with a one-time code sent to their email.
- **Can I change Shopify’s own account pages?** Shopify’s login page and its account pages (orders, profile) take your logo and colours, a menu and app blocks, set in Shopify’s checkout and accounts editor (**Settings › Checkout**, then **Customize**). Nothing else of their design changes.
- **Do I have to use Shopify’s account pages?** No. You can build every account page in Webflow, as on this page. Apps that add blocks to customer accounts, such as loyalty or returns apps, work only in Shopify’s account pages: link to them from your Webflow pages when you need one.

## Before you publish

Log in on your `.webflow.io` address to see the account pages with real data. Press Alt+Shift+D (Option+Shift+D on a Mac) there to turn on Smootify’s debugger (on a phone, add `?smootify-debug` to the address): its panel lists the account elements that are not running, and why. See [The debugger](https://www.smootify.io/docs/start/debugger).

> [!STUCK]
> - **Login fails, or Shopify does not send the customer back.** Most often the Callback URIs or the JavaScript origins in Shopify do not match the site's address. Add the address exactly, as `https://www.example.com`, to both.
> - **Log in does nothing.** `newCustomerAccountsPublicKey` is missing, or its script comes after the Smootify loader. Put it in the options script before the loader.
> - **Login works on one address and not on the other.** Each address you use, the `.webflow.io` one and your own domain, must be in both the JavaScript origins and the Callback URIs in Shopify.
> - **A visitor who is not logged in sees an account page.** The page is outside the `account` folder, such as `/account-orders`: move it into the folder, `/account/orders`.
> - **Back from Shopify's login, the customer is still logged out.** A second login was started in another tab before the first one finished, and only the last login started counts. Log in again from one tab.
> - **An account page sends you to the home page.** You are not logged in, and the pages in the `account` folder are for logged-in customers. Log in first, or change `accountPageRedirectTo`.
> - **`has-orders` and `no-orders` both show.** The page has no `customer-orders` list, which is what counts the orders.
> - **The default address stays empty.** The value is `customer="defaultAddress"`, in one word. `default-address` is not read.
> - **The login and register forms disappeared after the move to 2.0.** They were classic account forms. Replace them with one `passwordless-login`.

## Coming from 1.x

- `login-form`, `register-form`, `recover-form`, `reset-form` and `activate-form` remove themselves from the page. One `passwordless-login` replaces them all. The links in classic account emails, such as `/account/activate/…` and `/account/reset/…`, are no longer handled.
- A store still on classic accounts moves to the new ones in Shopify first, then sets `newCustomerAccountsPublicKey`.
- Visitors stay logged in when the site moves to 2.0.