Blog

Building a Shopify app: lessons from a prescription-lens app

What goes into a Shopify app, from theme app extensions to the merchant admin, with lessons from FrameRx, an app for selling prescription lenses.

By Rokibul Hasan7 min read

  • Shopify
  • E-commerce

Shopify makes it easy to start selling, but every store eventually hits something the platform does not do out of the box. Sometimes an existing app from the Shopify App Store solves it. Sometimes nothing fits, and the answer is a custom Shopify app built around how your business actually works.

I build Shopify apps, and the most recent is FrameRx: an app that lets any eyewear store sell prescription lenses, with a guided lens flow on the storefront, a verification queue for the merchant and a no-code rule builder behind both. Two earlier Shopify apps of mine, from the same eyewear space, are public on GitHub. This guide explains what goes into a Shopify app and shares the lessons from building FrameRx that apply to almost any custom app.

The problem FrameRx solves

Selling a frame on Shopify is easy. Selling a frame with the right lenses in it is not. The shopper has a prescription on a piece of paper, four or five decisions to make about lens thickness and coatings, and no idea which of them apply to their eyes. Most stores solve this with an email thread after checkout.

FrameRx puts that whole conversation on the product page. The shopper picks how they will see — single vision, progressive, reading or non-prescription — then enters or photographs their prescription and gets lens options filtered to what their eyes actually need. The frame, the lenses and the prescription arrive as a single order that the merchant can verify and send to a lab.

Public app or custom app?

The first decision is what kind of app you are building:

  • A public app is listed on the Shopify App Store, installable by any merchant, and goes through Shopify's review before it is listed. It makes sense when you want to sell the app to many stores.
  • A custom app is built for one store, or one organisation's stores, and installed directly without an App Store listing. It makes sense when the app exists to run your own business.

The code is very similar either way. What changes is the review process, the billing setup and how much the app has to handle stores and themes you will never see. FrameRx is built to work in any eyewear store, which shaped many of the decisions below.

The pieces of a Shopify app

Most Shopify apps are built from the same parts:

  • A backend — your own server and database — that holds the app's data and logic.
  • An embedded admin interface that merchants open inside their Shopify admin, built with Shopify's App Bridge and its Polaris design system so it looks and feels like part of Shopify.
  • The Admin API, mainly GraphQL, for reading and writing store data such as products, orders and customers.
  • Webhooks, so Shopify can tell your app when something happens — an order is created, a product changes, the app is uninstalled.
  • Theme app extensions, which add your app's interface to the storefront through app blocks and app embed blocks, without editing the merchant's theme code.
  • An app proxy, when the storefront needs to talk to your server.
  • Metafields, for storing extra data on Shopify objects such as products and orders.
  • Shopify's billing API, if you charge merchants for a public app.

Not every app needs every piece, but this is the toolbox, and a developer should be able to tell you which parts your app uses and why.

Lesson 1: Put the logic in data, not code

The hard part of FrameRx was not technical. It was that no two eyewear stores sell lenses the same way. One carries three thicknesses, another six. One offers blue-light filtering free, another charges for it. One will not sell a 1.50 lens above a certain strength because it would be unwearable.

Shipping a fixed flow would have meant a separate version for every merchant. So the flow is data instead: steps, options and conditional rules that the merchant assembles in the admin, with no code and no theme edit.

That is what the rule engine is for. A rule reads the prescription and changes what the shopper sees — when SPH is beyond ±4.00, hide Standard 1.50 and recommend Ultra thin 1.67 — so the upsell becomes optical advice rather than a banner, and the merchant never has to explain lens physics in a product description.

The general lesson: whenever merchants would otherwise send you change requests, give them a setting instead. Every request that would have been a change — another coating, a different limit, a step reordered — became something the merchant could do themselves in the builder. That is the difference between an app and a series of one-off projects.

Lesson 2: Do not make merchants edit their theme

Older Shopify apps often asked merchants to paste code snippets into their theme. It works until the merchant changes theme, updates it, or pastes the snippet in the wrong place, and then your app quietly breaks.

FrameRx installs like any Shopify app and renders through the storefront using Shopify's theme app extensions. Merchants add the app's block where they want it in the theme editor, and it keeps working across themes nobody has seen. If an app needs to appear on the storefront, this is the way to build it today.

Lesson 3: Support every path the customer might take

Prescription data has to survive the trip from shopper to lab, and shoppers arrive in different states. Some type their values into validated SPH, CYL, AXIS and PD fields. Some would rather photograph the prescription and confirm what was read from it. Some want to send it later.

FrameRx accepts all three, and all three end in the same place: an order the merchant can open, check the typed values against the uploaded image, and export as a lab sheet — because a lab does not care which route the numbers took.

The lesson applies far beyond eyewear. Design for the customer who is not ready yet, and make every path converge on one shape of data your business can process.

Lesson 4: Keep the order whole

A common shortcut is to sell the frame as one product and the lenses as a loose add-on, and hope they stay connected. They do not, reliably, and the merchant ends up matching items by hand.

In FrameRx the frame, the lenses and the prescription stay together as one order. Whatever your app adds to a purchase — configuration, uploaded files, custom measurements — make sure it travels with the order rather than beside it.

Lesson 5: Design the merchant's side, not just the shopper's

The admin side is the half that decides whether a store keeps an app installed. FrameRx gives merchants a queue of orders that need review, what has been verified, and what has gone to the lab. The shopper-facing flow gets the attention in demos, but the merchant's daily routine is what makes or breaks the app.

Ask yourself who uses the app every day after launch. For most Shopify apps, it is the merchant's staff, not the shopper.

Getting through Shopify App Store review

If you are building a public app, plan for review from the start:

  • Use Shopify's own building blocks — App Bridge, Polaris and theme app extensions — rather than workarounds.
  • Keep the storefront fast. Apps that slow a store down make merchants unhappy.
  • Handle installation, uninstallation and data requests properly.
  • Charge through Shopify's billing system rather than your own payment flow.
  • Write a clear listing that says exactly what the app does.

Shopify publishes its requirements and updates them, so read the current version before you submit.

How long does a Shopify app take, and what does it cost?

It depends on how much of the app is storefront, how much is admin, and how many stores and themes it has to support. A custom app for one store is usually quicker than a public app built for any store. My guide to what drives the cost of an app explains the general drivers, and the MVP guide explains how to keep a first version small.

What to prepare before you brief a developer

A Shopify app brief does not need to be technical. These answers let a developer scope the work properly:

  • The problem in your store today, and how you handle it now, even if the answer is "by email after checkout".
  • Who uses each side: what shoppers see on the storefront, and what your staff need in the admin.
  • Your theme, and whether you change themes often.
  • The data involved: products, variants, customer uploads, measurements or anything else that has to travel with the order.
  • Whether it is for your store only or for selling to other merchants.

FAQ

Do I need Shopify Plus for a custom app?

No. Custom apps and storefront features work on regular Shopify plans. Some checkout customisations are limited to Shopify Plus, so check early if your app needs to change the checkout itself.

Should I build a custom app or use an existing one?

Try existing apps first. If one does 90% of what you need, use it. Build custom when your process is genuinely different — like the lens rules in FrameRx — or when combining several apps creates more problems than it solves.

Can a Shopify app use AI?

Yes. An app can call AI models from its backend, for example to read an uploaded document, describe products or answer shopper questions. The same care applies as anywhere: let people check what the AI produced. I covered this in integrating AI into your app.

To see FrameRx in more detail, read the FrameRx case study. If you need a Shopify app built, send me a short brief — what your store does, and what the platform does not do for you today.