Design and variants

The designer changes the storefront's look in a variant. Everything saves as you work, but customers see only what you publish.

Where: Storefronts › [storefront] › Overview, then Open designer.

The design is covered on its own pages: Styles and parts, The component panel, Sections and pages and Your own code on a component. The keys are under Shortcuts and the command palette.

#Design and variants

The design is everything that decides how the storefront looks: colours, fonts, style, components, header, footer and the sections of every page. A variant is a copy of the design you can work in. Every storefront has one from the start. Exactly one variant is live, and that is the one customers see.

The designer saves all the time in the variant you have open. Customers see none of it until you publish. To try something else, make a new variant.

#Opening the designer

The designer opens from the storefront's Overview, with the Open designer button or the Design row under Storefront settings. It opens on the live variant.

The Design row shows the name of the live variant. When saved changes are not published yet, it says so too, for example Main · Unpublished changes. When the storefront has no published design, it says Nothing published yet.

The other variants, and who is editing them, are in the designer's variant menu. To get a link that shows a variant without signing in, use Copy preview link in the designer while you are in a variant that is not live. For the live variant, make the link in the preview with Share.

#The designer's parts

On screens narrower than 1600 px, Live shop shows only as an icon. When the bar is tight, the shop and page names are shortened and then hidden. Tighter still, the variant's name is shortened with …, and the variant menu shows it in full. Editing in the top bar means the variant is open in this tab.

Code shows only when Advanced is on. See The component panel.

The icon rail is ordered by how often you need each panel: first the page you are on, then the look of every page, last media and the technical views. A line separates the groups. Search opens the command palette, where you find a panel, a section to add or a task such as Change the font by typing what you are looking for.

In the Theme panel, Colours, Typography and Buttons come first and the theme's style comes last. Each group stays open or closed the way you left it, also after you reload the page in the same browser.

The variant menu shows the variant you edit and marks the live variant Live. When the live variant has saved changes customers do not see, the number shows beside it, for example 4 unpublished. It goes when you publish.

• Live shop opens the storefront as customers see it. The button is there when the storefront is published.
• ⋯ View has Zoom, Grid overlay, Wide screen (1920), Outline mode, Command palette and Help. What is on reads On. On screens narrower than 1600 px the button shows only ⋯.
• ← Back returns to the storefront's Overview. With unsaved work, the designer asks you to confirm.

#Variants

The variant menu lists the storefront's variants under VARIANTS. Switching variant changes only what you edit; the storefront does not change. The designer opens on the live variant unless you chose another one. While you are in a variant that is not live, the designer has a yellow frame and a yellow line says for example Variant · not live. You're editing Christmas. Customers see Main until you publish this one. It also has Copy preview link for the variant.

Make a new variant:

1. Open the variant menu and press + New variant.
2. Type a name under Name, for example Christmas.
3. Choose where the variant starts under Start from.
4. Press Create variant. The new variant opens at once.

⋯ beside a variant has Rename, Duplicate and Delete…. You cannot delete the live variant: publish another variant first. To delete a variant, you type its name. A deleted variant stays under DELETED · BACK FOR 30 DAYS for 30 days, and Bring back brings it back.

#History

History in the top bar opens the variant's history. Every variant has its own.

• Now at the top is what you are working on. It is not live.
• A row is added when you have paused for 15 minutes, leave the designer or switch variant. The row lists what changed, for example Colours, Hero “Spring”, Fonts and 1 more · Kim.
• Every publish is a row. The version customers see is marked Live.
• All shows every row and Publishes only the publishes. Show older shows more.

A click on a row shows the version on the canvas, but you cannot change it. Back to now takes you back. A row has:

#The canvas

The canvas shows the storefront at a width of 1440 px. On smaller screens it scales down so the whole width shows. Wide screen (1920) shows Desktop at 1920 px, scaled down. That is where XL, 2XL and Full part ways. Zoom in ⋯ View changes the scale to 50, 75, 100 or 125 %.

• A click selects a section. The label above the frame names the section.
• Links do not open. A link to another page in the designer switches page. Product, category and menu links select the section and show where the link goes.
• Desktop, Tablet and Mobile switch both the view and the breakpoint. In the deep inspector, a change in Mobile does not change Desktop. The settings under Content are the same on every screen, except the Per screen size table.
• With a section selected, a ruler above the canvas shows the section's width and where each width step ends on the screen. The side margin shows as red marks. Hold the pointer over a chip under Width and a dashed frame shows that width. Nothing is saved until you click.
• A section hidden on the screen on show is a grey strip. See Per screen size.
• Grid overlay shows a grid of 12 columns over the page width from Theme › Layout, inside the side margin. Outline mode draws outlines around every element. Customers see neither.
• The currency switcher in the footer shows when the storefront has more than one currency. The canvas still shows prices in the base currency.
• With reduced motion on in the system, panels switch without animation.

#Layers

The Layers panel shows the page top to bottom: the header, each section with its elements, and the footer.

• A click on a row selects the section and opens the inspector.
• Drag the grip or press Move up and Move down to move a section.
• The eye hides or shows the section. A hidden row is marked hidden.
• Header and footer are marked off on this page when the page does not show them.
• A row with its own style changes shows how many.

#Pages in the designer

The Pages panel lists the storefront's pages in four groups.

Create a page:

1. Press New page.
2. Fill in Page key, for example about-us, and Display title.
3. Press Create page.

A key the storefront already uses for a page of its own, for example product or cart, cannot be chosen. The page's address is /page-key until you change it. Search pages… filters the list. A page's settings are under Sections and pages.

#Preview

Preview (⌘P) shows the draft full screen without frames. You switch between Desktop, Tablet and Mobile. Links to other pages in the designer work. Preview also shows what you just typed, before the next save. The cookie banner shows as it does for a visitor.

#Autosave and undo

The draft saves 0.7 seconds after your last change. The indicator shows Saved just now, Saved 4 min ago and then the time. Save draft beside the indicator saves at once. The shortcut is ⌘S.

⌘Z undoes and ⌘⇧Z redoes. Undo applies per page and per variant during the session. One drag of a colour picker or one line of CSS is one undo step. When you switch page or variant, the designer saves the change first.

Saving pauses in three cases:

One session per variant at a time. Two people can work at the same time, each in a variant of their own.

To take over a variant:

1. When you open a variant someone else is editing, the page shows without tools and a box in the middle of the screen asks. Press Ask <name> to hand it over. Just look closes the box, and Ask to take over in the line at the top opens it again.
2. While you wait, the box says Waiting for Kim and how long until you can take over. The other person gets the question in the designer and a notification in the admin.
3. If they press Hand over to followed by your name, the variant is yours at once. The designer opens again with what they saved, without reloading the page, and says Main is yours now. You see what Kim saved. If they press Keep editing, it stays with them.
4. If nobody answers within 3 minutes, press Take over. What the other person did is saved in the history first.

Whoever loses the variant sees the page without tools under a grey line, for example Kim took over Main or You handed Main to Kim. The preview works as usual, but nothing can be changed. Ask to take over asks for the variant back. When the variant is free, the line turns green and Edit <variant> opens it.

#Publish

Publish opens the publish dialog for the variant you edit. It shows:

• The changes under WHAT GOES LIVE, section by section: ADDED, CHANGED, MOVED and REMOVED. When nothing changed, it says NOTHING NEW.
• A check of the page. The N TO CHECK badge shows the number of warnings. The check looks for an empty page, images that do not load or have no description, buttons without a link, placeholder text, a missing headline, sections styled for desktop only and the page's name.
• Draft pages customers cannot open. Tick them to publish them at the same time.

When you publish a variant that is not live, the dialog says for example Christmas goes live instead of Main. The whole design changes, not only what you changed in Christmas. What was published on Main since you made Christmas shows in a list, because those changes do not come along.

Publishing is the only thing that changes what customers see. Every publish is a row in the variant's history.

Warning: ⌘Z does not undo a publish. Open History, press Restore on the version that was live and publish again.

#Errors

The designer shows errors in English. An error stays until you close it. Four errors have their own text that says what to do: missing permission, a name or address in use, a lost connection and an expired session. For example, a lost connection shows No connection to the server. Your work is still on screen — try again in a moment. The designer shows any other error with its original text.

#What the design does not control

The checkout, the waiting page and the order confirmation use BunStack's checkout frame. It is the same in every storefront and shows your logo and accent colour. See The checkout as the customer sees it.