Styles and parts

A style is a design language for the whole storefront.

Where: + New variant in the designer's variant menu and the Theme tab in the designer.

#Three layers

#Choose a style

You choose a style when you make a new variant in the designer.

1. Open the variant menu and press + New variant.
2. Type a name under Name.
3. Choose A style under Start from, then a style. Your own styles have · yours after the name.
4. Press Create variant.

The variant gets the style's look and the templates for Collection pages, Product page and Text pages. The home page and your own pages are as customers see them.

Try a style in a new variant. The storefront does not change until you publish the variant. The style's templates come with placeholder text in the shop's language: Swedish when the shop's language is Swedish, otherwise English.

#Change style later

A variant keeps the style it was made with. For another style, or one of your own, make a new variant from it with + New variant. The storefront doesn't change until you publish the new variant.

A variant gets a copy of the style when you make it. Later changes to the style reach the variant only when you press Reset to followed by the style's name, for example Reset to Bold. The button is under Style of this variant in the designer's Theme tab. It fetches the built-in style, never one of your saved styles, and asks you to confirm first.

Changes you made to colours and parts are lost. ⌘Z brings them back.

#Options per part

The style decides which looks and choices each part has. The list per component is under The components one by one.

You set the choices under Look and Options on the component panel, see The component panel. If the component has a saved style, the choice goes to the style. Otherwise it goes to the variant. The panel always shows the value the storefront uses.

#Colour dots for variants

A variant option called Color, Colour or Färg shows as colour dots. Every value must read as a colour, for example black, red, grön or #E30613. Other options show as buttons.

#Shape and colours on the component

Under Options on the component panel are the Shape and Colours blocks. They show the variant's tokens that the component uses. The code editor does not have the blocks. A saved component style never contains shape or theme colours.

Shape has chips for the corners. Which chips show depends on the component:

The line under the chips says where the value applies:

• Photo corners: all product photos and category tiles without a picture.
• Thumbnail corners: the thumbnails and the corners of the page's sections.
• Button corners: every button in the storefront.

Classic has photo corners of 14 px and Boutique of 20 px. When the style has a value that is not a step, it gets a chip of its own named with the number. On an untouched variant, that chip is selected. When the variant has another value, set under More tokens, no chip is selected and the line shows the number. A value that differs from the style's gets reset.

Colours shows the theme colours the component uses:

Note: The colours under Colours are the variant's. A change here changes the colour everywhere it is used. Colours that apply to the component only go under the Design tab in the code editor.

#Tokens in the Theme tab

The designer's Theme tab changes the variant's tokens without changing style.

Untouched heading choices follow the style and the line shows Style default. A value of your own gets reset, which puts back the style's choice.

#Save as your own style

Your own style saves the variant's style, options, colours, fonts, logo and theme CSS, and the sections of the three templates.

1. Open the Theme tab in the designer.
2. Press + Save current as my style under Your styles.
3. Type a name and save. The name can't already be under Your styles.

The style saves every part's choices, not only the ones you changed. It also saves the sections of Collection pages, Product page and Text pages, see Page templates. Home and your own pages are not saved with it. A new variant made from the style starts with those sections. The style shows in every storefront of the workspace: under Your styles in the designer and under + New variant.

Update one of your own styles with the variant's look:

1. Open the variant in the designer and the Theme tab.
2. Press Update next to the style under Your styles.
3. Press Update in the box.

The style takes the variant's look and keeps its name. The variant you have open doesn't change, and variants already made from the style keep their look. The style's old version isn't kept.

Delete your own style:

1. Press the cross by the style.
2. Press Continue.
3. Type the style's name.
4. Press Delete.

The style disappears for every storefront in the workspace. Storefronts that use it keep their look, since they have their own copy.

#Your styles and Your header styles

Both lists belong to the workspace and show in every storefront. A style removed from a list changes no storefront that already uses it.