ux / ui shopify liquid javascript health insurance integration configurator

lens
× medife

The page didn't exist. Starting from a concept the client wanted to make work — weeks of meetings and debate — the result is a Shopify experience that knows exactly who you are and what you're covered for.

view live ↗
01 — the challenge

A complex problem. No existing reference.

Medife affiliates have 4 different plans, each with different coverage — different products, prices and limits. The client needed a way for users to shop knowing exactly what they were covered for before browsing. Nothing like this existed in their Shopify store.

4
plan types
Indie, Plata, Oro & Platinum — each with completely different coverage logic.
0
prior reference
Built from scratch. No spec, no template — just an idea and many meetings to understand it.
1
developer
Full UX definition, Shopify development and integration — all handled solo.
02 — the entry flow

First: who are you?

Every Medife affiliate lands on the same page — but their experience is different depending on their plan. A modal captures that information before anything else. One selector. Entire store personalizes.

01 select plan
Plan selector
02 plan options
Plan options
03 coverage active
Coverage active
03 — the configurator

Every step shows what's covered.

Once a frame is selected, a lens configurator guides the user through graduation type and crystal selection. Each option clearly marked as covered or paid — no surprises at checkout.

Graduation type selector
Step 1 — Graduation type Monofocal & Bifocal marked as "Cubierto por tu plan". User sees exactly what their plan includes before choosing.
Crystal type selector
Step 2 — Crystal type Standard options covered, premium shown with price. Transparent comparison — covered vs upgrade.
04 — the result

A store that knows who you are.

After plan confirmation, the entire store adapts — the catalog shows only products tagged as covered, each with a MEDIFÉ badge. The coverage breakdown shows validity, limits and included treatments.

Covered catalog
Filtered catalog — only covered frames shown with MEDIFÉ badge. Filter by gender, coverage price range.
Coverage breakdown
Coverage breakdown — armazones, lentes, validity period and annual uses — personalized per plan.
05 — under the hood

What you don't see.

The members' experience lives inside the same store regular customers use. I also redesigned the whole LENS theme in code, so both experiences share one clean base.

Full theme redesign
The LENS theme rebuilt in Liquid and JavaScript from the designer's templates: tokens first, then components, then sections.
One source for prices
A single snippet calculates the member price on cards, product page, cart and quick buy. It renders on the server, so prices don't jump on load.
Covered, or the exact difference
Members never see the list price. They see "Covered" or exactly how much they pay on top, so upgrading is a clear choice.
Plan that follows you
Works without an account. The plan travels with the cart and is saved to the customer profile after login.
Checkout discounts
Each benefit code in the agreement is linked to its own checkout discount, which keeps reconciliation with the insurer simple.
Two stores in one
Members-only landing, menu, collections and templates, without changing anything for regular customers.
06 — technical stack

Built inside Shopify. No plugins.

Everything was built natively in Shopify Liquid and JavaScript — no third-party apps. The plan logic, coverage display, configurator and catalog filtering all custom-built.

Shopify Liquid
Custom sections, templates and metafield logic to drive plan-based personalization.
JavaScript
Plan selector, coverage activation, configurator flow — all vanilla JS, no framework.
Metafields & Tags
Product tagging system to filter catalog per plan. Coverage data stored in Shopify metafields.
Custom UX
Full UX defined from scratch through client workshops — no existing reference.
Medife Integration
Coverage logic mapped to 4 plan types with different rules, limits and included products.
Lens Configurator
Multi-step selector showing real-time coverage status at each configuration step.