Guide · Conversion
Prescription lens configurator for Shopify: the UX that actually sells lenses
A lens configurator is the step-by-step selector that turns a frame into a complete prescription pair — lens type, thickness, coatings, tint and prescription — with the price building as the shopper goes. Done well, it is the highest-leverage page on an optical store. Here are the patterns that work, and the ones that quietly kill the lens sale.
Key takeaways
- Order the steps by dependency: lens type → thickness → coatings and tints → prescription.
- Recommend, don’t interrogate. Shoppers shouldn’t need to know what “1.67” means to pick the right lens.
- Show an itemised running total at every step — hidden lens pricing is the fastest way to lose trust.
- Track lens attach rate and step-by-step drop-off, not just conversion rate.
What a prescription lens configurator does
On a normal product page a shopper picks a colour and a size. On a prescription frame they have to make four or five decisions they’ve never been taught to make, each with a price. The configurator’s job is to walk them through those decisions in the right order, recommend sensible defaults, price everything transparently, and hand a complete, valid lens build to the cart.
Eight patterns that lift lens sales
1. Start with lens type, described by use
“Single vision — one prescription for distance or reading”, “Progressive — near to far in one lens, no line”, “Office — screen and desk distance”. Describe what the lens is for; the optical name is secondary. Lens type comes first because it decides which indexes, coatings and prescription fields apply next.
2. Recommend the thickness
Index is the step shoppers understand least. Show the options as thicker-to-thinner with a visual edge profile, and mark a recommended option. Stronger prescriptions generally benefit from higher-index lenses, and some frame styles (rimless and semi-rimless) need specific lens materials — encode your opticians’ rules instead of leaving the choice to guesswork.
3. Price every option, and keep a running total
Show the price next to each option and an itemised lens total that updates as the shopper moves. If the first time a shopper sees the lens price is in the cart, you’ve already lost a share of them.
4. Show coatings and tints, don’t just name them
Tints, gradients and photochromic lenses are visual products. A live lens preview — and for photochromics, an indoor-to-outdoor slider — does more for add-on uptake than any description.
5. Flag what needs a fitting
Progressives and some multifocals usually need measurements taken in store. Badge them clearly (“In-store fitting”) so the shopper knows the next step before paying, not after.
6. Make the prescription step forgiving
Validate per-eye SPH, CYL and Axis in the right steps and ranges, ask for ADD only when the lens type needs it, and always offer “add it later” and “book an eye test”. A configurator that demands the prescription up front turns every shopper without one into a bounce.
7. Design for mobile and for Arabic
Most eyewear browsing happens on phones, and in the Gulf a large share of shoppers browse in Arabic. One step per screen, large tap targets, and a layout that mirrors cleanly right-to-left.
8. Don’t make it a separate site
The configurator belongs on the frame page, inside your theme, ending in your Shopify cart and checkout. Redirecting to an external lens tool breaks analytics, discounts and trust.
Common mistakes
- Every option on one long page instead of guided steps.
- Optical jargon with no plain-language explanation.
- No path for non-prescription or reading glasses, forcing shoppers through Rx fields they don’t need.
- Lens charges added as removable add-on products, so the cart can drift out of sync with the frame (see how to model lens add-ons).
What to measure
| Metric | What it tells you |
|---|---|
| Lens attach rate | Share of frame orders that include prescription lenses — the number this whole page exists to move. |
| Step drop-off | Where shoppers leave the configurator. A spike at the Rx step usually means “add later” or “book a test” is missing or hidden. |
| Average lens value | Revenue per lens build — moves with index recommendations and coating presentation. |
| Eye-test bookings | Shoppers recovered from “no prescription” — follow them through to branch visits and orders. |
LensPath is built around these patterns and runs in production on UAE optical storefronts. Whether you install it or build your own, use the step order and the metrics above as your spec.
Sell the lenses, not just the frame.
LensPath adds a guided prescription-lens configurator and in-store eye-test booking to your Shopify store. 14-day free trial.