How to Add a Full-Page UI Extension to Shopify Customer Accounts?

To add a full-page UI extension to Shopify Customer Accounts, create a separate extension using the customer-account.page.render target and publish it with shopify app deploy. Deploying isn't enough: until the page is added and published under Settings > Customer accounts > Customize, it shows the "There's a problem loading this page" error. A full-page target can't share its extension.

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.

1. In Shopify admin, go to Settings → Customer accounts.
2. Click Customize in the top right; an editor similar to the theme editor opens.
3. Add the relevant full-page extension from the app/extension section in the editor.
4. The editor automatically prompts you to add the page to the header menu; confirm it.
5. Click Save / Publish to publish your changes.

Common pitfall: Deploying the extension and manually adding a link to the navigation menu is not enough. The page keeps showing the "There's a problem loading this page" error until it is added and activated in the customer accounts editor; deployment and activation are two independent steps.

Why Does the "There's a Problem Loading This Page" Error Occur?

This error appears when the activation step above is skipped, even if the extension deployed successfully and the link was added to the navigation menu. It is the issue that eats up the most time. The browser console shows no JavaScript errors from the extension, only unrelated analytics and CSP warnings. That tells you the problem is not in rendering but in how the page is resolved.

Other Common Errors and Misdiagnoses

Beyond deployment and activation, four other situations tend to waste time during diagnosis. The table below summarizes the root cause and the right way to diagnose each one.

The fastest way to the right diagnosis is to strip the page down to a minimal "hello world" and prove that the problem is activation, not code.

Self-Service Content Management for Store Owners

Once the page is up and running, the natural next step is to move the copy into extension settings so the store owner can edit it without a developer. The 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"

In the code, these values are read through a signal and update in real time; if a field is empty, the default set in the code is used.

const settings = globalThis.shopify?.settings?.current ?? {};

const heading = settings.heading?.trim() || "Default heading";

With this setup, the store owner can make everyday text changes in the editor; only structural changes need 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 copy into settings fields so the store owner can manage content.

Custom UI extensions like this are code-level integration work that goes beyond standard theme customization. Our Shopify integration solutions service handles platform-level customizations such as customer accounts end to end, including deployment and activation. If you run into errors like "problem loading page" after going live, our Shopify technical support and maintenance service brings hands-on experience to diagnose them quickly.

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 to the navigation menu by hand points to a page that cannot be resolved. The correct address is generated automatically 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

Adding a full-page experience to Shopify's new customer accounts may look technically simple, but in practice the "I deployed it but it won't open" problem takes up the most time. The key lesson: publishing a full-page extension and activating it in the customer accounts editor are two separate steps. Once that is clear, everything else (component choice, the deployment flow, making text editable) becomes a clear, repeatable process. Shopify updates interface and version details from time to time, so we recommend using this guide alongside the official documentation.

If you would like to build a custom customer accounts page for your Shopify store or fix a similar activation issue in an existing extension, you can contact our team about our integration solutions service.