# Design your shop (/merchants/shop-design)

The editor is one sidebar beside a live preview of your shop. Its three tabs are **Sections**
(the page, top to bottom), **Products** (what the shop lists, see
[Products and delivery](/merchants/shop-products)) and **Theme** (the look of the whole shop).
It saves your draft as you go; visitors see nothing until you publish.

![The shop editor: the Sections tab lists Header, Hero, Products, FAQ, Contact and Footer, each with its layout name, beside a live preview of the shop.](/screenshots/shop/editor-sections.webp)

*The Sections tab. Each row shows the section and its layout.*

## Before you start [#before-you-start]

* You have a shop, or a design saved on this device before approval. See
  [Create your shop](/merchants/shop-create).
* On the Shop page, click **Edit shop**.

## Steps [#steps]

**Step 1.**

### Arrange the sections [#arrange-the-sections]

The **Header** is always first and the **Footer** always last; your other sections sit between them,
up to 30 sections in all. Each row has a drag handle to reorder it, an eye to hide or show it, and a
⋯ menu with **Duplicate**, **Move up**, **Move down** and **Delete**. The header and footer have only
the eye. A deleted section can be brought back with **Undo** in the message that shows for a few
seconds.

**+ Add section** opens "Add a section", grouped by purpose: "Start" (Hero), "Sell" (Products,
Featured product, Plans), "Explain" (Text, Features, FAQ), "Trust" (Testimonials) and "Convert" (Call to
action, Contact).

![The Add a section dialog with tiles for Hero, Products, Featured product, Plans, Text, Features and FAQ, each with a one-line purpose.](/screenshots/shop/editor-add-section.webp)

**Step 2.**

### Edit a section [#edit-a-section]

Click a section, in the list or in the preview. Its settings replace the list (the back arrow or Esc
returns), in three groups:

* **Content**: its fields. Every field is plain text with a length limit, and links must start with
  `https://`.
* **Layout**: two or three ways to draw the section, as thumbnails.
* **Style** (collapsed): the "Colour scheme", one of five: "Base", "Muted", "Accent soft", "Inverse"
  or "Accent", the theme's own choice marked "Theme default". A Hero or a Call to action also has a
  "Theme background" switch.

![The Hero section's settings: Headline, Text under the headline, Button label, Button goes to, and three layout thumbnails, Statement, Split and Editorial, with Split selected. The preview shows the Hero selected with a toolbar.](/screenshots/shop/editor-section.webp)

*A section's settings. The selected section has a toolbar in the preview.*

A field the chosen layout does not draw is hidden from the form but kept, so switching back brings it
back.

**Step 3.**

### Pick a layout [#pick-a-layout]

| Section          | Layouts                       |
| ---------------- | ----------------------------- |
| Header           | Bar, Centered, Minimal        |
| Hero             | Statement, Split, Editorial   |
| Products         | Grid, Bento, Carousel         |
| Featured product | Spotlight, Split              |
| Plans            | Columns, Comparison           |
| Text             | Prose, Two column, Pull quote |
| Features         | Bento, Steps, Stats           |
| FAQ              | Accordion, Two column         |
| Testimonials     | Big quote, Wall, Marquee      |
| Call to action   | Band, Card                    |
| Contact          | Simple, Card                  |
| Footer           | Minimal, Columns, Wordmark    |

The layout and scheme choices also take the arrow keys.

**Step 4.**

### Choose a theme [#choose-a-theme]

In the **Theme** tab, pick one of ten themes: Ledger, Broadsheet, Console, Poster, Cloud, Swiss,
Studio, Atelier, Zine or Blueprint. Each brings its own fonts, buttons, spacing and mode, and a layout
and scheme for each section. Then adjust:

* **Accent colour**: one of eight swatches, or "Custom colour" (a colour like `#2b50e0`). When your
  colour is hard to read on the theme, the shop shows a readable one instead, and the editor tells you which.
* **Fonts**: one of ten pairings, such as "Inter Tight and Inter" or "Fraunces and Nunito Sans". You
  can't upload fonts.
* **Button style** (Solid, Outline, Hard shadow), **Buttons** (Square, Rounded, Pill), **Spacing**
  (Compact, Comfortable, Airy) and **Mode** (Light, Dark, Auto; Auto follows the visitor's device).

![The Theme tab with the ten theme cards; Studio is selected.](/screenshots/shop/editor-theme.webp)

Switching theme never changes your content or products. A section's layout and scheme follow the new
theme only where you had left the old theme's choice. Once you changed fonts, buttons or other
settings, a switch asks "Replace your font and button changes?": **Keep my changes** or **Replace**.
"Customised · Reset to theme" returns the fonts, buttons, spacing, mode and accent to the theme's own; your
sections stay as they are.

**Step 5.**

### Check the preview [#check-the-preview]

Hover a section in the preview to see its name; click it to edit it. The selected section has a
toolbar: **Move up**, **Move down**, **Duplicate**, **Hide**, **Delete**, **+ Above**, **+ Below**.
Hidden sections are not drawn, so show one again from its eye in the list. **Mobile** in the top bar
narrows the preview to a phone; **Desktop** widens it again.

![The editor with the preview narrowed to a phone width.](/screenshots/shop/editor-mobile.webp)

## Keyboard [#keyboard]

None of these show on screen, and none work while you type in a field.

| Keys                 | Does                                          |
| -------------------- | --------------------------------------------- |
| Ctrl/Cmd + Z         | Undo (the last 50 steps)                      |
| Shift + Ctrl/Cmd + Z | Redo                                          |
| Ctrl/Cmd + D         | Duplicate the selected section                |
| Alt + ↑ / Alt + ↓    | Move the selected section up or down          |
| Delete or Backspace  | Delete the focused section row                |
| Esc                  | Back from a section's or a product's settings |

## Check it worked [#check-it-worked]

> The top bar shows "Saved" after each change, and the preview shows the page as visitors will see it
> once you publish. The Shop page shows "Unpublished changes" until you do.

## Troubleshooting [#troubleshooting]

| You see | Why | Fix |
|---|---|---|
| "Edited in another tab" | The shop was changed in another tab or window, so this one holds an older draft. Publish is turned off. | Click Reload, then carry on editing. |
| "Couldn’t save — retrying" | The last save did not reach Fianto. | Wait: the editor tries again by itself. |
| A section row is tagged "Fix" | Fianto refused that section's content; "Couldn’t save" says why. | Open the section and correct the field. |
| "This section cannot be deleted" | A button points at this section and there is nothing else for it to point to. | Add another section or list a product first, then delete this one. |
| "A shop can have at most 30 sections. Delete one to add another." | The shop has 30 sections. | Delete a section you no longer need. |
| "Preview is not configured. You can still edit your shop." | The dashboard's preview is not set up on Fianto's side. | Carry on editing; publish and open your shop to check it. If it persists, write to support@fianto.xyz. |

## See also [#see-also]

- [Products and delivery](/merchants/shop-products): The Products tab and what each buyer gets.

- [Publish and manage](/merchants/shop-publish): Publish your changes, restore an older version, rename.