Hello,
we have a Shopify App with a Customer Account UI Full Page extension which we just finished developing and wanted to test in a staging environment.
While developing with the “shopify app dev” command and visiting the page via the link given in the Dev Console inside the admin, everything works fine. But as soon as we deploy it, install it on another store, add it to the Menu (Content → Menus → Customer account main menu), the page just shows the message:
There’s a problem loading this page
Check the URL or try again in a few minutes.
We even created a completely fresh app using the official shopify example: customer-account-tutorials/preact/example-customer-account–wishlist–preact at main · Shopify/customer-account-tutorials
The same problem appears. In Development (shopify app dev), the page works fine with the link in the Dev Console, but once deployed and added to the Menu, the page just shows the error page.
This is my shopify.extension.toml:
api_version = "2025-10"
[[extensions]]
uid = "3a495b4c-7432-f824-50b6-44ec8381c25e7d2a5779"
type = "ui_extension"
name = "My wishlist"
handle = "wishlist-extension-preact"
# [START config.setup-targets]
[[extensions.targeting]]
module = "./src/FullPageExtension.jsx"
target = "customer-account.page.render"
# [END config.setup-targets]
# [START config.api-access]
[extensions.capabilities]
api_access = true
# [END config.api-access]
This is my FullPageExtension.jsx (i even tried removing every logic and just render a simple Test div)
import '@shopify/ui-extensions/preact';
import {render} from 'preact';
import {useEffect, useState} from 'preact/hooks';
// [START full-page.setup-target]
export default async () => {
render(<FullPageExtension />, document.body);
};
// [END full-page.setup-target]
function FullPageExtension() {
const [wishlist, setWishlist] = useState([]);
const [loading, setLoading] = useState(false);
const [removeLoading, setRemoveLoading] = useState({
id: null,
loading: false,
});
// [START full-page.fetch-wishlist]
async function fetchWishlist() {
setLoading(true);
try {
// Implement a server request to retrieve the wishlist for this customer
// Then call the Storefront API to retrieve the details of the wishlisted products
const data = await shopify.query(
`query ($first: Int!) {
products(first: $first) {
nodes {
id
title
onlineStoreUrl
priceRange {
minVariantPrice {
amount
currencyCode
}
}
featuredImage {
url
}
}
}
}`,
{
variables: {first: 10},
}
);
setLoading(false);
setWishlist(data.data?.products?.nodes || []);
} catch (error) {
setLoading(false);
console.log(error);
}
}
// [END full-page.fetch-wishlist]
// [START full-page.delete-item]
async function deleteWishlistItem(id) {
// Simulate a server request
setRemoveLoading({loading: true, id});
return new Promise((resolve) => {
setTimeout(() => {
// Send a request to your server to delete the wishlist item
setWishlist(wishlist.filter((item) => item.id !== id));
setRemoveLoading({loading: false, id: null});
resolve();
}, 750);
});
}
// [END full-page.delete-item]
// [START full-page.fetch-wishlist]
useEffect(() => {
fetchWishlist();
}, []);
// [END full-page.fetch-wishlist]
// [START full-page.build-ui]
return (
<s-page heading="Wishlist">
<s-grid gridTemplateColumns="1fr 1fr 1fr" gap="base">
{!loading &&
wishlist.length > 0 &&
wishlist.map((product) => {
return (
<s-section key={product.id}>
<s-stack direction="block" gap="base" paddingBlockEnd="large">
<s-image src={product.featuredImage.url} />
<s-stack direction="block" gap="small-500">
<s-text color="subdued">{product.title}</s-text>
<s-text type="strong">
{shopify.i18n.formatCurrency(
product.priceRange.minVariantPrice.amount,
{
currency:
product.priceRange.minVariantPrice.currencyCode,
}
)}
</s-text>
</s-stack>
</s-stack>
<s-button slot="primary-action" href={product.onlineStoreUrl}>
View product
</s-button>
<s-button
slot="secondary-actions"
loading={
removeLoading.loading && product.id === removeLoading.id
}
onClick={() => {
deleteWishlistItem(product.id);
}}
>
Remove
</s-button>
</s-section>
);
})}
{!loading && wishlist.length === 0 && (
<s-text>No items in your wishlist.</s-text>
)}
</s-grid>
</s-page>
);
// [END full-page.build-ui]
}
I noticed that the link which the Menu item is generating is giving the following url:
account/pages/01a05bb8-1c5c-7d24-8058-4dc36ae33202
I dont know how the UID in the url gets generated, but this is not the UID of my extension, even if i try to enter the Url with the extension UID directly, it wont work:
account/pages/3a495b4c-7432-f824-50b6-44ec8381c25e7d2a5779
As said, the only working url is via the Dev Console with the “dev-” prefix:
account/pages/dev-3a495b4c-7432-f824-50b6-44ec8381c25e7d2a5779