Customer accounts

Add Shopify customer login, account details, and order history to your Framer site. Configure it during onboarding or later in Manage.

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:

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.

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.

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.