MerchantsShop
Design your shop
Arrange sections, pick a layout and colour scheme for each, choose one of ten themes and check it in the live preview.
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) and Theme (the look of the whole shop). It saves your draft as you go; visitors see nothing until you publish.
Before you start
- You have a shop, or a design saved on this device before approval. See Create your shop.
- On the Shop page, click Edit shop.
Steps
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).
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.
A field the chosen layout does not draw is hidden from the form but kept, so switching back brings it back.
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.
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).
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.
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.
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
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
| 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
Was this page helpful? Tell us