Pages, Blocks and Templates (Page Builder)
This guide explains how content pages are made in Merzio: where you create a page, which blocks you build it from, how you save templates and how you move them to another store. At the end you will find a short overview of the related tools – blog, FAQ, popups, announcements, menus, footer, redirections and recommenders.
Pages are edited in Canvas
The old standalone Page Builder screen no longer exists. Page content is built in Canvas – a live preview of your store where you click what you want to change. Old links and bookmarks take you to Canvas automatically. How to work in Canvas (layers, device previews, drafts and publishing) is covered on its own page, Canvas; this page is about pages, blocks and templates.
1. Pages
Path: Engage › Content & Theme › All Pages
The page list
The list shows every page with its address, template, status (Published / Draft) and creation date. The homepage carries a Homepage badge. Above the table there is a search field and a Filter (status, template, parent page).
On each row you will find:
- the eye icon – View page on the site,
- the pencil icon – Edit (page details, SEO, publishing),
- the brush icon – Edit in Canvas (page content),
- the ⋯ menu – Publish / Unpublish, Duplicate, Download page and Delete. The homepage cannot be deleted.
Above the list, the Special Pages card links to the settings of the product listing, blog and FAQ – these three listings have their own configuration screens.
Creating a page
- Click Create Page.
- Basic Information – fill in the Title (separately for each language), the Slug (the page address, filled in from the title), the Template and optionally a Parent Page.
- Start from Page Template – if you have saved page templates, pick one in the Saved Blueprint Template field. The layout is copied into the new page once.
- SEO Settings – Meta Title, Meta Keywords (comma separated) and Meta Description. Empty fields use the store defaults.
- Page Settings – Featured Image, Sort Order and the switches Published, Homepage and Password Protected.
- Available Locales – choose the languages the page should exist in. If you select none, it is available in all of them.
- Click Create Page. The page is saved and opens in Canvas, where you add its content.
Editing a page
Click the page name or the pencil icon to open its details. Compared with the create form you will also find:
- Page Max Width – a width for this page only. Cart and checkout always use the store default; the homepage width follows the global look settings.
- the Content Blocks card – the list of sections the page contains. You edit the content itself with the Canvas button (Open Canvas on an empty page).
- the Preview button – opens the page in the store.
Save your changes with Save Changes in the floating bar.
What a page supports
- Translations – the title and SEO fields are filled in per language.
- Homepage – the Homepage switch decides which page is shown at the store's root address.
- Password protection – after switching on Password Protected you enter a Password; visitors must type it before they see the page.
- Hierarchy – use Parent Page to create subpages.
- Publishing status – an unpublished page stays a draft and customers do not see it.
2. Block catalogue
A page is made of sections (blocks). You add a new section in Canvas with the + button – it opens the Add section window with a search field (Search sections…) and the blocks sorted into groups. Hovering over a block shows its description on the right.
| Group | Block | What it is for |
|---|---|---|
| Essentials | Hero Section | Opening banner – a single image, a carousel or a bento grid |
| Essentials | Layout Section | A container with columns that holds other blocks |
| Essentials | Headline | A heading with size, colour and alignment options |
| Essentials | Text | A block of formatted text |
| Essentials | Rich Content Block | A text editor with the full toolbar |
| Essentials | Product Grid | Products in a grid or carousel |
| Essentials | Image | A single image |
| Banners | Banner Grid | A carousel of promotional cards |
| Banners | Banner with Product | A banner with text and a product card |
| Cards & tabs | Card | A general-purpose card with content and a button |
| Cards & tabs | Benefit Card | A card with an icon or image, a headline and text |
| Cards & tabs | Contact Card | A card with contact details and a button (link, e-mail, phone) |
| Cards & tabs | Accordion | A collapsible item with a headline and formatted content |
| Cards & tabs | Tabs | Content split into tabs |
| Cards & tabs | Button | A standalone button with a link |
| Cards & tabs | Divider | A horizontal line between sections |
| Content & marketing | Testimonials Section | Customer reviews |
| Content & marketing | FAQ Section | Questions and answers from the FAQ module |
| Content & marketing | Blog Grid | Blog posts in a grid or carousel |
| Content & marketing | Category Grid | Categories in a grid or carousel |
| Content & marketing | Features Section | Benefits in a grid – icon, heading, text, optional link |
| Content & marketing | UPS Statistics | Cards with figures (orders, customers, experience…) |
| Content & marketing | Newsletter | A newsletter sign-up form |
| Content & marketing | Contact Form | A form with your own fields |
| Content & marketing | Contact Info Bar | A bar with contacts, icons and links |
| Content & marketing | Product Recommender | Products from a chosen recommender |
| Content & marketing | Downloadable File | A file to download (PDF, manual, specification) |
| Content & marketing | Map Embed | A map or another embedded frame |
Blocks that belong to none of the groups are listed at the end under Other.
Besides single blocks the window offers:
- Cards in a row – one click inserts a layout section with 1 to 4 columns and a card in each,
- Saved sections and Page templates – your own templates (see part 4),
- Upload section from file – inserts a section downloaded from another store.
Blocks inside blocks
A Layout Section and Tabs hold other blocks. Open a nested block by clicking it in the preview or in the layers panel and edit it in its own panel.
3. Section settings
When you click a section in Canvas, its panel opens. The settings are split into three tabs:
- Content – texts, images, links and other visible content,
- Design – colours, sizes, spacing, borders and the overall look,
- Other – Visibility (hide the section completely or only on mobile, tablet or desktop) and Advanced (CSS hooks) – a custom CSS class and HTML id.
The Design tab is divided into collapsible groups: Typography · Spacing & sizing · Background & image · Border & shadows · Carousel · Button · Other styling. Only the groups that hold fields for the given block are shown.
Click the element itself
When you click a specific text or button in the preview, the panel opens the right tab and scrolls to that field.
Button settings
For blocks with a button the settings are split: the show/hide switch, text and link are on the Content tab; colours, border, radius and padding are on the Design tab in the Button group.
At the top of the panel there are icons for working with the section: Move up, Move down, Duplicate, Save section as template, Download section (for another store) and Remove section.
Changes in Canvas are a draft first – customers see them only after you click Publish. See Canvas for details.
Hero Section
The Hero Section opens a page – an image or video with text and buttons.
Layout – choose one of three options:
- Single Hero – one large banner,
- Carousel/Slider – several slides that rotate,
- Bento Grid – a grid of tiles in different sizes.
Texts – the title and description are filled in per language; the title can be hidden with Show Title. Colours (Title Color, Description Color) and text sizes for desktop, tablet and mobile are on the Design tab. The width of the text area is set by Content Max Width.
Section height – each option also states its height in pixels:
- Small (192 px)
- Medium (384 px)
- Large (512 px)
- Extra Large (640 px)
- Full Screen (100 % height) – the banner fills the whole window height
- Auto or Custom – height by content or a value you enter
Images – you can upload a separate image for desktop, tablet and mobile and choose how it fits its frame (Object fit). Enable zoom animation adds a gentle zoom on hover (mainly in the bento layout).
Recommended image size
Below the image upload field you will see a Recommended size in pixels. It is calculated from the block type, the chosen width and height of the section and the device, so the image stays sharp on high-density screens too. It is a recommendation, not a requirement.
Secondary button – next to the main button you can switch on a Secondary button with its own text, link and style (Text with arrow, Outline or Filled). Empty colours are filled in automatically according to the style.
Slides (carousel and bento) – with the Carousel/Slider and Bento Grid layouts each slide is edited on its own. Slides appear in the section panel and in the layers panel as child items – you can add, duplicate, remove and reorder them. A slide has its own content (background – image or video, title, subtitle, description, button, link) and its own design (text colours and sizes, overlay). Slides in other carousel blocks, such as the Banner Grid, are edited the same way.
Rich Content Block
The most versatile block for text, images, videos and tables. It has an optional title and a text editor with a toolbar:
- text formatting (bold, italic, underline, strikethrough), headings, font and size,
- text colour and highlight, alignment, bulleted and numbered lists,
- links, images, videos and tables,
- full-screen mode and source code (the
</>icon), where you edit the HTML directly.
TIP
Source code is handy when you paste ready-made structured content from another system.
In the block settings you also choose text alignment, maximum width, background and the padding and margin for each device.
Benefit Card
A card with an icon or image, a headline and a short text – ideal for store benefits (free shipping, 30-day returns…).
- Icon or image – enter an icon name in the form
set:name(for exampleheroicons:check-circle) or an image address. An icon name always contains a colon. - Icon/Image Size (px) and Icon Color (the colour applies to icons only, not to images).
- Headline with a choice of HTML tag, and a subheadline with the description.
Several cards side by side
For three or four benefits in one row, use the Cards in a row preset in the Add section window and then fill the cards in, or insert a Layout Section and add Benefit Cards to its columns.
Features Section
A section that shows several benefits at once in a grid. You add items to a list – each has an icon or image, a heading, text and an optional link (shown only if you fill it in). The items appear in the layers panel as child rows, so you can duplicate, move and remove them. In the design you set the number of columns, colours, border, shadows and text sizes.
4. Templates and moving content between stores
Templates save time with repeated content. There are two kinds:
- a section template – one saved block (for example a row of benefits or a banner),
- a page template – a whole page layout.
Saving a template
- Section: select the section in Canvas and click the bookmark icon Save section as template at the top of its panel. Enter the Template name. The original section is linked to the new template straight away.
- Page: open the Add section window (the + button) and click Save current page as template under Page templates.
Using a template
- Saved sections – click a template in the Add section window and it is inserted where you opened the window.
- Page templates – clicking a template replaces the content of the current page. Canvas asks for confirmation; the change is a draft and the live page changes only after Publish.
- New page – you can also pick a page template in the new page form, in the Saved Blueprint Template field.
Linked templates
A section inserted from a template stays linked to it – at the top of its panel you see a badge with a chain icon and the template name. This lets you edit the content in one place and have the change applied everywhere.
Update template:
- Edit the linked section on any page.
- Click the Update template icon.
- Confirm the dialog, which tells you how many linked sections will change.
Content and look are overwritten in all linked sections. Each section keeps its own placement – device visibility, spacing, width, height and margins.
Detach from template: the Detach from template icon turns the section into a standalone copy that later template updates no longer touch.
WARNING
A template can be updated only from a section of the same type. The system rejects a block of a different type.
Where linking works
Linking applies to page sections and to product detail blocks that you insert in Canvas, and also to blocks in the blog post content editor and in the popup builder. A template inserted inside another block (into a layout section or tabs) or into the product listing is inserted as a standalone copy. The Footer Builder does not use templates.
Managing templates
Path: Engage › Content & Theme › Layout & section templates
The screen has two cards:
- Page templates – the Edit template icon changes the name and description; Delete template is in the ⋯ menu.
- Section templates – each one shows in how many places it is used (Used in … places). The Edit template icon opens the template editor; after saving, the change is applied to all linked sections. The Download icon saves the template as a file; Delete template is in the ⋯ menu.
The Upload section from file button in the header adds a section downloaded from another store to your templates.
Moving sections and pages between stores
You can download a section or a whole page as a file with the .merzio.zip extension and upload it to another Merzio store.
Downloading:
- section – in Canvas, the Download section (for another store) icon at the top of the section panel, or the Download icon next to a section template in template management,
- page – Download page in the ⋯ menu of the page list, or in the Add section window in Canvas. The saved draft of the page is downloaded.
Uploading:
- section – in the Add section window in Canvas click Upload section from file. The Also save to section templates option adds it to your templates at the same time. The section is inserted into the draft like any other block.
- page – in the page list click Import page. A new, unpublished page is always created and opens in Canvas. An import never overwrites existing content.
What happens on import:
- images from the package are added to the media library,
- products and categories are matched by SKU and URL – if they are not found in the target store, the import tells you and you pick them again,
- a block the target store does not know is skipped and a warning is shown,
- fields that belong only to the original store are cleared and need to be set again.
So read the list of warnings after an import and check the section.
5. Media Library
Path: Engage › Content & Theme › Media Library (opens as a pop-up window)
The media library is the shared storage for the images, videos and documents of the whole store. Besides the menu, you open it from every image field – in Canvas, on products, in the blog and in the FAQ – with Select from Library.
- Upload new files directly in the library window.
- Find files with the Search media... field and filter them by type (Images, Videos, Documents).
- For an image you can add Alt text and copy its address (Copy URL).
- Deleting a file cannot be undone.
Menu items you do not see
Blog, FAQ, popups, announcements, the Footer Builder and recommenders are optional features. If a menu item is missing, switch it on in System › Store features.
6. Blog
Path: Engage › Content & Theme › Blog › All Posts
The post list
The table shows the title, status (Published / Draft, possibly Featured), categories, author and published date. For each post you can:
- Edit – the post details,
- Content editor – opens the post content editor, where you build the article from blocks,
- View on Site – opens the post in the store,
- Publish / Unpublish,
- Feature / Unfeature,
- Delete.
A new post
Click Create Post. The form has three tabs:
- Basic – title, content, excerpt (a short text for listings; created automatically when empty), slug, featured image, author, categories, tags, published date and the switches Published and Featured,
- SEO – meta title, meta description and meta keywords,
- Localization – the languages the post should be available in.
Save the post with Create Post. The Create and open content editor button saves it and opens the post content editor right away.
Blocks take priority
If a post contains sections built in the content editor, the store shows those – not the text from the Content field.
Categories, tags and appearance
The same part of the menu holds Categories, Blog Tags, Blog Configuration (the look of the post listing) and Card Configuration (the look of a post card).
Show posts on any page with the Blog Grid block.
7. FAQ (frequently asked questions)
Path: Engage › Content & Theme › FAQ › All FAQs
The list shows the question, categories and status. Add a new item with Create FAQ:
- Question and Answer – separately for each language, the answer in a formatting editor,
- Meta Title and Meta Description – optional,
- FAQ Image – an optional image for the answer,
- Sort Order – a lower number is shown higher,
- Categories, Available Locales and the switches Published and Featured.
Add many questions at once with Import FAQ (get the sample file with Download template); save existing questions with Export.
The menu also holds Categories and FAQ Configuration (the look of the questions page). Put questions on any page with the FAQ Section block.
8. Popups
Path: Engage › Marketing › Popups
The list has the tabs Active and Trash – a deleted popup moves to the trash, from where you can restore it. Create a new one with Create Popup.
Each popup has two main actions:
- Open Builder – build the popup content from blocks, much like a page,
- Edit Settings – the popup's behaviour:
- trigger – Page Load, Scroll, Exit Intent, Click or Time Delay,
- size, position, overlay and animation,
- Display Frequency – how often the popup is shown to the same visitor,
- User Targeting (logged-in / guests), Devices and Page Targeting (where the popup is shown and where it is not),
- Schedule – from when until when the popup is active.
You can also Duplicate a popup. Save the settings with Save Settings.
9. Announcements
Path: Engage › Marketing › Announcements
Announcements are short messages in the bar above the store header. Create a new message with Add announcement:
- Announcement message – the bar text,
- URL (Optional) – where the message links to,
- Start Date and End Date – optional; without them the message is always shown,
- Priority and status (active / inactive).
The look of the bar (colours, rotating messages or scrolling text) is set in Canvas – the Open Canvas button takes you there. You can also edit announcement texts directly in Canvas in the Header panel.
10. Menu Management
Path: Engage › Design › Navigation & layout › Menu Management
Menu locations
The screen is divided by the place where a menu is shown:
- Header Menu – the store's main navigation,
- Header Top Menu (Double Decker) – an extra row above the header with the double-decker header,
- Category menu (desktop sidebar) – the side category menu,
- Footer Menu – links in the footer, without dropdown panels.
Categories are not added automatically
A new category does not appear in a menu by itself. Add it as an item in the relevant location.
Adding an item
- In the given location click Add item.
- Choose what you want to add. The types are split into three groups:
- Content – Page, Custom Link, External Link, Product Listing, Blog, Blog Category, FAQ, Services,
- Catalogue – Category, Brand, Brand list (brands are offered only when brand pages are switched on),
- Advanced – Parent Menu, Mega Menu, Category Menu, Parent Category Menu, Main Categories Grid, Show More.
- Fill in the form. The Config tab holds the Item name (per language), Location, Parent Menu, the link target (a page, a category or a URL) and the switches Active and Open in new tab. On the Design tab you set the item's icon, image and colours.
Not every type is available in every location – the picker shows only those the place supports.
The "Mega Menu" type
With the Mega Menu type (as with a category and a brand) the URL field is not shown. A Mega Menu is a trigger for a dropdown panel and does not link anywhere itself; you choose its content – categories and other items – further down in the form.
Order and sub-items
Drag an item to change the order. Add a sub-item with Add sub-item on the parent item.
You can also edit the names and other properties of menu items in Canvas – by clicking an item in the header preview. Adding, deleting and moving items stays in Menu Management.
11. Footer Builder
Path: Engage › Design › Navigation & layout › Footer Builder
The footer is made of rows. Each row has its own column layout, and you place blocks into the columns.
Rows
- Add a new row with Add Row, or with Add row above / Add row below on an existing row.
- The gear icon opens Row Settings. In the Layout Type field choose 1 column (full width), 2, 3, 4, 5 or 6 columns, or Custom with your own column count. Here you also set the row's gap, background, padding and device visibility.
- Move rows with the up and down arrows.
- Removing a row asks for confirmation – all blocks in the row are deleted with it.
The side panel
The panel on the left has three tabs:
- Blocks – the block palette. Drag a block into a column, or click it – it is added to the first column of the first row. You can also add a block with Add Block right in a column.
- Settings – the settings of the currently selected block or row. Until you select something, the panel asks you to click a block or a row.
- Layout – the look of the whole footer: Container (Max Width, Center Content), Padding, the default gap between columns, Colors (background, text, headings, links) and the Bottom Bar with the copyright text. The copyright text can contain placeholders for the current year and the store name – the hint is right next to the field.
Empty field = from the theme
If you leave a colour or the max width empty, the footer takes it from the store theme (for a colour this is the From theme option). The footer then matches the store even after you change colours in Canvas.
Block types
Blocks are sorted into the groups Navigation, Logos, Social, Forms, Content, Branding, Utility and Layout:
Menu Column, Single Link, Payment Logos, Courier Logos, Custom Logos, Social Links, Instagram feed, Newsletter, Text Block, Contact Info, Footer Logo, Language Switcher, Spacer, Divider.
Payment logos, courier logos and social links are filled in automatically from the store settings.
Saving and preview
- Everything – rows, blocks and look – is saved by one button, Save Changes. Until you save, the header shows an Unsaved changes badge and nothing changes in the store.
- The mobile / tablet / desktop switch shows the footer at the width of that device.
- The Preview button creates a temporary link where you can see the footer in the store before it goes live. Copy the link (Copy preview URL) or cancel it (Cancel preview).
- The Active / Inactive switch turns the footer from the builder on or off.
12. Redirections
Path: System › Basic Settings › Redirections
A redirection sends a visitor (and a search engine) from an old address to a new one – useful when a page address changes or when you move from another system.
- Click Add Redirection.
- Fill in From URL (the old address, for example
/old-page) and To URL (the new address). - Choose the Redirect type – most often 301 - Permanent; 302 - Temporary, 307 and 308 are also available.
- Optionally add Notes and save.
Other options on the screen:
- Import CSV / Export CSV – bulk work with redirections,
- Import from Sitemap – reads addresses from the old site's sitemap and helps you assign new targets,
- Test Redirection URL – checks where a specific address leads,
- the Hits column – how many times a redirection has been used.
13. Product Recommenders
Path: Insights › Analytics › Recommendations › Product Recommenders
A recommender is a rule that selects products to show – for example similar products, recently viewed or best sellers. With Create Recommender you set:
- Placement – where the recommender appears (home page, product detail, cart, product listing…),
- Recommendation Type – how the products are selected,
- Layout – for example a grid or a carousel,
- Product Selection – automatic or manual,
- Maximum Products.
Put a recommender on your own page with the Product Recommender block.
14. Store look and themes
- Global look – colours, fonts, buttons, the header and other shared settings are edited in Canvas in the Basic settings panel. See Canvas.
- Ready-made themes – prepared store looks are in Engage › Design › Themes.
Tips
- Hiding a section by device – in the section panel, on the Other tab, open Visibility and switch off Show on mobile, Show on tablet or Show on desktop. Hidden (don't show on storefront) hides the section completely.
- Several languages – text fields have a language switch; fill in the content for every language the page exists in.
- Changes not visible in the store? You probably only have a saved draft in Canvas – click Publish. For the footer, remember Save Changes.
- Custom styles – you can give a section a custom CSS class or HTML id (Other tab › Advanced (CSS hooks)) and style it in your custom code.