Customer accounts

Customers log in on your 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 link. Shopify gives their address under Settings › Customer accounts.

1. Turn on customer accounts in Shopify

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 http://localhost:4321 and your *.workers.dev address too, so you can log in while you build and preview.
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, http://localhost:4321 and your *.workers.dev 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 the userOptions of the Smootify integration, in astro.config.mjs. Smootify writes them to every page before the loader: see Install Smootify 2.0.

smootify({
  siteId,
  userOptions: {
    newCustomerAccountsPublicKey: "{Customer Account API client id}",
  },
});

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 passwordless-login element, and put a <form> inside it. The form needs only a submit 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 logout-form element, with a <form> and a submit 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":

<div>
  <div customer-condition="not-logged-in">
    <passwordless-login>
      <form><button type="submit"><span data-state="default">Log in</span><span data-state="loading">Please wait…</span></button></form>
      <div form-done hidden>Redirecting…</div>
      <div form-fail hidden>Something went wrong</div>
    </passwordless-login>
  </div>
  <div customer-condition="logged-in">
    <div>Hi, <span customer="first-name">there</span></div>
    <logout-form>
      <form><button type="submit">Log out</button></form>
      <div form-done hidden>Logged out</div>
      <div form-fail hidden>Something went wrong</div>
    </logout-form>
  </div>
</div>

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

4. Show the customer’s details

Add an attribute to a text element 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.

<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. 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 the src/pages/account/ folder, 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 /account page itself and the pages inside it count: /accounts or /accounting/rates stay open to everyone.

• Other languages. With locales, 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 in the dev server and on your *.workers.dev address the debugger points out the missing key.
• Another folder. If your account pages are in another folder, such as src/pages/my-account/, set it in accountBase, such as accountBase: "my-account".

These options go in the same userOptions as the key:

smootify({
  siteId,
  userOptions: {
    newCustomerAccountsPublicKey: "{Customer Account API client id}",
    accountPageRedirectTo: "passwordless-login",
  },
});

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 your site, as on this page. Apps that add blocks to customer accounts, such as loyalty apps, work only in Shopify’s account pages: link to them from your pages when you need one. Return requests are built in: see Returns and removals.

Before you publish

Log in in the dev server or on your *.workers.dev 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.