Meridian theme documentation

Everything you need to set up Meridian, the Shopify theme for contact lens and optical stores. Version 1.0.0.

Getting started

Meridian is a theme for contact lens and optical stores. Customers choose the values for each eye on the product page, side by side, and every eye goes to the cart as its own line with its prescription. Frames, sunglasses, lens care and accessories sell from the same catalog. Everything else works like a standard Online Store 2.0 theme.

Add Meridian from the Shopify Theme Store and choose Try theme or Add to theme library.
Create the lens metafield definitions (see Lens metafields below), then fill in the values offered by each contact lens.
Set pack sizes as variants, with the number of lenses in each box (see Pack sizes).
For frames, add the frame metafields and create your lens package products (see Frames and lens packages).
Install the free Search & Discovery app and add filters for Product type, your lens tags and options (see Collections and filters).
In Online Store > Themes, select Customize. Set your logo, colors and fonts in Theme settings, then publish when you're ready.

Before you change a live theme, duplicate it in Online Store > Themes. You can always go back to the copy.

Prescription picker

On a contact lens product page, the Prescription block shows the right eye (OD) and the left eye (OS) side by side, one row per field: SPH, CYL, AXIS, ADD, BC and DIA, then the number of boxes for each eye. On small screens the eyes become two tabs.

A field appears only when the product has values for it. A field with a single value, like a base curve of 8.6, is shown as text instead of a choice.
Every field starts empty. Customers have to choose each value, so nobody orders a default power by accident.
Same for both eyes copies the right eye to the left and locks it.
The supply estimate shows how long the boxes last, from the pack size and the replacement schedule.
Customers choose how you get their prescription: upload a photo or PDF, give their eye doctor's name and phone, or send it after checkout. You can turn each option off in the block.
Each eye is added to the cart as its own line with the values as line item properties, so you see Eye, SPH, CYL and the rest on every order.

Where the law requires sellers to verify contact lens prescriptions (for example the FTC Contact Lens Rule in the United States), checking them is up to your store. The theme collects the prescription and the doctor's details; it doesn't verify them.

Lens metafields

Create these product metafield definitions in Settings > Custom data > Products, with the namespace lens. Use Single line text for the ranges and Integer for the numbers.

lens.sph: Power range. Required: the picker only appears on products that have it.
lens.cyl: Cylinder values, for toric lenses.
lens.axis: Axis values, for toric lenses.
lens.add: Near addition, for multifocal lenses. Numbers or words, for example Low, Mid, High.
lens.bc: Base curve. One value or a list.
lens.dia: Diameter. One value or a list.
lens.replacement_days: 1 for daily, 14 for two-weekly, 30 for monthly lenses. Used for the supply estimate and the card badge.
lens.lenses_per_box: Lenses in a box, on the product or on each variant (see Pack sizes).
lens.card_spec: Optional. A short line under the title on product cards. Without it, cards show a single base curve and diameter.

Writing a range

A range is a list separated by commas. Each item is a single value or a run written as from to to by step.

-12.00 to -6.50 by 0.50, -6.00 to +6.00 by 0.25: Every half step from −12.00 to −6.50, then every quarter step to +6.00.
-0.75, -1.25, -1.75, -2.25: Four cylinder values.
10 to 180 by 10: Axis every 10 degrees.
0.00, -0.50 to -6.00 by 0.25: Plano plus minus powers, as for colored lenses.
8.6: A single base curve, shown as text.

Powers are shown with a real minus sign and two decimals (−2.25). Write a plus sign for plus powers; the theme accepts both - and − for minus.

Pack sizes

Sell box sizes as variants, for example an option Pack with 30 lenses and 90 lenses. Create a variant metafield definition lens.lenses_per_box (Integer) and fill it in for each variant. Cards then show the lowest price per lens across your packs, and the product page shows lenses per box and the supply estimate.

In the cart and on orders

Both eyes share a hidden id, so the cart shows them as one card with a prescription table. Boxes change per eye, and Remove takes out both lines. On the order in your admin, each line lists Eye, the values, Prescription (how it will reach you) and, when uploaded, a link to the file.

The cart says when a customer will send the prescription after checkout or asked you to contact their eye doctor.

Saved prescription

Customers can save their power once. It stays in their browser only, nothing is sent to your store until they order.

The Rx chip in the header (in the menu on mobile) shows the saved power and opens a form to change it.
The Your Rx section on the home page asks for it directly.
Lens pages fill in every value the lens is made in.
Product cards and search results say whether a lens is made in both eyes' power, which eye isn't, or that the prescription needs a toric lens.
Collection pages show the saved power with a switch that hides the lenses not made in it.
Adding lenses to the cart saves their values for next time.

Turn the header chip and the card status off in Theme settings > Prescription.

Frames and lens packages

Frames use two blocks of the product page: Frame measurements and Lens packages.

Frame measurements

A drawing of the frame with lens width, bridge and temple length in millimetres. The lens width comes from the selected size when the size is a number (50, 52, 54). Bridge and temple come from the product metafields frame.bridge and frame.temple (Integer).

Lens packages

Create a product for each lens package, for example Single vision lenses or Blue-light lenses, with its price. Give them a product type like Lens package so you can keep them out of your menus.
In the theme editor, open a product template, select the Lens packages block and choose the package products.
Set Show for product types to the frame types that take lenses, for example Glasses.
Choose whether to offer Frame only, and whether to ask for ADD (for progressive or reading lenses).

Customers choose a package, then the values for each eye and their pupillary distance (PD). The frame and the package go to the cart together and show as one card; the prescription is saved on the package line. With a package chosen, Buy it now and the quantity are hidden, since a package is made for one frame.

Theme settings

Logo and favicon: A logo, an optional separate logo for mobile, their widths, and the browser tab icon.
Colors: Four color schemes with background, text, accent, border and button colors, plus sale and in stock colors.
Typography: Fonts for headings, body text and data. The data font sets prescription values, labels and prices per lens; a monospaced font keeps numbers lined up. Headings can be uppercase or as written, with wide letter spacing for the sight chart look.
Layout: Page width, margins, corner radius, chart line numbers on section headings, and Bring images into focus.
Prescription: The saved prescription chip in the header and the prescription match on product cards.
Product cards: Image ratio, second image on hover, vendor, rating, swatches and quick add (for products without a prescription).
Cart: Drawer or page, cart note and accelerated checkout buttons.
Search: Search suggestions on or off.
Social media: Links for the footer icons.

The sight chart look

Section headings carry a line number and get a step smaller down the page, like the rows of a sight chart. Turn the numbers off in Theme settings > Layout.
The Chart hero sets its heading as chart lines, each smaller and more widely spaced than the one above, with an acuity mark like 20/200.
Images start soft and come into focus as they reach the screen. Visitors who prefer reduced motion see them sharp straight away, and you can turn the effect off in Theme settings > Layout.
The footer can end with a row of chart letters; change or clear it in the Footer section.

Sections

Chart hero: Up to five chart lines, text and two buttons, with an image in a round lens frame (or a rectangle) and an optional axis scale.
Lens types: Tiles linking to collections, each with a small drawing for its type: daily, monthly, toric, multifocal, colored, glasses, sunglasses or care.
Your Rx: A band where visitors save their power, optionally with cylinder and axis.
Steps: Numbered steps, for how ordering works or how to read a prescription.
Featured products: Products from a collection. Lens cards show whether they come in the visitor's power.
Featured product: One product with its gallery and buy buttons. For lenses, the button leads to the product page, where the prescription is chosen.
Hero, Image with text, Multicolumn, Rich text, Collection list, Video, Blog posts, Newsletter: The usual building blocks, styled to match.
Announcement bar: Up to three short messages spread across one row, with an optional mark like 20/20. Nothing rotates on its own.
Custom Liquid and Apps: For your own code and for app blocks.

Collections and filters

Collection and search pages use the filters from the free Search & Discovery app. For an optical store we suggest:

Availability and Price.
Product type (Contact lenses, Glasses, Sunglasses, Care).
Tag, renamed Lens type, with tags like daily, monthly, toric, multifocal and colored on your lenses.
Your variant options: Pack, Size, Color.

The prescription match isn't a Shopify filter: the Showing your power panel hides lenses not made in the saved power on the page the customer is looking at.

Cart

By default, adding a product opens the cart drawer; choose Page in Theme settings > Cart to use the cart page instead. Contact lens orders appear as one card per order with both eyes, frames with their lens package as one card.

Languages and translations

Meridian includes English and Turkish storefront text. To edit wording or add a language, go to Online Store > Themes, select the three-dot menu next to the theme and choose Edit default theme content. Text you enter in sections and the values in your metafields are translated with the Shopify Translate & Adapt app.

The labels that appear on orders (Eye, Prescription, Frame, PD) come from the theme text in the language the customer shops in.

FAQ

Does the theme need an app for the prescription?: No. Values come from your product metafields and are saved as line item properties.
Can I track stock per power?: The theme sells pack sizes as variants and powers as properties, so stock is per pack. If you need stock per power, contact us about your setup.
Why can't customers use Buy it now on lenses?: It would skip the prescription. Lenses always go through the cart.
Where is the saved prescription stored?: In the customer's browser only. Clearing it in the Rx form, or clearing browser data, removes it.
Does it work without JavaScript?: The product page falls back to a simple form for one eye at a time with an Eye choice. The two-eye table, the saved prescription and lens packages need JavaScript.

Troubleshooting

The prescription picker doesn't appear.: The product needs a value in lens.sph, and the product template needs the Prescription block. In the theme editor the block shows a note when the metafield is missing.
A field shows values I didn't expect.: Check the range: runs need from, to and by (for example -6.00 to +6.00 by 0.25), and items are separated by commas.
The supply estimate is missing.: Fill in lens.replacement_days on the product and lens.lenses_per_box on the variants.
Lens packages don't show on a frame.: Check Show for product types in the block against the frame's product type, and that package products are selected.
Something else isn't working.: Preview the theme with apps turned off to rule out app code, then contact us with your store URL and the steps to see the problem.

Customizing theme code

Changes to theme code aren't covered by our support, and they can stop the theme from updating. Always duplicate the theme before editing code. If you need custom work, we recommend hiring a Shopify Partner.

Release notes

Version 1.0.0: First release: right and left eye prescription picker with supply estimate, saved prescription with header chip and card matching, frame measurements and lens packages, promotion tiles in product grids, sight chart sections and headings, focus effect, and English and Turkish storefront text.