In this guide, we share our first-hand experience building a full-page UI extension for Shopify's new Customer Accounts experience from scratch at Nodus Works. We walk you through the entire journey from setup to deployment, including the real-world errors we encountered and how we resolved them, complete with code examples. This guide is based on our direct experience taking a full-page customer account extension from zero to production.
Why Do You Need a Full-Page UI Extension?
Shopify's new customer accounts come with built-in pages like Orders, Profile, and Addresses; however, these pre-built blocks are insufficient for scenarios like loyalty programs, wishlists, subscription management, or a standalone "impact dashboard." Shopify addresses this need with full-page UI extensions that use the customer-account.page.render target.
What Are UI Extensions and Targets?
A UI extension is a module that injects code into specific areas of the customer account interface, while a target determines where that code is placed. Block targets are added to existing pages, whereas the full-page target creates an entirely new route. The table below summarizes the differences between the two target types.
Critical Note: A full-page target cannot coexist with any other target within the same extension. You must create a separate extension for your full page; attempting to add a full-page target inside an existing block extension will result in a configuration error.
Step-by-Step Setup: How to Create an Extension?
Creating an extension requires two files: a configuration file and a page component. A full-page target must be defined within its own standalone extension.
api_version = "2026-04"
[[extensions]]
name = "Impact Page"
handle = "impact-page"
type = "ui_extension"
[[extensions.targeting]]
module = "./src/FullPage.jsx"
target = "customer-account.page.render"
Next, a minimal page component is defined. The critical point is that you must use the web components provided by Shopify (such as s-page, s-section, s-grid) instead of standard HTML. The host will reject the entire page if it encounters an unallowed node.
import "@shopify/ui-extensions/preact";
import { render } from "preact";
export default () => {
render(<MyPage />, document.body);
};
function MyPage() {
return (
<s-page heading="Impact">
<s-section>
<s-text>Yükleniyor…</s-text>
</s-section>
</s-page>
);
}
How to Deploy an Extension?
Extension code is not hosted on your own server; when you run the shopify app deploy command, Shopify compiles the code and serves it from its own infrastructure.
shopify app deploy
The command will ask if you want to "publish a new version"; once you confirm, the extension goes live. Everything up to this point follows the documentation; the real learning begins after deployment.
How to Create a New Page Under the My Account Section? (Activation Steps)
Deploying a full-page extension does not automatically make the page visible or functional in the "Customer Accounts" menu; you must manually add it via the customer accounts editor to activate it. This step is a separate process, entirely independent of the deployment.
- Go to your Admin panel → Settings → Customer accounts.
- In the top right, Customizeclick on it; an editor similar to the theme editor will open.
- Add the relevant full-page extension from the app/extension section in the editor.
- The editor will automatically prompt you to add it to the header menu; please confirm.
- Save / Publish and publish.
Risk to Avoid: Simply deploying the extension and manually adding a link to the navigation menu is not enough. The page will continue to show a "There's a problem loading this page" error until it is added and activated via the customer account editor; these two steps (deployment and activation) are independent of each other.
Why Does the "There's a Problem Loading This Page" Error Occur?
This error occurs when the activation step mentioned above is skipped, even if the extension has been successfully deployed and the link added to the navigation menu; this is the most time-consuming issue. There are no JavaScript errors related to the extension in the browser console, only irrelevant warnings related to analytics and CSP. This indicates that the issue is not in the rendering phase, but in the page resolution.
Other Common Errors and Misdiagnoses
Beyond deployment and activation, there are four other situations that waste time during the diagnostic process. The table below summarizes the root cause and the correct diagnostic approach for each.
The fastest way to diagnose correctly is to strip it down to a minimal "hello world" page to prove that the issue lies in the activation, not the code.
Self-Service Content Management for Store Owners
Once the page is up and running, the natural next step is to move texts to the extension settings so the store owner can edit them without needing a developer. Fields are defined in the configuration file.
[extensions.settings]
[[extensions.settings.fields]]
key = "heading"
type = "single_line_text_field"
name = "Page title"
[[extensions.settings.fields]]
key = "intro"
type = "multi_line_text_field"
name = "Introductory text"
On the code side, these values are read via a signal and updated in real-time; if a field is empty, the default defined in the code takes over.
const settings = globalThis.shopify?.settings?.current ?? {};
const heading = settings.heading?.trim() || "Default heading";
Thanks to this structure, daily text changes can be handled via self-service in the editor; only structural changes require a new deployment.
Architecture: Is a Separate Backend Server Required?
No, full-page UI extensions do not require a separate backend or hosting. When you deploy, Shopify compiles the code and serves it on its own CDN; the page runs within the customer account experience, consistent with the store's branding. Maintenance costs are significantly lower compared to a traditional application server because there is no need for server capacity planning, updates, or monitoring.
Quick Checklist
- Create a separate extension for the full-page target.
- Use only official web components; do not use standard HTML.
- Publish the new version using shopify app deploy.
- You must add and activate the page from the customer accounts editor; simply adding a link to the menu is not enough.
- Do not type the menu link manually; select it as an app page from the editor/selector.
- Distinguish between analytics/CSP noise in the console and actual errors.
- Move texts to settings fields to leave content management to the store owner.
Such custom UI extension developments are code-level integration tasks that go beyond standard theme customization; Our Shopify integration solutions service manages platform-level customizations, such as customer accounts, end-to-end, including deployment and activation steps. For rapid diagnosis of errors like "problem loading page" after going live, our Shopify technical support and maintenance service steps in with field experience.
Frequently Asked Questions
What does the "There's a problem loading this page" error mean?
This error occurs if the page has not been added and activated from the customer accounts editor, even if the extension has been successfully deployed. Deploying and activating are two independent steps; doing only the first is not enough.
What is the difference between a full-page extension and a block extension?
A block extension is a small component added to an existing page (Orders, Profile, etc.) and can coexist with other targets within the same extension. A full-page extension, however, creates an independent new route with the customer-account.page.render target and requires a separate extension.
Do I need to set up a separate backend server for a full-page extension?
No. Shopify compiles and serves the deployed code on its own CDN. No separate hosting or server management is required, and the maintenance burden is significantly lower compared to a traditional application server.
How should I add the menu link?
Do not type the link manually; a /pages/<id> address added manually to the navigation menu points to an unresolvable link. The correct address is automatically generated by the app page selector in the customer accounts editor.
Can I change page text without deploying?
Yes, if the text has been moved to settings fields such as single_line_text_field and multi_line_text_field, the store owner can change these texts from the editor. Only structural (component, logic) changes require a new deployment.
Conclusion
While adding a full-page experience to Shopify's new customer accounts may seem technically simple, in the real world, the "I deployed it but it won't open" issue takes up the most time. The key lesson is this: publishing a full-page extension and activating it from the customer accounts editor are two separate steps. Once you grasp this, everything else—such as component selection, the deployment flow, and making text editable—becomes a clear and repeatable process. Shopify may update interface and version details from time to time; therefore, we recommend using this guide in conjunction with the official documentation.
If you would like to develop a custom page for customer accounts on your own Shopify store or resolve a similar activation issue with an existing extension, our integration solutions service you can contact our team about.
