Custom checkout flows for headless storefronts via the Storefront API

devacqscale
Visitor
1 0 1

Hey everyone, we've been trying to figure out a solution to this issue for a while and are having a lot of trouble.

 

We're trying to create new headless storefronts as custom apps. What we're experiencing though is that our new storefronts (that we are building with React frameworks such as Next.js and Hydrogen) redirect their checkout to the shop's primary, Online Store liquid-based checkout page. Naturally, this checkout page has the style, branding, domain, and payment options of the online store, rather than the custom storefront we've created.

 

This obviously isn't conducive to UX and sales, so we're trying to figure out a way to make our custom apps have custom checkout pages. The problem is that if we attempt to change something about the checkout flow for that individual custom app, the changes also reflect in the Online Store's checkout page as well. We need a way to make the UI elements in the checkout unique to each storefront. 

 

Is there any way to customize the checkout experience such that it's different from the main checkout flow on the Shop? We primarily need to be able to rebrand the checkout with different styles/logos, but being able to customize payment options would also be great. 

 

Appreciate any help.

Replies 2 (2)

moaazbhnas228
Shopify Partner
11 2 5

We have exactly the same problem

SJCapaldi
Shopify Partner
4 0 0

I believe this feature is only available to Shopify Plus stores. You can do basic customisation I believe but you cannot completely customise the checkout flow unless you are on a Plus plan. It is a down side as its so costly for the Plus plan but I think its a small tradeoff for being able to customise most  of the platform in my opinion.

Creative Frontend Engineer specialising in Headless Commerce