Finish and size picker — Peel docs

A sticker's finish and size are what shoppers can't judge from a photo. So Peel shows them. Choosing a finish plays that finish over the product image, and sizes are drawn as squares to scale, with a line saying what that size is like. It all works from your ordinary product options: there's nothing to install and nothing extra on the order.

Set it up

Give the product its options. In admin, add an option called Finish with values such as Matte, Glossy, Holographic, Clear and Glitter, and an option called Size with values such as 2″, 3″ and 4″. Each combination is an ordinary variant with its own price and stock.
Check the names. If you call them something else (Coating, Dimensions), add those names to Theme settings › Finish and size › Finish option names and Size option names, separated by commas. Capitals don't matter. A product can use either option, or both.
Check the finish values. Peel recognises most finishes from the words in the value (below). For a word it can't place, add a line to Other finish names.
Write your size hints in Size hints, to match your sizes and units.

That's all. In the theme editor, a product with neither option shows five sample swatches and three sample chips, so you can see the design. Shoppers never see them.

Finishes

Each value of a finish option gets a swatch that shows its sheen, with the value's name under it. The theme reads the words in the value, and the rarest finish wins, so "Holo gloss" is Holographic:

The value contains	Finish	What shoppers see on the image
holo, rainbow or iridescent	Holographic	A rainbow over the art, on a white tile. It shimmers for about 5 seconds.
glitter or sparkle	Glitter	Small flecks of light that twinkle
gloss	Glossy	Bright bands of shine that sweep across once
matt	Matte	A soft, flat film with no glare
clear or transparent	Clear	The tile gives way to a checkerboard, as if there's nothing behind the art

Other finish names is for anything else. One line per word, with the word, a | and one of matte, glossy, holo, clear or glitter. A line matches when the value contains its left side, and these lines are checked before the table above:

Satin | glossy
Prism | holo
Foil | holo

A value that matches nothing still works as a choice: it shows its name, with no sheen.

How the sheen behaves. It paints as soon as a finish is chosen, plays through once and rests. On phones the gallery has usually scrolled away by then, so a small preview of the product beside the finish heading shows the same sheen. Choosing the same finish again replays it, and holo also replays when shoppers hover over the image with a mouse or tap it. It only appears on images in the product gallery and in quick view, not on video or 3D models, and the full-screen zoom shows the plain image. On an image with a sheen, the zoom stays on its button, so a tap on the art doesn't open it. Nothing plays for visitors who prefer reduced motion: the finish still shows, standing still.

Holo needs light art. Holographic vinyl is ink printed over rainbow foil, so the black stays black and the white goes rainbow, and the sheen works the same way. On dark art it looks dim. It's at its best on a transparent PNG or a light image.

Clear needs a PNG. With a transparent PNG as the product image, the checkerboard sits behind the art and the art stays clean. A JPG has no transparent ground, so the checkerboard goes over the whole image.

Note

The sheen is a drawing laid over your image, not a photo of your product. It gives the idea of the finish. If you want shoppers to see the real thing, attach a photo to the variant: choosing it brings that image first, with the sheen on top.

Sizes

Each value of a size option is drawn as a chip: a square whose side is in proportion to the size, with the largest at 72px and the smallest never under 30px. So 2″ really looks half the size of 4″.

The theme reads the first number in the value, decimals included: 2″, 2.5 in, 50 mm and Large 3" all work.
If any value has no number (Small, Medium, Large), there's no scale to draw: every chip is the same size, with the value inside.
If every value has the same number, every chip is the same size, with the value under it.

Size hints put a line under the chips, changing as the shopper picks. One per line, the size, a | and the hint. Hints match on the number, so 3 matches 3″ and 3.0 in, and a size with no hint shows no line. The default hints are written for inches, so rewrite them if you sell in millimetres or centimetres:

25 | About the size of a coin.
50 | About the size of a matchbox.
75 | About the size of a credit card.

The chosen size also sets the sticker's size in See it on (chapter 9).

Sold-out finishes and sizes stay selectable, as they do for any option (chapter 6).

Shop by finish

The Shop by finish section is a band of up to five tiles, each showing a finish standing still over your image. It's on the Peel and Retro home pages. Its settings are Eyebrow, Heading ("Shop by finish"), Intro text and Background (Board).

Each Finish tile has:

Setting	Default	What it does
Finish	Holographic	Matte, Glossy, Holographic, Clear or Glitter: the sheen on this tile
Label	"Holographic"	The tile's name
Note	"Rainbow when it moves"	A short line under it
Image	Empty	The art under the sheen. A transparent PNG or light art works best.
Link	Empty	A collection, or a filter link such as `/collections/all?filter.v.option.finish=Holo`

A tile with no image is skipped on the storefront, and a section with no tile left shows nothing, heading included. The theme editor shows a sample cloud so you can see where it will go. A filter link needs the Finish filter (chapter 13), and the part after = must be your value as you wrote it.