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 — 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.