DEV3 Optica: an eyewear Shopify theme with lens options, a frame finder and a 3D turntable

Requirements

• A Shopify store with the Online Store sales channel
• No app is required. Optional: the free Shopify Search & Discovery app for collection filters, a reviews app that writes the standard rating metafields.

What's in the download

Unzip the download from your DEV3 account first. Do not upload the download itself to Shopify.

• dev3-optica-1.0.0.zip: the theme. Upload this zip as it is; do not unzip it.
• Documentation/index.html: the full guide. Open it in a browser.
• Demo-Content/: products.csv, seed.json, images/, models/lumio-arden.glb and models/lumio-cassio.glb and a README for the manual import.
• LICENSE.txt and START-HERE.txt.

Install the theme

1. In Shopify admin go to Online Store → Themes.
2. Click Add theme → Upload zip file and choose dev3-optica-1.0.0.zip.
3. When the upload finishes, click Customize to preview it in the theme editor.
4. Click Publish when you are ready. Your current theme stays in the theme library.

Import the demo content (optional)

The demo brand Lumio Optics is fictional; every product, review and image is sample content rendered for this theme.

1. Go to Products → Import and upload Demo-Content/products.csv. The CSV has no image URLs.
2. Add each product's images from Demo-Content/images/, following the file names in the demo README.
3. Settings → Custom data → Products: add optica.lens_width, optica.bridge and optica.temple (integers) and optica.fit (single-line text) for the frame-size diagram.
4. Upload the two GLB frames as media on the matching products for the 3D/AR gallery view.
5. Content → Files: upload the section images listed in the README.
6. Create the collections, the pages with their templates (About, Stores, FAQ, Contact), the journal posts and the menus.

A scripted seed that does all of this in one command is available from DEV3 support on request. It runs against your own store with your own Admin API token, and it tags everything it creates so it never touches your other products.

After the import

• Each frame needs a Colour option and a Lens option (for example Clear / Blue-light / Prescription), with a price per lens variant, and finder tags such as face-oval, type-sun, material-acetate and shape-round.
• Set your store's contact email: eye-test booking requests arrive there. Confirm prescriptions with customers directly; the theme never collects prescription values.
• Set up payments, shipping and taxes in Shopify's own settings; checkout is Shopify's.

Updates

Download the new version from your DEV3 account and upload the new theme zip under Online Store → Themes → Add theme. It arrives as a new theme in your library: copy your settings across in the theme editor or re-apply your changes, then publish it.

Set up a frame

1. Create the options Colour (frame colour) and Lens, for example Clear / Blue-light / Prescription, or Standard tint / Polarised / Prescription sun. Price each lens variant.
2. Assign a variant image per colour so the gallery jumps to it.
3. Add finder tags: face-oval, face-round, face-square, face-heart; type-optical, type-sun, type-screen; material-acetate, material-metal; shape-round, shape-rect, shape-cateye and so on.
4. For the size diagram, add the metafields optica.lens_width, optica.bridge, optica.temple (integers) and optica.fit (single-line text).

Optica product section

• Lens options: reads the variant option named Lens (configurable) and shows each value with its price difference and a description.
• When the chosen value contains "prescription" or "Rx", a prescription choice form opens. The choice (email later, use last test, book a test), lens thickness and the name on the prescription are saved as line-item properties and appear in the cart and on the order. The form never collects prescription values; confirm them with the customer directly.
• Frame size: a drawn diagram with lens, bridge and temple sizes from the metafields.
• Try-on note: a card linking to your studios. There is no camera try-on; add a try-on app as an app block if you want one.

Home page sections

• Optica hero: pick the frame shape (11 built in), finish (tortoiseshell, solid or crystal) and colours. Add up to 8 Lens tint blocks; each becomes a swatch that recolours the 3D lenses. A second button can scroll to the frame finder (#finder). To use your own model, paste a .glb link; tints only recolour the built-in frame.
• Shop by shape: line icons linking to a collection, optionally filtered by a tag such as shape-round.
• Frame finder: up to 4 questions; each answer is one line, Label | product tag | icon. Use commas for alternatives and any to match everything.
• Lens guide: lens cards (title, price note, text, tint colour) and an optional polarised before/after slider from one scene image.
• Stores & eye tests: store blocks with city, address, hours, phone, services, map link and image, plus a city filter. Untick Show booking form to hide the booking card.

Swatches and theme settings

• Theme settings → Products → Swatch colour map: lines of Name: CSS colour. Gradients work, so tortoiseshell and two-tone frames get realistic chips. Shopify's native swatches take priority.
• Four colour schemes (bone, espresso, sand, bottle green), Playfair Display and Jost, square corners and landscape product cards.

Motion

Theme settings → Motion: animation level (Off, Subtle or Full), reveal style, duration and stagger. With reduced motion or animation off, content is static, the 3D frame renders one still frame and the ring text stops.