Yoroi documentation

Yoroi is a Shopify theme for eyewear stores. Customers find frames by shape, color and fit size, see exact measurements, and choose lenses with the frame.

Version 1.0.1. Three presets are included: Yoroi (white), Kinari (off-white) and Sumi (black).

Install

In your Shopify admin, go to Online Store > Themes and add Yoroi from the Theme Store.
The theme is added as an unpublished theme. Select Customize to look through it with your own products.
Work through First setup below, then select Publish.

To change the look later, go to Theme settings > Theme style in the theme editor and pick another preset. Changing the style replaces colors and some settings, but never your products or content.

First setup

Anything you have not set up is simply hidden. Nothing on the storefront breaks.

What	Where	What it does
Product metafields	Settings > Custom data > Products	Frame measurements, fit size, specifications and worn photos. See Product metafields.
A page using the `page.size-guide` template	Online Store > Pages, then Theme settings > Fit sizes > Size guide page	A size table built from your fit size settings, linked from every product.
A page using the `page.contact` template	Online Store > Pages	Contact form.
Collections for each shape and color you sell	Products > Collections	Used by the Shop by shape and Shop by color sections. Smart collections with a metafield condition work well.
Main menu and footer menu	Online Store > Navigation	The header and footer. Menus can be three levels deep.

Product metafields

Yoroi reads product metafields in the eyewear namespace. Create the definitions you need under Settings > Custom data > Products > Add definition, using the namespace and key exactly as shown. Each one is optional: a product without the value simply does not show that line.

Namespace and key	Type	Example	Shown in
`eyewear.lens_width`	Integer	46	Frame size diagram, size on product cards
`eyewear.bridge_width`	Integer	22	Frame size diagram, size on product cards
`eyewear.temple_length`	Integer	145	Frame size diagram, size on product cards
`eyewear.lens_height`	Integer	41	Frame size diagram
`eyewear.frame_width`	Integer	136	Overall width. Decides the fit size (XS to XL)
`eyewear.fit_label`	Single line text	M	Sets the fit size by hand instead of the overall width
`eyewear.size`	Single line text	46□22-145	Can be used instead of the three widths above
`eyewear.material`	Single line text	Hand-polished acetate	Specifications block
`eyewear.weight`	Integer or decimal	22	Specifications block (grams)
`eyewear.nose_pad`	Single line text	Adjustable titanium pads	Specifications block
`eyewear.origin`	Single line text	Sabae, Japan	Specifications block
`eyewear.included`	List of single line text	Hard case, Cleaning cloth	Included items block
`eyewear.color_family`	List of single line text	Black, Tortoise	Smart collections and filters for Shop by color
`eyewear.shape`	List of single line text	Boston	Smart collections and filters by shape
`eyewear.material_family`	List of single line text	Acetate	Smart collections and filters by material
`eyewear.returns_custom` and `eyewear.returns_text`	True or false, multi-line text	—	Replace the returns text for one product
`eyewear.warranty_custom` and `eyewear.warranty_text`	True or false, multi-line text	—	Replace the warranty text for one product
`eyewear.worn_photos`	List of files (images)	—	Worn photos (product) section
`eyewear.worn_note`	Single line text	Medium face width, wearing size M	Line under the worn photos heading

For articles, an eyewear.products metafield (list of products) shows the frames mentioned in the article under it.

For shape, color_family and material_family, turn on Smart collections in the definition so you can build collections from them.

Theme settings

In the theme editor, select the gear icon to open theme settings.

Group	What you can set
Typography	Body and heading fonts from the Shopify font library. On Japanese pages, the device's Japanese fonts are used automatically after the chosen font.
Layout	Page width, page margin, corner radius, favicon.
Colors	Background, text, tinted background, accent, photo background and footer colors. Each section can also use a tinted or inverted background.
Product cards	Image ratio, brand name, frame size, color thumbnails, which option names count as frame color, tidy product names, the “New” badge, review stars.
Cart	Cart type (drawer or page), free shipping amount, order note, express checkout buttons in the drawer, suggested products.
Fit sizes	The overall widths that separate XS, S, M, L and XL, and the size guide page.
Try-on	A button for trying a frame on at your shop.
Returns and warranty	Written once and shown on every product. One product can use its own text through metafields.
Offer	A line such as a second-pair discount, under the price and in the announcement bar. The discount itself is set up in Discounts.
Ask us (chat app and email)	Links on the product page to a chat app (LINE, WhatsApp, Messenger and others) and email.
Social media	Account links for 12 networks, shown in the footer as icons or names.
Search and sharing	Image used when a page is shared, and breadcrumbs.

Home page sections

Section	What it does
Hero	A photo with a heading, text and up to two buttons. A separate photo can be set for phones.
Slideshow	Several banner images.
Shop by shape	Line drawings of 15 frame shapes. Choose a collection for each shape you sell; shapes without a collection are hidden.
Shop by color	Color swatches, each linking to a collection you choose or to a filtered list.
Featured collection	A row that scrolls sideways, or a grid. Can show ranking numbers.
Featured product	One product with its photos, videos, options and buy buttons.
Brands	A photo, name, one line and the number of frames for each brand.
Image with text	A photo and text, with optional rows such as prices.
Worn photos	Photos of people wearing frames, each linking to the frame.
Blog posts, Recently viewed, Reassurance row, Price list, Rich text, Collection list, Stockists, Custom Liquid	—

Product page

Blocks can be added, removed and reordered in the editor.

Block	What it shows
Title	Brand and product name, review stars.
Price	Price, compare-at price, unit price, tax note, what the price includes.
Selection guide	A short explanation above the options. Can be shown only when an option name contains a word you choose.
Color and lens options	Colors as photo tiles, other options as a list with the price difference. Available choices come first.
Prescription	How the customer sends their prescription: later, by sending current glasses, with a photo, by typing the numbers, or as last time. Shown only when a prescription lens is chosen.
Buy buttons	Quantity, purchase options (subscriptions), gift card recipient, express checkout, Shop Pay Installments, restock request.
Pickup availability	Whether the selected variant can be picked up.
Goes well with	Complementary products set in the Search & Discovery app.
Reassurances	Up to four lines of your own, plus returns and warranty from theme settings.
Frame size	Fit size, size diagram and a link to the size guide.
Specifications, Included items	From product metafields.
Try-on, Ask us, Steps, Description, Details from description, Collapsible text, Custom Liquid, Apps	—

For repairs and lens replacement, assign the product.service template to the product. It reads well without photos and shows the order steps.

Photos

Photos per color. Start the alt text of a photo with # and the first word of the color name, for example #C1 Aki in Black, front for the color “C1 Black”. When that color is selected, only its photos are shown.
Worn photos. If the alt text contains “wearing”, it is shown under the photo as a caption, for example #C2 Medium face width, low nose bridge. Wearing size M. The part starting with # is not shown.
Image ratios. Product cards use the ratio set in Theme settings > Product cards. Photos of other ratios are shown whole, never cropped.
Focal point. Set the focal point of an image in the image picker so the important part stays in view on phones.

Fit sizes

Yoroi sorts frames into five fit sizes by overall width (eyewear.frame_width). The defaults are:

Size	Overall width
XS	up to 129 mm
S	130 to 134 mm
M	135 to 139 mm
L	140 to 144 mm
XL	145 mm and over

Change the limits in Theme settings > Fit sizes. The size guide page uses the same numbers. To set a size by hand, fill in eyewear.fit_label.

Filters and search

Collection and search pages support Shopify's storefront filters. To filter by shape, color, fit size or material, add the metafields eyewear.shape, eyewear.color_family, eyewear.fit_label and eyewear.material_family as filters in the free Shopify Search & Discovery app.
Search suggests products while customers type. The full search page also lists articles and pages.

Editing code

Duplicate your theme before editing code. Go to Online Store > Themes, open the menu next to Yoroi and select Duplicate. Edit the copy, and publish it only after checking it.

Code changes are not covered by theme support, and they are not carried over when you update Yoroi. For custom work, we recommend hiring a Shopify Partner. Small style changes can go in Theme settings > Custom CSS without editing theme files.

Questions

The frame size diagram is not showing.

Check that the product has at least one of eyewear.lens_width, eyewear.bridge_width, eyewear.temple_length, eyewear.lens_height, eyewear.frame_width or eyewear.size, and that the Frame size block is on the product template.

A shape is missing from “Shop by shape”.

Shapes without a collection are hidden on the storefront. Choose a collection for the shape in the section, and make sure the collection has products.

All photos show, whatever color is selected.

Photos switch by color only when their alt text starts with # and the first word of the color name. See Photos.

The prescription choices do not appear.

They appear when the selected lens option contains one of the words in the Prescription block's setting (for example “Prescription”). Add your own wording there if your option names are different.

Express checkout or Shop Pay Installments buttons are missing.

These are shown by Shopify when the payment methods are turned on in Settings > Payments.

Can I use apps?

Yes. Product and featured product sections accept app blocks, and the Custom Liquid section and blocks can hold app code.

Support policy

We answer questions about setting up and using Yoroi, and fix bugs in the theme.
We reply within two business days (Monday to Friday, Japan time).
Custom code, third-party apps and changes to the theme's design are not covered.
Send requests through the support form. Include your store address and a screenshot if you can.

Release notes

1.0.1

The Reassurances block on the product page now starts with Free adjustments and Free shipping, so it no longer repeats the returns and warranty lines added from theme settings.

1.0.0

First release on the Shopify Theme Store.
Three presets: Yoroi, Kinari and Sumi.
Shop by shape, Shop by color, fit sizes from frame measurements, frame size diagram, lens options with price differences, prescription choices, worn photo captions.