Shoppers log in through Shopify’s hosted Customer Account login. Once logged in, the cart carries their identity so buyer-specific automatic discounts apply before checkout, and your page can show member-only UI. Needs: the engine, plus a Customer Account API client id from your Shopify admin. The customer pricing and page gates features build on this.
On your storefront
Section titled “On your storefront”Add customer-client-id to the store. The customer module loads on demand; nothing else to include.
<storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token" customer-client-id="shp_your-client-id"> <header> <log-in>Log in</log-in> <account-link path="orders"><a href="#">My orders</a></account-link> <span class="greeting">Hi, <show-customer-first-name></show-customer-first-name></span> <log-out>Log out</log-out> </header></storesynk-store>storesynk-store:not([ss-logged-in]) .greeting,storesynk-store:not([ss-logged-in]) log-out,storesynk-store:not([ss-logged-in]) account-link { display: none; }storesynk-store[ss-logged-in] log-in { display: none; }<log-in>and<log-out>work anywhere on the page. Gate their visibility, and any member UI, off[ss-logged-in]on the store.<account-link>points at Shopify’s hosted account pages by default. Setcustomer-account-pages="custom"andcustomer-account-urlon the store to use your own.- The
show-customer-*displayers (email,first-name,last-name,name) hide themselves while anonymous. - Add
customer-redirect-urionly if your OAuth callback page differs from the current URL. It must be allow-listed in the Shopify app’s Customer Account API settings.
States
Section titled “States”| Attribute | Set on | Meaning |
|---|---|---|
ss-logged-in | storesynk-store | a customer session is active |
ss-empty | show-customer-* | anonymous; the tag is also hidden |
The SSR packages render the member state on the server when the session cookie is present, so a logged-in page never flashes anonymous.