We have a Checkout UI extension (Preact, purchase.checkout.* target). When the shopper is not a loyalty member we show “Join Loyalty Program” as an <s-button href="...">.
What we do today: we set href to the store’s generic customer account URL, built from shop.storefrontUrl or https://{myshopifyDomain} → {base}/account (see getAccountUrl in our checkout extension). That opens the normal account area, not our extension’s dedicated full page.
We also have a Customer Account UI extension (customer-account.page.render, “My Rewards”) that loads on a URL like …/account/pages/<page-uuid> (Shopify-hosted customer account).
Question: What is the supported way to send someone from checkout straight to that customer account extension page? For example:
-
Is there a stable URL pattern or API to resolve the correct /account/pages/{id} (or equivalent) from checkout?
-
Should we use shopify.navigation.navigate (or another Checkout API) instead of/in addition to href?
-
Any constraints (guest checkout, same tab vs new tab, Shopify Plus, etc.)?
refer to photos for reference..
Hi @Ammaar_Farhan_Syed
There’s currently no Checkout UI Extensions API that will directly give you the URL of a Customer Account full‑page extension (the /account/pages/{id} URL). The supported pattern is to rely on the stable, documented route structure for customer account full‑page extensions: essentially {{ routes.account_url }}/pages/{extensionIdOrHandle} as shown in the customer sign‑in and full‑page extension docs (build new pages in customer accounts).
In practice, that means you combine the shop’s account base URL (which you’re already deriving from shop.storefrontUrl or myshopifyDomain + /account) with your extension’s page identifier (handle or id) to produce https://{shop-domain}/account/pages/{handleOrId}.
To get that {handleOrId} in a robust way, you resolve it on your server using the Admin GraphQL API’s CustomerAccountAppExtensionPage object, or by reading your extension’s known handle from configuration.
Your backend then either stores this URL per shop or exposes it via an endpoint, and your checkout UI extension simply uses that precomputed URL. Within the customer account surface itself you can use the special href="extension:<handle>/" protocol to navigate between extensions of the same app, but that mechanism does not exist on the checkout side; from checkout you must link via the full https://.../account/pages/... URL.
it seems that the handle (from shopify.extension.toml) does not work anymore; only the id is working, can you confirm? AI is telling me to copy the url id and hardcode it..
as result const returnURL = `https://shopify.com/${id}/account/pages/my-account-extension\`;
so I cannot return from external endpoints
(assume: user went to a 3rd party, signed a contract, now needs to return to its account extension, with the signature confirmed)
