--- title: "Customer Account setup | FrameStoreKit" canonical_url: "https://framestorekit.com/docs/shopify/customer-accounts" last_updated: "2026-10-21T15:06:29.915Z" meta: description: "Set up optional Shopify customer login on a Framer site. Configure the public Client ID, callback URLs, account page, and update settings after onboarding." "og:description": "Set up optional Shopify customer login on a Framer site. Configure the public Client ID, callback URLs, account page, and update settings after onboarding." "og:title": "Customer Account setup | FrameStoreKit" --- FrameStoreKit home # Customer accounts Add Shopify customer login, account details, and order history to your Framer site. Configure it during onboarding or later in Manage. Customer Account setup is optional. Choose **Skip for now** to finish onboarding without login. Enabling it requires a [Pro or Lifetime license](https://framestorekit.com/pricing) assigned to the connected Shopify store. ## What you need - A connected Shopify store with the Headless sales channel. - Shopify customer accounts enabled in **Settings → Customer accounts**. - A public Customer Account **Client ID** from Shopify Headless. - Your published Framer HTTPS site origin, such as `https://shop.example.com`. The Client ID is different from your public Storefront API token. Shopper access tokens are created when each customer signs in; you do not paste those into the plugin. ## 1. Configure the Shopify client 1. Open **Headless** in Shopify admin and select the storefront connected to Framer. 2. Open **Customer Account API** settings. 3. Choose a **Public** client with the **Web** application type, then copy its Client ID. Customer login runs from the published Framer site through Shopify. This setup uses no client secret. The components discover Shopify's authorization, token, and logout endpoints automatically. ## 2. Save your account settings 1. Use the optional **Customer accounts** onboarding step, or open **Manage → Customer accounts** from the canvas. 2. Enter the **Customer Account Client ID**. 3. Enter the **Published Framer site URL**. Use the HTTPS origin without a page path, query, or fragment. 4. Copy the registration values shown in the form into the Customer Account API settings in Shopify Headless. 5. Select **Save customer accounts**. For a site published at `https://shop.example.com`, the registration values are:
Callback URI
`https://shop.example.com/account`
JavaScript origin
`https://shop.example.com`
Logout URI
`https://shop.example.com`
Register your actual site domain. If you use a custom domain, enter that origin in both Shopify and the plugin. ## 3. Create your account page 1. Create a Framer page at `/account`. 2. Insert **Account View** on that page. It handles the login callback and displays the customer's profile. 3. For a custom account layout, use **Auth Callback** to handle the redirect, then add the account components you need. 4. Add **Login Button**, **Logout Button**, and **Order History** where appropriate. 5. Keep connection fields set to `auto` so the components follow your saved plugin settings. The default Callback Path is `/account`. If you change it in a component, create that page and register the matching full Callback URI in Shopify. The plugin form shows the default path. ## 4. Publish and test login 1. Open **Manage → Domains & runtime** and confirm that the site script is installed. 2. Publish your Framer site. 3. Open the published HTTPS site and click the Login Button. 4. Complete Shopify sign-in and confirm that you return to your account page. 5. Check account details, order history, and logout. Framer canvas previews display sample account content. Use the published site to verify real customer login. ## Update or clear settings after onboarding Open **Manage → Customer accounts** to change the Client ID or published site URL, then select **Save customer accounts**. If the domain changes, update the registered URLs in Shopify as well. Saving replaces the existing FramerHub site script. Repeated saves leave one current runtime snippet, and unrelated custom code stays intact. Publish again to apply the updated settings to visitors. If you rotate Shopify credentials, save the new Client ID, publish, and verify login before revoking the old credentials. Select **Clear customer accounts** to remove the saved Client ID and disable account login in the site script. Your Storefront token and CMS products remain available. Publish to apply the change. To update your Storefront API token, use [Manage → Connection](https://framestorekit.com/docs/shopify/connect-store#update-credentials). ## Troubleshooting ### Customer accounts is locked Check that the Pro or Lifetime license is assigned to this Shopify store. You can continue using the storefront and return to account setup later. ### Login does not return to the account page Check the Client ID, published site origin, Callback Path, and registered Callback URI. The callback must point to the page with Account View or Auth Callback. ### Shopify sign-in succeeds but the account stays empty Confirm that Shopify has your actual published site origin in JavaScript origins. Check that the site script is enabled and publish your latest settings. For an older component instance, replace explicit connection values with `auto`. ### The site script needs attention Settings may be saved even when Framer denies a code write. Reopen the plugin from the canvas, go to **Manage → Domains & runtime**, and select **Retry site script update**. Enable disabled snippets in **Site Settings → Code**, then publish. For Shopify's client types, URL registration requirements, and credential rotation steps, see the [official Customer Account API setup guide](https://shopify.dev/docs/storefronts/headless/building-with-the-customer-account-api/getting-started). ## Sitemap See the full [sitemap](/sitemap.md) for all pages.