Storefronts
Shortcuts and the command palette
The designer's keyboard shortcuts for selecting, editing, history, panels and publishing, and the ⌘K command palette.
The designer has shortcuts for what you do often.
Where: In the designer. ? opens the full list.
The keys are shown as on a Mac. On Windows, use Ctrl instead of ⌘ and Alt instead of ⌥.
Select
| Key | What |
|---|---|
| Click | Selects a section on the canvas |
| Esc | Closes the dialog on top or drops the selection |
| ⌥↑ · ⌥↓ | Moves the selected section up or down |
| Delete | Removes the selected section. Undo is in the notice. On a Mac laptop: fn + ⌫ |
Backspace does not remove a section.
Edit
| Key | What |
|---|---|
| ⌘C · ⌘X · ⌘V | Copies, cuts or pastes the section |
| ⌘D | Duplicates the selected section |
| ⌘⌥C · ⌘⌥V | Copies or pastes the styles only. ⌘⌥V never pastes a whole section |
| Double-click on text | Edits the text on the canvas. ⏎ keeps the change and Esc throws it away |
| Drag a length label | Changes the value. Shift gives 10 times bigger steps, ⌥ a tenth |
History
| Key | What |
|---|---|
| ⌘Z | Undoes |
| ⌘⇧Z · ⌘Y | Redoes |
Panels and views
| Key | What |
|---|---|
| ⌘K | Opens the command palette |
| / | Opens the palette with the cursor in the search field |
| ⌥1 … ⌥8 | Opens the panels Sections, Library, Pages, Theme, Components, Media, Layers and Code, top to bottom |
| ⌘P | Switches between editing and Preview |
| F | Full screen without the browser's edges |
| ? | Opens or closes the list of shortcuts |
The ⌥ digits also work on a Swedish keyboard. The Code panel exists only with Advanced on.
Save and publish
| Key | What |
|---|---|
| ⌘S | Saves the draft at once |
| ⌘⇧P | Opens the publish dialog |
After a click on the canvas
The shortcuts also work after a click on the canvas. The exceptions are ?, /, F and ⌥↑/⌥↓. Click in a panel or in the top bar first.
The command palette
⌘K opens the palette. You also reach it through Search at the top of the icon rail and through Command palette in the ⋯ View menu.
The How do I… group comes first:
| Choice | Opens |
|---|---|
| Change the shop’s colours | The theme's colours |
| Change the font | The theme's fonts |
| Change the buy button’s colour | The buy button's colour |
| Put my logo in the header | The logo on the header |
| Write the announcement bar | The announcement bar's text |
| Add a section to this page | The section library |
| Put my changes on the live shop | The publish dialog |
| Read the designer handbook | This handbook |
Each choice opens the panel where you make the change. The search also finds words like "add to cart", "free shipping" and "deploy".
The palette also has commands for views, editing, sections and publishing. Copy section as JSON (system clipboard) puts the selected section on the clipboard. Paste section from JSON (system clipboard) puts it back, even in another tab or storefront. A saved component has the command Add "name", see Your own code on a component.