Personalizing a Hydrogen storefront for logged-in wholesale buyers
One Hydrogen storefront, two buyer types. The constraints we are working within:
- Consumers and wholesale accounts share the same routes. No fork.
- Wholesale buyers should see volume-pricing messaging and reorder shortcuts.
- Wholesale status is known at login, from a customer tag in Shopify.
How do I flag wholesale buyers on the Croct side so audiences can target them, without maintaining a second storefront
2 answers
No fork needed. The flag is just profile data.
Since your wholesale status comes from a customer tag, set it once on login via the user patch API:
croct.user.edit() .set('custom.wholesale', true) .save();Alternatively, if you also have the company name, the profile has built-in user attributes like company you can set the same way. Either works as an audience condition; for the custom attribute it is queried without the prefix:
user's wholesale is trueLogged-in Shopify customers are identified automatically on every request by the Hydrogen SDK, so once the attribute is set it sticks to the right profile with no extra identify calls.
Content-wise, one slot serves both audiences. The consumer messaging is the default slot content and the wholesale variant is just another experience targeting the wholesale audience. Same route, same component, different content per buyer type.
We do this for a packaging supplier. One addition: set the attribute in the login flow server-side rather than in a client effect, so the very first page after login already matches the wholesale audience. If you set it client-side after hydration, the first post-login page can still evaluate as consumer.
The reorder shortcuts we modeled as a separate slot in the account area rather than a variant of the home hero. Keeps the experiences from competing over one slot.