Customer accounts

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.

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:

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. 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. If the site already has an options script, add the key to it. A second script replaces the first.

<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":

In a navbar, the same parts work as in Navbar: cart, search and account.

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.

• 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. To show the customer’s metafields, see Customer data and newsletter.

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:

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 and customer tag conditions.

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:

<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 and Subscriptions in the account. Every option is in the options reference.

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.

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.