You can connect a headless Shopify store to an existing non-headless (traditional) Shopify store using the Shopify SSO application. This lets customers log in once and access both stores without having to log in again. This method helps you maintain your custom front-end experience while using Shopify’s secure login and customer account features.
Step-by-Step Connection Process
1. Understand the Two Store Types
- Non-Headless Store: Uses Shopify’s built-in storefront, themes, and checkout. The front-end and back-end are closely linked.
- Headless Store: Uses a custom front-end framework, like Next.js, React, Vue, or Hydrogen, that connects to Shopify’s back-end through APIs such as the Storefront API.
- The Shopify SSO app acts as the bridge for user authentication between these two environments.
2. Install and Configure the Shopify SSO App on Both Stores
- Add the Shopify SSO app to your headless and non-headless stores.
- Configure your Identity Provider (IdP). This can be any SAML, OAuth, or OpenID Connect provider that you use for customer authentication.
- Make sure both stores are connected to the same IdP so they can share login sessions.
3. Set Up the Headless Storefront in Shopify
- From your Shopify admin in the headless store, install the Headless sales channel.
- Create a new storefront within the Headless channel to get your API credentials, including the Storefront API token and Customer Account API token.
- Your front-end application will use these credentials to communicate with Shopify’s backend.
4. Integrate the SSO Flow into the Headless Storefront
- In your headless front-end code, implement login and session validation by using the Shopify SSO app.
- After authentication, the SSO app exchanges IdP-issued tokens for a valid Shopify customer session in the headless store.
- The same SSO session works in the non-headless store, which enables Single Sign-On across both.
5. Leverage the Shopify Storefront API for Content
- Use the Storefront API to get product data, collections, and pages from your non-headless store if needed.
- Use the Customer Account API to show logged-in customer information, order history, and account details.
6. Secure and Manage the Connection
- Restrict Storefront API permissions to only what is necessary for your front end.
- Make sure the SSO app is set up to use short-lived tokens along with refresh tokens for secure session management.
7. Integrate Checkout and Account Access
- Use Shopify’s Checkout API in the headless store for a smooth checkout process.
- Through the SSO app, make sure that customers who log in on one store can access their accounts, cart, and checkout on the other without needing to log in again.
Benefits of This Setup
- Seamless Login Experience: One login works for both headless and non-headless stores.
- Custom Front-End Freedom: Create your headless storefront using any framework without sacrificing Shopify’s secure customer authentication.
- Centralized User Management: You can manage roles, tags, and permissions centrally through your IdP and sync them to both stores.
- Omnichannel Ready: You can easily extend your storefront to web apps, mobile apps, and other digital channels.
By using the Shopify SSO app with Shopify’s Headless channel, Storefront API, and Customer Account API, you can securely link your headless and non-headless stores. This setup provides a smooth login experience and unified customer management in both environments.
For further assistance, please feel free to contact our support team.
