Hello!
Relative links inside of customer account ui extension navigating to a storefront page do not work as expected and are instead relative to the customer account.
Dev Example:
<s-link href="/collections/all"> View all products </s-link>
ends up with a url of ‘https://shopify.com/<some_id>/account/pages/<some_uuid>/collections/all’
expected is “https://example.myshopify.com/collections/all"
dev environment running 2026_1 web components.
Hi @Brian_Hunter
From digging into this it looks like this is actually the expected behavior for relative URLs in customer account extensions — they resolve relative to your extension’s route, not the storefront root. The docs on custom protocols explain the three URL schemes available in <s-link>:
shopify:customer-account/... — navigates within customer accounts (e.g., orders page)
/relative/path — navigates within your extension’s routes
extension:<handle>/... — navigates to another extension
To link to a storefront page like /collections/all, you need to use the full absolute URL. You can get the storefront domain from shopify.shop.storefrontUrl:
const storefrontUrl = shopify.shop.storefrontUrl;
// Then in your template:
// <s-link href={`${storefrontUrl}/collections/all`}>Browse all collections</s-link>
Note that as of API version 2024-10, storefrontUrl no longer includes a trailing slash, so you’ll want to include the leading / when appending your path.
Hope that helps — let me know if you run into any issues with this approach!
That is helpful -thank you for clairfying, but unless it is hidden elsewhere, shop is not available in the standardAPI for the customer profile page (and others).
Good point - customerAccountsV2 is an Admin API field, so it’s available from your app backend but not from within a customer account UI extension directly.
That said, if you need the shop ID from within an extension, the Customer Account API does expose a shop query. You can call it via fetch() inside your extension:
const response = await fetch(
'shopify://customer-account/api/2026-01/graphql.json',
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
query: `query { shop { id myshopifyDomain } }`,
}),
}
);
const { data } = await response.json();
// data.shop.id => "gid://shopify/Shop/12345678"
// Extract numeric ID:
const shopId = data.shop.id.split('/').pop();
// => "12345678"
That gives you enough to construct https://shopify.com/${shopId}/pages/${extensionUuid}, which as you noted always redirects correctly regardless of custom domain setup.
Ultimately I was looking for a way to build a url to a page on my storefront from the Customer account UI extension:
I am on https://shopify.com/{shopId}/account/profile and I want to create a link to a storefront url such as https://{mydomain}.com/pages/mypage
Thanks to your insights I was able to build this out using the myshopifyDomain property returned from the query. It seems to work on a dev store.
If there is anything else I should include in the url -such as params like country, etc. please let me know.