Fit and swatches

Lapels draws a color as a color and a size as a word, in the same places, with the same rules, on the product card and on the product page. There is no swatch list to maintain in the theme. Everything on this page reads your Shopify product options directly.

That also means the theme cannot invent a color you have not given it. Most of the setup for swatches happens in the Shopify admin, not in the theme editor, so start there.

What Shopify needs before a swatch can exist

A swatch is a piece of data attached to an option value, and Shopify only attaches it to a linked option. That means an option connected to its own color taxonomy, rather than typed by hand. An option merely named “Color” carries no swatch, and the theme will draw its values as plain text.

Two things have to be true on the product:

1. The product has a category, set in the product’s Product organization panel. A product with no category cannot carry a linked color option at all.
2. The color option is linked, which Shopify offers when you add the option to a product in a category that supports color swatches. The values then come from Shopify’s color list rather than from free text.

The swatch value itself, either a flat color or a small image, is set in Settings → Products → Options, or on the product at the point where the option is created.

Caution

Carrying a Color attribute is not the same as supporting swatches. Some categories list one and still refuse a linked color option. If the values come back with no color chip against them in the admin, try the parent category. A product filed one level up will usually take the linked option. Check one product all the way through before you set up the whole catalog.

The all-or-nothing rule

Once your options are in order, the theme’s own rule is simple and worth knowing, because it explains almost every “why is this product showing words instead of colors” question:

An option is drawn as swatches only when every one of its values carries swatch data. One value without, and the whole option falls back to text. This is deliberate. A half-swatched option would render the missing values as blank boxes, which reads as a broken page rather than as missing data.

The same test runs on the product card and in the variant picker, so the two always agree with each other. The theme decides which option is the visual one from the swatch data alone, never from the option’s name, so “Color”, “Shade” and “Couleur” all work.

Filters are the one exception, and for a good reason. See In the filters below.

On product cards

Swatches on cards are controlled by Show color swatches in Theme settings → Product cards, which is on by default. The card takes the first option, in your option order, whose values are all swatched, and draws it under the price.

What a card does with them:

• Up to five swatches are shown. A product with more prints a +3 after them rather than dropping them silently, and a screen reader is told the full count.
• Each swatch is a link to that color’s own variant page, so it can be opened in a new tab.
• Pointing at a swatch, or tabbing to it, shows that color’s own photograph on the card, faded in over the one it replaces. A card only scrolled past costs nothing, because the preview image is not requested until the pointer arrives. A color whose variant has no image of its own leaves the card’s photograph alone.
• Where Quick button action is set to Quick view, a swatch opens the quick view panel on that color instead of navigating, so a shopper can pick a size without leaving the grid. A modified click, such as one opening a new tab or window, still goes to the page.
• The second-image hover turns itself off on a card that has swatches. One gesture changes the picture, and on a card with colors that gesture is the swatches.

The swatch shape follows the Swatches setting in Theme settings → Corners. It runs 0 to 32px and ships at 32px, which is a full circle. Take it to 0 for squares.

On the product page

Option choosing on the product page is the Variant picker block, added inside the main product section. It renders nothing at all for a product with a single default variant.

Setting	What it does	Default
Show the selected value	Prints the chosen value beside the option name, so the row above the sizes reads “Size Large” rather than “Size” on its own.	On
Size guide page	Optional. Pick a page and a small text link to it appears under the option rows.	None
Size guide label	What that link says. Left empty it reads “Size guide”, translated with the rest of the storefront.	None

How it behaves:

• Every option is a real radio group. There is one group per option, with the option name and the chosen value as its label. Arrow keys move within a group, Tab moves between groups, and a screen reader announces “Size, group, Large, radio button, 3 of 5”.
• Swatched options draw as swatches, and everything else draws as pills. A pill is the value’s own name, set in the theme’s label voice. Sizes almost never carry swatch data, so a size run is a row of pills, and there is nothing to configure.
• Sold-out values stay in the picker rather than disappearing. A shopper needs to find the size they wanted and see that it is gone. A pill takes a diagonal hatch its text still reads through. A swatch keeps its color whole and dashes the frame around it instead.
• Availability is recalculated on every change. A value can be sold out on its own, or only in the company of the rest of the selection. Burgundy, 42R and slim may each exist while burgundy / 42R / slim does not. The picker marks both cases.
• The address bar follows the selection, so a shopper can copy the URL for the exact variant they are looking at.

Tip

Point Size guide page at the page holding your measurements, built as a Spec table. It is the shortest route from “which size am I?” to an answer, and it keeps one chart rather than a copy per product.

In the filters

Storefront filters are configured in Shopify’s Search & Discovery app, not in the theme. Once a color filter exists there, Lapels draws it with swatches on collection and search pages.

The collection and search sections each carry a Swatch filter layout setting, which chooses how:

• Grid (the default) draws the swatches on their own, with each name and count in the tooltip and read out to a screen reader.
• List keeps a checkbox, the name and the count on every row.

Filters use a majority rule rather than the all-or-nothing rule above. A filter is drawn as a grid when more of its values carry a swatch than not, and any value without one keeps a normal row.

That is because “Multicolor” is a real taxonomy value with no color to its name. One such value in a color filter is the ordinary case, and it should not cost every other value its swatch.

See Collection and search for the rest of the filter panel, and Theme settings → Filters for how filters apply.

When a swatch does not appear

Work down this list in order:

1. The product has no category. Set one, then re-add the color option.
2. The option is not linked. Its values were typed rather than picked from Shopify’s color list.
3. One value has no swatch set. On cards and the product page that is enough to send the whole option back to text.
4. Show color swatches is off in Theme settings → Product cards. That switch only affects cards. The product page draws swatches either way.
5. The category refuses linked color options even though it lists a Color attribute. Move the product to the parent category.

Related: Spec table · Product pages · Theme settings → Product cards · Lapels support replies within 12 hours.