A Custom Storefront on a Shopify Backend

Shopify and Fontis Commerce Stack

Shopify already runs your business. The catalogue, the stock, the orders and the checkout all live there, and a composable build leaves them exactly where they are.

Fontis Commerce Stack takes on the storefront and everything that has to reach it. We build a custom storefront in place of the theme, with an integration layer behind it that brings search, content, loyalty and in-store systems into Shopify. Your team carries on in the same admin, and what you can build stops depending on what a theme allows.

The Architecture

How a Shopify build fits together

Shopify stays the backend. Catalogue, pricing, inventory, customer records, orders and the admin your team works in every day are all unchanged, and the cart is still handed to Shopify's hosted checkout so Shop Pay, local payment methods, fraud analysis and post-purchase flows keep working as they do now. Nothing about how your business runs day to day moves somewhere else.

What changes is the storefront. FCS replaces the theme with a custom storefront that reads through the Storefront API and the Customer Account API. Where it suits the build, that storefront is a Hydrogen application deployed to Oxygen. Retailers come to us for this when the storefront has to do something the section model cannot express, or when the theme has become the reason every change takes a fortnight.

The composable part sits behind that. A search index, a CMS, a PIM, a loyalty platform, POS and fulfilment systems connect through the FCS integration layer into Shopify, so Shopify remains the system of record and everything else stays aligned with it. Where a separate ERP does govern allocation and fulfilment, the same layer handles that connection too, which is the shape of our Apparel21 work.

The Frontend

When the FCS storefront is built on Hydrogen

Hydrogen is Shopify's own toolkit for custom storefronts, and Oxygen is the edge network it deploys to. When we build the FCS storefront on Hydrogen, you get Shopify's frontend platform and our integration layer at the same time, rather than choosing between them.

Oxygen Hosting, No Extra Bill

Oxygen runs Hydrogen storefronts on Shopify's global edge network at no extra charge on paid Shopify plans, with preview environments for every branch. Compared with self-hosting a headless frontend, it removes the infrastructure, deployment and scaling work that going headless usually brings with it.

Server Rendering by Default

Pages render on the server and stream to the browser, so the first paint does not wait for a JavaScript bundle to download and boot. That is what lets a custom storefront hold its own on Core Web Vitals without giving up any control over the frontend.

Shopify Data Without the Plumbing

Hydrogen ships conventions for the Storefront API, cart state, customer sessions and caching, so the work that every headless Shopify build otherwise repeats is already solved. We spend the budget on what makes your storefront different instead.

Composable Data on the Same Page

This is what FCS adds to a plain Hydrogen build. A Typesense or Algolia index, CMS content, PIM attributes and store-level availability are served through the integration layer, so a route can compose them with Shopify data in one render without waiting on a slow system somewhere behind it.

Shared Components Across Brands

The component library, data layer and integration code are shared between storefronts, with per-brand theming and content on top. A second or third brand reuses that work instead of starting from an empty repository.

Not Tied to One Host

The integration code sits outside the storefront rather than inside it. If you later need to move off Oxygen or bring in another system alongside Shopify, neither is a rewrite.

Shopify's Roadmap

Hydrogen is becoming framework-agnostic, which suits a composable stack

Shopify is rebuilding Hydrogen as a toolkit rather than a framework. The commerce primitives move into a framework-agnostic core written in plain JavaScript, covering cart, products and collections, Shop Pay, a typed Storefront API client and analytics, with thin bindings on top for whichever frontend framework you use. React bindings came first and Vue bindings have since landed, with Svelte and Remix 3 announced. The core runs anywhere a fetch call does, so Oxygen, Cloudflare Workers, Node and Deno are all viable hosts.

That matters for a composable build. Until now, using Shopify's first-party primitives meant committing to React and, in practice, to Oxygen. As the core generalises, the storefront can use Shopify's own cart and Shop Pay handling without inheriting Shopify's framework and hosting decisions. It is the same argument composable commerce makes everywhere else in the stack, applied to the frontend.

The direction suits the way we build. Shopify is loosening the frontend while the backend stays Shopify, which is the arrangement we recommend anyway. Fontis Commerce Stack does the equivalent work on the other side, connecting search, content, marketing and fulfilment systems into Shopify without any of them having to duplicate what Shopify already holds. A build that uses both is less locked in at either end.

Shopify Surfaces

What we build against

Shopify exposes distinct APIs for distinct jobs, and using the right one for each flow is what keeps a build stable as the catalogue and order volume grow.

Storefront API

Products, collections, metaobjects and cart operations for the customer-facing storefront, queried explicitly so a single page can compose merchandising data, CMS content and search results in one render.

Admin API and Webhooks

The backend flows: order ingestion, inventory updates, fulfilment status, product and price writes. Webhooks drive near real-time reaction, with bulk operations doing the heavy lifting for catalogue-wide work.

Customer Account API

Sign-in, order history and account management on a custom storefront, so customers get one identity across the storefront, the checkout and anything else you connect to it.

Metafields and Metaobjects

Structured content and product attributes modelled inside Shopify where that makes sense, which keeps merchandisers editing in the admin they already know.

Shopify Functions

Discount, delivery and payment customisation logic that runs inside Shopify's own pipeline. On Plus this is also where checkout customisation lives, through Checkout Extensibility.

Shopify POS

In-store transactions landing against the same stock and customer records as online trade, which is what click and collect and store fulfilment both depend on.

Around Shopify

What Fontis Commerce Stack adds

Shopify runs the business well. These are the areas where a composable layer earns its place.

A Storefront Without a Theme Ceiling

Product configurators with real logic, discovery journeys the section model cannot express, and large catalogues with navigation built around how customers actually shop. Built as a custom frontend, on Hydrogen and Oxygen where that suits the build.

Other Systems, Connected Into Shopify

Loyalty, POS, warehouse and freight systems all writing back to Shopify through one layer, so stock, orders and customer history stay in the one place your team already checks. Where a separate ERP does govern allocation, such as Apparel21, we design which side owns what before anything is built.

Search You Control

Typesense or Algolia indexed from the same Shopify product and availability data the storefront trusts, with ranking and merchandising rules that belong to you rather than to an app's roadmap.

Multi-Brand and Multi-Region

One integration layer behind several storefronts and several Shopify stores, with the currencies, languages and market rules each brand trades under handled in the same place. Adding a brand means new design, content and market configuration on top of integrations that already exist.

FAQ

Shopify and FCS questions

What retail and technology leaders ask us when they are weighing a composable build on Shopify.

Does this replace our Shopify checkout?

No. The cart is handed to Shopify's hosted checkout, so Shop Pay, local payment methods, fraud analysis and post-purchase flows all keep working. Customising the checkout itself is separate work that depends on your Shopify plan rather than your storefront, and our Shopify Plus page covers what that tier unlocks.

Is this instead of Hydrogen, or with it?

It can be either. The FCS storefront is a custom frontend, and where it suits the build we make it a Hydrogen application on Oxygen. In that case Hydrogen covers the frontend and its hosting; Fontis Commerce Stack covers the integration layer feeding it, which is where search, CMS content, store availability and marketing data come from. A plain Hydrogen build is the right answer when Shopify holds everything the storefront needs and nothing else has to reach it, and we have written about when headless makes sense on Shopify at length.

We already have a Hydrogen storefront. Can you work on that?

Yes. Adding the FCS integration layer behind an existing Hydrogen storefront is ordinary work, and it is a common reason retailers come to us. The usual trigger is a storefront that now needs data Shopify does not hold, such as store-level availability, a loyalty balance or content from a separate CMS. The storefront keeps running while the integration layer is built behind it.

Do we have to build the storefront in React?

Only if the storefront is built on Hydrogen, which an FCS storefront does not have to be. Where it is, React is the answer we would give you for a storefront going into production now, because Shopify's stable Hydrogen is built on it and that is the version Shopify supports for live trade. The rebuilt framework-agnostic toolkit has first-party Vue bindings and further frameworks announced, so Shopify's own cart and Shop Pay handling is no longer limited to React. That rebuild is a developer preview whose API still changes between releases, and we would not put a trading storefront on it yet. We track it closely, and because the FCS integration layer sits outside the storefront, moving the frontend later is a smaller job than it would otherwise be.

Does an FCS storefront have to run on Oxygen?

No. For a storefront built on Hydrogen, Oxygen is the usual choice because it removes the infrastructure work and costs nothing extra on a paid Shopify plan. Other FCS storefronts are hosted elsewhere, and so is a Hydrogen one when there is a reason for it, usually an existing platform commitment elsewhere in the business or server-side work that does not suit an edge runtime. Because the integration layer sits outside the storefront either way, that choice is not locked in at the start.

Do we need Shopify Plus?

Not for a composable storefront. Plus adds checkout customisation, higher API limits, the full set of B2B features and multi-store management, which often matter to the same retailers considering this kind of build. Whether the tier is worth it depends on your order volume and how much checkout logic you need, and we will give you a straight answer during scoping.

Does Shopify stay the system of record?

Yes, that is the design. Products, pricing, inventory, customers and orders keep living in Shopify, and the storefront and every connected system read from it. The only thing we check during scoping is whether something else already governs allocation, transfers and store stock, because an ERP that does needs the boundary drawn deliberately. Where nothing else does, Shopify owning it outright is simpler and we will say so.

We run systems outside Shopify. Where do they fit?

They connect through the same integration layer, in the direction that keeps Shopify current. A loyalty platform, a warehouse system, a CDP, a POS in your stores or a second brand on another platform can all sit around Shopify without any of them becoming a rival source of truth. Our integrations page covers the categories we connect most often.

What happens to our existing Shopify apps?

Apps that work inside the admin or the checkout carry on. Apps that inject into the storefront through theme extensions will not run on a custom storefront, so their functionality is either rebuilt, replaced with a direct API integration, or dropped because it was never earning its keep. We audit the app list during scoping so there are no surprises at launch.

Can our team still work in the Shopify admin?

Yes. Merchandising, pricing, promotions, customer service and order management all stay where your team already works. What changes is the storefront, and how much of its layout and content your team can change without a developer is a scoping decision we make deliberately.

Thinking about a custom storefront on your Shopify backend?

Book a consultation and we will work through what your storefront needs to do, what has to reach it from outside Shopify, and what the integration layer has to carry.

Get in Touch