Canvas — visual editor
Path: Engage › Design › Canvas (/admin/settings/canvas)
Canvas is the full-screen editor of your store. The middle shows your real store as a preview, the left side lists the parts of the page (Layers) and the right side holds the settings panel. Click any element in the preview and edit it — you see the change straight away. Customers see it only after you click Publish.
In Canvas you edit pages, the product detail, the product card, the product listing, blog, FAQ, cart, checkout, header, footer and the overall look of the store (colours, fonts, widths).
Old screens open Canvas
The former Visual settings and Theme management screens, the page builder and the product block builder no longer exist — their links open Canvas. Everything you used to set there is here.
How to open Canvas
- from the sidebar: Engage › Design › Canvas,
- from the Dashboard — the start card "Build your pages in Canvas",
- from the pages list (Engage › Content & Theme › All Pages) — the Edit in Canvas action on a page row,
- from the page edit screen — the Canvas or Open Canvas button,
- from the product edit screen — More actions › Canvas (opens Canvas on that product),
- from the store itself: when you are signed in as staff, the edge of the page shows an Edit in Canvas tab, and quick search (Ctrl/⌘+K) offers Edit this page in Canvas.
Top bar
From left to right:
| Element | What it does |
|---|---|
| Close | Closes the editor and takes you back to the Dashboard. |
| Page picker | Switches what the preview shows. Group Store areas: Product listing, Blog, FAQ, Cart, Checkout. Group Pages: your pages (the first is Homepage). You can also simply click links inside the preview. |
| Page status (coloured dot) | Opens Page status: the Published / Hidden switch and the link Edit page details (URL, SEO, password)…. Visitors cannot see a hidden page; you can keep editing it in Canvas. The homepage must stay published. The switch applies immediately. |
| AI | Shows or hides the Merzio AI panel. |
| Layers | Shows or hides the left panel with the page tree. |
| Device icons | Switch the preview: desktop, tablet, mobile. |
| Languages (e.g. SK / EN) | Only in stores with more than one language. Switches the preview language and the language you are editing texts in. |
| View store | Opens the live store in a new tab. |
| Basic settings (gear) | The look of the whole store — colours, fonts, widths, cart, checkout. See below. |
| Unpublished changes | Lit when you have changes in progress. Click it to open the What will be published overview. |
| Discard | After a confirmation, discards all unpublished changes. |
| Save draft | Saves the changes in progress. The draft stays even if you close the editor. |
| Publish | Publishes all unpublished changes at once. |
Canvas has no undo
Canvas has no Undo or Redo button. If you make a mistake, correct the value by hand, or use Discard — but that discards all unpublished changes, not just the last one.
Working in the preview
- Move the mouse over an element. It is highlighted and a label says what it is — for nested blocks the whole path, e.g. "Section › Section › Card".
- Click it. Its settings open on the right and a toolbar with actions appears above the selected section.
- Change the values — the preview updates straight away.
- Press Esc to go one level up (from a card to the section it sits in).
The toolbar above the selected section
- the path to the selected block — click any level to select it,
- Section settings,
- Move up / Move down,
- Duplicate,
- Save section as template — the section then appears among your saved sections,
- Download section (for another store) — saves the section as a file,
- Remove section,
- + Section — adds a new section below this one.
The same actions sit at the top of the right panel.
Adding a section or block
Click + Section in the preview, Add section in Layers, or the + on a row in Layers. A picker opens. The new element is inserted where the blue line is in the preview.
The picker contains:
- the Search sections… field,
- Saved sections — sections you saved as a template,
- Upload section from file — inserts a section downloaded from another store,
- Cards in a row — presets 1× to 4×: one click inserts a row with 1 to 4 cards side by side,
- blocks in the groups Essentials, Banners, Cards & tabs, Content & marketing, Other,
- Page templates — replace the content of the whole page with a saved template (still only as a draft),
- Save current page as template,
- Download page — saves the whole page as a file.
The individual blocks and working with templates are described on the Blocks and templates page.
Moving between stores
You can download a section or a whole page as a file and upload it in another Merzio store. Images travel with the file.
Layers (left panel)
The Layers panel shows everything the page in the preview is made of.
- The top row is Header, the bottom row is Footer — click to open their settings.
- Between them are groups, depending on what the preview shows:
- a page — its sections,
- product detail — blocks in the zones Below cart, Above description and Below description,
- product listing — blocks Above products and Below products.
Each row has:
- an eye — hides or shows the block without deleting it,
- + (Add below this block),
- the More actions menu: Move up, Move down, Duplicate, Move into: … (any layout or card on the same surface), Move out, Wrap in a new layout section, Delete.
You can also drag rows with the mouse — within the page, into a layout section and out of it. Moving between surfaces is not possible: a page block cannot be moved to the product detail or the product listing, and vice versa.
Section elements
Under a section, Layers lists its elements — for example Title, Text, Button, Second button. Each has an eye (hide / show) and a remove button. The Add element (n/m) row shows how many of the possible elements the section uses and adds a missing one.
Slides and items
Sections with a list show the items as rows of their own: carousel slides (+ Add Slide), tiles (+ Add Tile) and other repeated items such as features (Add item). You can add, duplicate, delete, move and drag items.
The section panel (right)
The panel of the selected section starts with Section content — the list of its elements and items, so you can reach them without Layers. Below it are the tabs Content, Design and Other.
Editing text right in the preview
When you click a text in a section (title, description, button), a small toolbar appears above it:
- Text colour (for a button also Button colour),
- Size — changes the size for the device the preview is currently showing (desktop, tablet or mobile),
- Font weight,
- Alignment,
- Uppercase,
- Letter spacing,
- All settings in the panel — opens the full settings on the right.
You rewrite the text itself in the right panel. Titles and descriptions there also offer simple formatting: Bold, Italic, Link; insert a line break with Shift+Enter.
What you can edit in Canvas
Pages
Add, move, duplicate, hide and delete sections as described above. Every section has its own width and spacing.
Product detail
Open a product in the preview (or open Canvas from the product edit screen) and click what you want to change:
- Product — name, short and long description and the image order (the first is the main one). New images are uploaded on the product edit screen.
- Groups shared by all products: Detail appearance, Detail spacing (including Detail width with the Inherit site width option), Add to cart button, Delivery accordion, Reviews section, Parameters, Price, Detail display, Stock & delivery.
- Product blocks — for each you set Placement (Below cart / Above description / Below description) and Scope: All products (the block is on every product) or This product only.
Product card
Click a product card anywhere in the preview. You choose the Card variant separately for desktop, tablet and mobile; colours, corner radius, border and the add-to-cart button follow. There is one card for the whole store — product listing, grids and recommendations.
Product listing
Choose Product listing in the page picker or open a category in the preview. The settings are grouped: Page layout, Listing layout, Hero section, Sorting, Top description, Bottom description, Quick category menu, Filters sidebar, Grid and paging, Pagination.
All categories, or just one?
The top of the panel shows what you are editing: All categories and brands, or only This category (or This brand). A change for all categories applies across the store; a change for one category applies only to it. Use Reset this category to global to return a category to the shared settings.
Blog and FAQ
Choose Blog or FAQ in the page picker and edit the title, subtitle, colours and layout.
Blog and FAQ save immediately
These two panels carry the note Saves immediately (no draft). The change is live in the store at once; it does not wait for Publish.
Header
Click the header in the preview or Header in Layers. You will find: Header variant, Element layout, Menu (click a link in the preview to open its text, address and design), Dropdown menus, Header colors, Logo, Search, Announcement bar, Mobile menu and a link to Breadcrumbs.
- Mobile menu — opening animation, panel width, colours and font weights. Switch the preview to mobile and open the menu. Banners, contacts, text and social links above or below the menu items are added with the Edit mobile menu blocks link at the end of the panel — see Mobile Menu Blocks.
- You add and delete menu items in Engage › Design › Menu Management; in Canvas you edit the existing ones.
Announcement bar
In the header panel you edit the text and link of existing announcements and how they are shown — Rotation (carousel) or Continuous run (marquee), speed, direction and arrows. Create a new announcement in Engage › Marketing › Announcements.
Footer
Click the footer or Footer in Layers. You can edit the footer logo, the bottom bar text, the payment method logos and the links in the columns. If you use a footer composed in the footer builder, the panel sends you there with the Open Footer builder button (Engage › Design › Footer Builder).
Basic settings
The gear in the top bar opens the settings that apply to the whole store:
| Section | What you set |
|---|---|
| Brand & colors | Primary and secondary colours, text, background and state colours. |
| Typography | The store's fonts and their weights. |
| Logo & favicon | Logo for desktop, mobile and footer, its size, the favicon. |
| Search | Variant and look of the search field. |
| Category sidebar | Turning on the desktop category side menu and how it behaves. |
| Breadcrumbs | Display on desktop and mobile, colours, font size. |
| Product listing | The listing layout and the filters layout. |
| Layout & widths | Page widths and spacing — see below. |
| Forms & toggles | Form fields, pill buttons, sign-in tabs at checkout. Applies to the whole store. |
| Cart behavior | What happens after adding to cart. |
| Checkout & cart | The checkout layout and the look of the shipping and payment selection. |
Ready-made themes (the whole look of the store at once) are not here — find them in Engage › Design › Themes.
Layout & widths
- Store widths — the width of the whole store and, separately, of the header, the product listing and the homepage. For those three you can choose Inherit site width.
- Page top spacing (px) and Page bottom spacing (px) — separately for Desktop, Tablet and Mobile, 0 to 240 px. The value is added to the existing spacing; 0 or an empty field changes nothing.
The product detail width is set on the product detail, in the Detail spacing group (Detail width).
Cart behavior
Under After adding to cart choose one option:
- Slide-out cart — the cart panel slides out after adding,
- Modal window — a window with recommended products opens,
- No action — the customer stays on the page and only the cart count changes.
Checkout & cart
- Checkout layout
- Everything on one page — the whole checkout on one screen.
- Step by step (1 – 2 – 3) — 1 Shipping & payment (including the delivery country) → 2 Your details → 3 Summary. The next step unlocks for the customer only when the previous ones are filled in correctly. In the Canvas preview you can switch steps freely.
- Shipping & payment
- Pills — compact — methods as small buttons,
- Cards — detailed — full-width cards with logo, description and price.
- Sign-in at checkout — the look of sign-in and registration at checkout.
- Preview as a guest shopper — a switch for the preview only. Sign-in, registration and "Create account" are shown to guests only, and in Canvas you are always signed in.
Checkout in the preview
The checkout appears in the preview only when the cart holds at least one product. Add one right in the preview.
Draft and publishing
Almost everything in Canvas is a draft until you click Publish: page sections, design and basic settings, the product listing, menu items, announcements, product texts and blocks, the logo, stock and delivery texts and the display switches. These settings carry the note Applied when you hit Publish.
Only the Blog and FAQ page settings save immediately (and the Published / Hidden switch of a page).
- Save draft — saves the changes in progress without publishing. You can come back to the work later.
- What will be published — click Unpublished changes. You see the list of pending changes: added, changed and removed sections, old and new design values, changes in the product listing, menu, announcements and blocks.
- Publish — publishes everything at once. You see "Published. Your changes are now live."
- Discard — discards all unpublished changes.
Canvas has no change history. If you want to keep the current look of the store before a bigger change, save it as a theme in Engage › Design › Themes.
Changes of a single product
If a product has unpublished changes from Canvas, the product edit screen shows the notice This product has unpublished changes from Canvas. You can publish or discard them right there for that product only — the store's other changes in progress stay untouched. Do this before you save the product in the admin, otherwise a later publish from Canvas overwrites your save.
Merzio AI in Canvas
The AI button in the top bar opens the Merzio AI panel. Describe what you want (or attach an image) and the AI sets colours, fonts and sections. It writes everything as a draft — you check it in the preview and publish it yourself. The AI writes its CSS into a separate field, CSS from the AI designer; it does not change your Custom Code.
Related pages
- Design (overview) — what is where in the Design menu
- Blocks and templates — the block catalogue and working with templates
- Merzio AI — the assistant that designs the look and writes content