Hi, I am currently building a Customer Account UI Extension to bridge the gap between two Shopify stores within the same organization.
Setup:
Store A (Online): Where the customer logs in.
Store B (Retail): Where the physical store orders are stored.
I have already implemented a list view extension in Store A that successfully fetches and displays a list of orders from Store B. Now, I am looking to build a Full Page Extension that serves as a “Retail Order Details” page.
Challenge:
I want to provide the customer with a detailed view of their Retail order (including tracking numbers, fulfillment status, and line items) without leaving Store A.
Specific Question:
UI Consistency: Since Checkout UI components are limited, is it possible to achieve a UI that closely matches the native Order Details page, or use boilerplate?
Hey @lynthius you can definitely achieve a UI that closely matches the native Order Details page using Customer Account UI Extensions.
For the Retail Order Details page, you’d probably just want to use the Page component for the outer wrapper (which handles the title, subtitle, and page-level actions), Section components to organize your content areas (fulfillment status, line items, etc.), and ResourceItem for displaying individual line items in a style consistent with the native order index. You also have access to checkout components like Badge (great for fulfillment status), Text, Grid, and Image to build out the details.
The Customer Account UI Extensions components documentation has a decent overview of available components, and the Build new pages in customer accounts guide walks through the full setup process step-by-step if you haven’t checked that out yet. Hopefully I’m understanding the ask properly, but this should align with native/merchant branding in the order accounts page. You should be able to pull the full order object including fulfillments and tracking info on your end for Store B (using the Admin API for example via network access), then pass it over to the extension on Store A.
Hope this help, let me know if I can clarify anything
Thanks for the detailed response! Quick follow-up question - is it possible to replicate the native order timeline visual in Customer Account UI Extensions? And what should I use - Polaris Web Components or Polaris React?
I’m trying to recreate the order status timeline from the native Shopify order details page (see screenshot).
I’m using <s-icon> for icons and basic components, but struggling with the dashed connecting line. Is there a native component for this timeline pattern, or what’s the recommended approach to match the native styling 1:1?
EDIT:
Is it even achievable to display details about every step? Like this one?
Just to clarify on the framework piece first here. Customer Account UI Extensions use Polaris web components, both their own customer-account-specific components and components from the broader checkout library. You can either use the React approach (importing from @shopify/ui-extensions-react/customer-account with components like BlockStack, InlineStack, Text, Icon) or the newer Polaris web components using <s-*> syntax. Both work in the sandboxed environment, though we do recommend using the web components approach going forward.
For the order timeline visual, I totally get wanting to match that native look! There isn’t a dedicated timeline component out of the box, but you can get close by composing primitives. For example, as your vertical container, then for each step combining an (status indicator) with components for the label and timestamp. helps with visual separation. One caveat: you can’t override CSS in UI extensions since components inherit the merchant’s brand settings. For connecting lines between steps, you can use Unicode characters (like · dots) stacked vertically inside a to simulate a dotted line effect, it’s a nice workaround that keeps things looking clean, but I get it’s not quite exactly the same:
I have a couple of follow-up questions regarding the future of these extensions:
Native Pages Evolution: Do you know if Shopify plans to eventually rewrite the native Order details pages (and others) using these same Polaris web components, or will the native parts remain as they are for the foreseeable future?
Polaris Component Documentation: I’m a bit confused by the current division of components between different UI extensions. For instance, the Customer Account UI documentation seems quite limited - under “Structure”, it only lists Page and Section (but you can use much more). However, I’ve also noticed that components from the Checkout UI library, like ProductThumbnail, work perfectly fine in Customer Account extensions even though they aren’t explicitly listed there.
Is this just a matter of the documentation still catching up with the implementation, or is there a conscious restriction on which elements we should be using? It feels a bit like “trial and error” right now. It would be great to know if we can officially rely on the broader Polaris/Checkout component library for Customer Account extensions, or if we should stick strictly to what’s currently documented. Maybe it’s only me.
Thanks again for your help and for pointing me in the right direction with the web components approach!
Hey @lynthius really glad it came together, that screenshot looks great!
On the native pages question, I can’t speak to specific roadmap plans there, but the investment in Polaris web components across the platform is definitely the path forwarded for the immediate future.
On the docs piece, totally valid feedback. In my experience checkout components like ProductThumbnail do work in Customer Account extensions (as you’ve seen), but I’ll flag this internally to get some clarity, because you’re right that trial and error isn’t ideal.
Really appreciate the feedback, let me know if anything else comes up!
