Dev.to WebDev 🛠 Dev 👁 0 📖 4 min read

Headless Shopify for a Small Ceramics Shop: Overkill or the Cheaper Option?

We just launched a headless Shopify store for Lady Blue, a small brand selling hand-painted Bolesławiec ceramics. It took us about four weeks. One of the things behind that choice was a parcel locker picker, which inside

We just launched a headless Shopify store for Lady Blue, a small brand selling hand-painted Bolesławiec ceramics. It took us about four weeks. One of the things behind that choice was a parcel locker picker, which inside Shopify would have meant a bigger plan.

The frontend is our own Next.js app, and the products and the checkout stay in Shopify. If you want to click around before reading, the store is live at ladyblue.pl.

Shopify's own docs warn you off

Shopify's docs are pretty direct about it. The About headless commerce page says: "A headless storefront costs more to build and run than a theme."

The same page asks you to make sure the merchant "accepts the added cost and complexity" and "has developers to maintain the storefront after launch." Fair enough. With a theme, the cart and the apps are somebody else's job.

Why we went headless anyway

Lady Blue needed a look of its own, and we couldn't get that out of a theme.

Page speed mattered too, though I have no measurements to show for it yet.

And there were the fees. A lot of what this shop needed sat behind paid apps or a higher Shopify plan, and each of those is a recurring cost.

Where does the customer pick a locker?

Lady Blue ships with InPost parcel lockers. The customer has to choose one somewhere before paying.

The official InPost app has a Polish listing, and it asks for the Shopify Advanced plan or active "Carrier-Calculated Shipping". Its interactive locker map is listed as available only for Shopify Plus.

Shopify's plans page (prices in USD) puts Advanced at $399 a month with monthly billing. Plus starts at $2,300 a month. Adding your own picker to the checkout's shipping step needs Plus as well, because checkout UI extensions for the information, shipping and payment steps "are available only to stores on a Shopify Plus plan."

Third-party InPost apps exist too. This one costs $19 a month, and its listing says "Carrier Calculated Shipping is required for the app to work (unavailable on the Basic Shopify plan)."

So we built the picker ourselves. It works in the cart.

Jobs a theme would have done for us

The first version of our cart let you add more units than were in stock. Every piece in this shop is hand-painted. We fixed it, and add-to-cart now stops once you have added all the units available in stock.

Themes add to the cart through Shopify's Cart AJAX API, and when the requested quantity is too high, "the cart will instead add the maximum available quantity."

Headless carts go through the Storefront API. Cart mutations report stock problems in a warnings field, and ProductVariant.quantityAvailable gives you the number.

Apps are the bigger gap. Shopify's docs for Hydrogen, its own headless framework, say apps often add app blocks or embeds to the theme, and a Hydrogen storefront "doesn't render them, because they're Liquid, which only an online store theme renders."

Our "build a set" wizard shows a whole set of ceramics on one table. It is our own feature, and in a Shopify theme it would be hard to do without a paid app.

We wrote no checkout code

Checkout and payments stayed on Shopify's side. The cart gives you a checkoutUrl, and per the cart docs it "redirects customers through Shopify's web checkout."

The Hydrogen go-live guide says the same thing shorter: "Checkout still runs on Shopify."

Products stay in Shopify too. The owner edits all descriptions and products in Shopify admin, in Polish, German and English. The store sells to Poland and the Netherlands.

Those translations reach the frontend through the Storefront API, where the @inContext directive accepts a language argument since API version 2022-04.

Everything else on the site, we change as part of the maintenance fee. Shopify's Hydrogen markets page notes that "your app's own interface text, such as button labels, still needs your app's translation system," and on this project that system is ours. So for anything outside the products, the owner has to come to us.

So, overkill or the cheaper option?

For Lady Blue, the locker picker would have needed a bigger plan, and the set builder would have been hard to do without a paid app. We built both, and the frontend is ours to look after.

Whether that works for another store depends on the project. I don't have a rule for it.

When a theme and free apps cover what a store needs, I think the theme is the cheaper option, and the warning from Shopify's docs applies in full.

The store is days old. I have no conversion or speed numbers yet, so I'm making no claims about results.

I'm after specifics here, like a plan fee or one app you did not want to pay for every month. If you have built a store for a small shop, headless or on a theme, what tipped the decision for you?

📰 Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes — full credit and traffic to the original publisher.