dotCREA×Shopify Partners
Get a quote
TREN
dotCREA
TREN

Shopify Headless & Checkout: free the storefront, keep payment on Shopify

We build your own front end with the Storefront API and Hydrogen, and customise the payment step inside Shopify's secure infrastructure with Checkout Extensibility.

What is headless commerce?

Headless commerce means separating the store's front end from the back end (products, stock, orders, payment). On Shopify that means building the storefront separately with a framework such as Hydrogen or Next.js and connecting it to Shopify data through the Storefront API. Payment, orders and security stay on Shopify; you shape only the visible part of the experience.

On the checkout side, Checkout Extensibility now replaces checkout.liquid: app extensions can add custom fields, campaign rules, shipping selection logic and upsell blocks to the payment step. That structure is unaffected by Shopify updates and does not break PCI compliance.

Payment stepCheckout extensionsdelivery note · gift wrapping · business invoice fieldsFunctionsdiscount rules · shipping and payment limits · campaign logicAutomationorder tagging · notifications · back-office flows
Every requirement at the payment step belongs somewhere different: visible fields go in extensions, rules in Functions, back-office work in automation. Which layer is used depends on the plan and the need.

Is headless right for you?

When it fits
✓You are aiming for a highly bespoke, campaign- and content-led storefront experience
✓You want to manage a single front end across a multi-market, multi-language setup
✓You are targeting the highest possible mobile speed scores
✓You want to feed the storefront from your own CMS or PIM
When it isn't needed
–Your catalogue and campaign structure is served well by a standard theme
–You cannot commit ongoing development capacity in your team
–The priority is launching quickly and keeping costs low

How we run the project

01
Feasibility and decision
We measure the cost, speed and operational difference between your current theme and headless, and decide together whether it is genuinely needed.
02
Architecture design
Storefront API usage, caching strategy, content source and hosting architecture are settled.
03
Storefront development
Product, collection, search and cart flows are built with Hydrogen or Next.js, and the design system is set up.
04
Checkout extensions
Checkout Extensibility adds custom fields, shipping rules, campaign logic and upsell blocks to the payment step.
05
Integration and tracking
Payment, shipping, ERP and analytics connections are built, and server-side tracking is verified.
06
Launch and performance tracking
Load testing, Core Web Vitals measurement and post-launch monitoring; error and conversion metrics are reported.

Frequently asked about headless and checkout

No. In a headless setup the payment step stays on Shopify; the storefront hands the cart over to Shopify checkout. That keeps your PCI compliance and accelerated payment methods such as Shop Pay intact.