Skins

A skin sets how the filters look in the shop: the panel and its groups, the values, counts, tiles and swatches, the chosen filters, the buttons, the slider, the bar and its popovers, the drawer and the sheet on a phone, the filter forms and the loaders. The filter sets decide what the shop offers; the skin decides how it looks.

Skins are managed under Filters → Skins, in three screens: Skins, Skin editor and Sales channels.

Built-in and own skins

The plugin brings built-in skins. They are read-only: to change one, duplicate it.

An own skin stands over another skin, its parent, and stores only what you change. Everything else it inherits from the parent; an own skin may stand over another own skin. The font always comes from the sales channel’s theme.

The Skins screen

Filters → Skins → Skins shows a card per skin, nine to a page: a sample of its look, its name, what it is (“Own skin inheriting from ’…’ — 3 changes”) and the channels that show it. A green dot marks a skin a channel shows; a lock marks a built-in one. The built-in skins come first, each followed by the own skins over it.

A click on a card opens it in the skin editor. The card’s menu:

Action	Effect
Edit / Preview	Opens the skin in the editor: an own skin to edit, a built-in one to look at.
Duplicate to own	Makes an own skin over this one, named ”… (copy)”. It changes nothing yet and no channel shows it.
Rename…	Changes the name. The technical name stays as it is. Not for built-in skins.
Export JSON	Downloads the skin’s published version as a file (before the first publication, its draft).
Delete	Deletes the skin and its published versions. Not possible for a built-in skin, a skin a sales channel shows, or a skin other skins inherit from.

Import JSON above the cards opens Skins → Import and export; see Import and export.

Which skin a channel shows

Filters → Skins → Sales channels lists the storefront sales channels, with these columns:

Column	Shows
Channel	The channel and its address.
Channel theme	The theme the channel uses.
Skin	The skin the channel shows. A pick here is saved at once and the shop shows it at once.
Channel adjustments	The channel’s own layer over the skin: none, or how many values it sets, and the changes its draft holds. Edit layer opens it in the editor.
State	How far the skin is published: Published, Draft or Draft · 2 changes, with the version the shop shows.

Each sales channel shows one skin. A channel without a pick shows the default built-in skin. The list can be narrowed by Name and by Skin. Changing a channel’s skin needs the editor role of the filters.

Channel adjustments

Channel adjustments are a thin layer over the channel’s skin for one channel only, for example another accent colour. The layer stores only what differs. Edit layer makes it on its first use and opens it in the skin editor, where it is seen in its own channel only.

A value the layer sets wins over the skin in that channel. When you edit the skin itself, such a value carries the note that the channel adjustments set it over the skin: a change there does not show on that channel’s pages.

Draft and publication

An own skin and a channel’s layer have a draft and published versions. Save draft keeps the changes without touching the shop. Publish makes the draft the shop’s look as a new version. A skin that has never been published adds nothing yet: the shop shows the nearest skin it stands on that is published.

Values the shop cannot use (a colour that is not one, a size out of its range) are left out when the skin is saved, and a message says how many.

History (the clock button) opens the publication history beside the preview. A version can be restored into the draft; the shop changes only after Publish. Discard draft removes the changes since the last published version, so the editor shows what the shop shows. The published versions of all skins are also listed under System → Versions.

The skin editor

Filters → Skins → Skin editor has the skin’s settings in a column and a live preview of a shop page beside it.

The skin is picked at the top of the column. The status bar says what it inherits from.
A built-in skin opens read-only, with Duplicate to adjust.
Search a skin setting finds the settings by name, and the element styles too.
Each row shows where its value comes from: Inherited · from … or Set here. The chain button beside it overrides the inherited value here, or lets the row inherit again.

The preview

The preview is a real page of the shop with the skin as it stands in the draft, before it is saved.

State of the preview: As it is, With a choice (values picked in a few groups), Loading or Empty (the page without products).
The device switch shows the page as on a Desktop, a Tablet or a Phone.
Page of the preview picks the Sales channel and the Category; without a category the preview shows the Whole catalogue. A channel’s layer is seen in its own channel only.

Settings

The Settings tab holds the skin’s values in these groups.

Colours

Setting	Effect
Accent	Chosen boxes, the slider’s fill, the count on ‘Filters’.
Accent text	Links and text in the accent colour, such as ‘Clear’.
On the accent	The tick and the loader on an accent ground.
Text	The panel’s text.
Muted text	Secondary text.
Lines and frames	Lines between groups and frames.
Panel ground	The panel’s background.
Group ground	A group’s background; none lets the panel’s ground show through.
Focus ring	The ring around a focused control.
Unavailable box frame	The frame of a box that cannot be picked.
Error ground, Error text	Error messages.

Typography

Setting	Effect
Font	Fixed: from the sales channel’s theme.
Group heading	Size of a group’s heading, 12–20 px.
Value	Size of a value’s text, 12–18 px.

Sizes

Setting	Effect
Value row	Height of a value’s row, 24–48 px.
Value row on touch	The finger’s target on phones and tablets, 40–56 px.
Checkbox	Size of a checkbox, 14–24 px.
Box frame	Width of a box’s frame, 1–3 px.
Group inset	The space inside a group, per side, 0–32 px.
Gap between groups	0–24 px.
Drawer from the bar	Width of the drawer opened from the bar, 320–560 px.
Room for rings	Fixed: the room every frame keeps for focus rings.

Radii

Setting	Effect
Groups and cards	Corner radius of groups and cards, 0–16 px.
Boxes, tiles, button	Corner radius of boxes, tiles and the button, 0–12 px.

Panel

Setting	Effect
Groups look	Lines, Cards or No frames, in the column and a drawer; the bar’s pills keep a frame of their own.
Dense	Smaller rows and text for many groups, in the column and a drawer.
Two columns of boxes	Lists, radios and stars in two columns. A filter’s own Columns goes first.

Counts

Setting	Effect
Count style	Badge, Light, Text, (12) or Hidden. Hidden hides every count.
Count ground, Count text	The count’s colours.
Count ground, unavailable	Also the ground of a tile and a box without products.
Count text, unavailable	Also the text of a value, a tile and a pill without products.

Values

Setting	Effect
List values as	Checkboxes or Pills.
Rating stars	The stars’ colour.
Switch, off	The colour of a switch that is off.

Swatches and tiles

Setting	Effect
Swatch shape	Circle, Rounded, Slightly rounded or Square.
Swatch size	20–40 px.
Counts of colours	In the tooltip only or Always.
Chosen tile	Dark or Accent outline (adds a tick).
Chosen tile ground, Chosen tile text, Chosen tile frame	The colours of a chosen tile.
Counts on tiles	In the tooltip or Badge in the corner.
Tile without products	Dimmed 0 or No badge.
Badge reach	How far the corner badge reaches past the tile, 0–10 px.

Chips: Chip ground and Chip text, the chosen filters.

Buttons: ‘Show N’ ground and ‘Show N’ text.

Slider: Slider handle frame.

Loaders and motion

Setting	Effect
Hourglass while a change waits to go out	Yes or No.
Loader	Spinner, Pulse or Bar.
Loader on the value clicked	No: only the group’s head shows that the counts are coming.
Products while loading	Skeleton, Dim or Nothing.
Motion	Normal, Reduced or None. A shopper’s system asking for reduced motion always wins.

A setting the shop never draws under the others is locked with a note, for example the count’s colours with the count style Hidden.

Element styles

The Elements tab styles single parts of the filters, state by state. Pick an element in the list or click it in the preview; the preview marks every place it appears.

The elements include the panel and its title, a group and its heading, the value row, checkbox and radio, count, tile, pill, swatch, rating stars, category link, field, the slider’s track, range and handle, the switch, the combined group’s sections and tabs, the compatibility level name and line, the bar’s pills, tool buttons and popover, the sheet with its head, foot and backdrop, the chosen filters, the apply and secondary buttons, the empty result, the filter form’s parts, the error message, the list head and the loader.

Each element has the states that apply to it: Normal, Hover, Selected, Open, Focused, Unavailable, Loading. A state stores only what differs from Normal. A value is set for the device shown in the preview; the properties come in four groups:

Group	Properties
Typography	Size, Weight
Colours	Text, Background, Icon
Spacing and size	Inner spacing, Minimum height, Width, Maximum height
Border and shadow	Border colour, Corner radius, Shadow

The contrast check

Under the settings the editor checks the contrast of every pair of colours the shop shows together, against WCAG 2.2 AA:

text on its ground needs 4.5:1 (Accent text, Text, Muted text, Error text, Count text, Chosen tile text, Chip text, ‘Show N’ text);
the accent, the focus ring, the stars, a switch that is off, the slider handle’s frame, the tick on the accent and an unavailable count need 3:1;
the element styles’ own pairs of text and ground need 4.5:1, in the state and on the device where they are set.

A pair below its minimum is listed under To check before publishing, for example “Text: contrast 3.2, 4.5 needed.”. Show opens the setting, Open the element. A colour the shop does not draw under the other settings is not checked. When every pair passes, the editor says: “The contrast of every pair meets WCAG 2.2 AA.” The check warns; it does not stop Publish.