Merzio

English

Slovenčina
Čeština

English

Slovenčina
Čeština

Appearance

Page Builder — Complete Guide ​

Welcome to the Page Builder documentation for Merzio. This guide will help you understand and master our visual block editor, which allows you to create and edit pages for your e-commerce store without any coding. Page Builder is an intuitive drag-and-drop editor that lets you work with 28 different block types and create professional-looking pages quickly and easily.

1. How the Page Builder Works ​

Page Builder is a block-based drag-and-drop editor that lets you visually create page content. It works on the principle of dragging blocks onto a canvas, where you can change their order at any time, adjust their settings, and see changes in real time.

How to Access the Builder ​

Path: Admin > Content > Pages

There are two ways to access the Page Builder:

  • New page: When creating a new page, click the "Create and open editor" button. The system will automatically redirect you to the Builder.
  • Existing page: When editing an existing page, click the editor icon or the "Open editor" button. In the address bar you will see a URL in the format /admin/pages/{id}/builder.

2. Page Builder Interface ​

The Builder interface is divided into four main sections:

Top Toolbar ​

The top toolbar contains all main actions and tools:

  • Save page template — Saves the entire page layout as a reusable template
  • Apply page template — Applies a previously saved page template
  • Insert section template — Inserts a saved section template at a position on the canvas
  • Store (Store preview) — Page preview in the store
  • Hide templates — Hides the block templates panel
  • Preview — Opens a page preview
  • Mobile/Tablet toggles — Changes the viewport to mobile or tablet (for responsive testing)
  • Settings (gear icon) — Opens page settings
  • Save — Saves all changes on the page

Left Panel — Block Templates ​

The left panel displays a list of all available block types. You can:

  • Browse blocks — Use the search field to quickly find a specific block type
  • View blocks — Scroll through the list of available blocks
  • Drag blocks — Grab any block and drag it onto the canvas

Center Panel — Canvas ​

The center panel is your workspace where page content is created. All blocks are visible with:

  • Block outlines — Clearly visible borders around each block
  • Controls — Buttons for block management (see section 3)
  • Live preview — Real-time preview of how the page will look

Right Panel — Block Settings ​

When you click on any block on the canvas, the right panel appears with the title "Edit block". This panel displays all available settings for the selected block, such as:

  • Text fields — For titles, descriptions, and other content
  • Color pickers — For changing colors
  • Layout options — For changing block structure
  • Media tools — For uploading images and videos

3. Block Controls ​

Each block on the canvas has its own set of controls. These controls allow you to manage and edit blocks without needing to open the right panel.

Block Control Elements ​

For each block on the canvas you will find:

  • Block number and name — For example "#1 Hero section" or "#5 Card"
  • Up/Down arrows — Move the block one row up or down
  • Duplicate — Creates a copy of the block with the same settings
  • Save section template — Saves an individual block as a reusable template
  • Delete (trash icon) — Removes the block from the page
  • Expand/Collapse — Hides or shows the block content on the canvas

4. Available Block Types ​

Page Builder offers 28 different block types, each designed for a specific purpose. Below you will find a complete table and detailed descriptions.

Overview of All Blocks ​

Name (SK)English NameDescription
AkordeónAccordionExpandable sections with title, subtitle, and formatted content
Karta výhodyBenefit CardRECOMMENDED — Card with icon/image, title, and subtitle
Blog mriežkaBlog GridGrid or carousel of blog posts
TlačidloButtonCTA button with customizable styles
KartaCardUniversal card with content, styles, and layout options
Kontaktná kartaContact CardCard with icon/image, title, and contact details
Kontaktný formulárContact FormForm with customizable fields
Kontaktná lištaContact BarBar with 4 contact methods, icons, and links
Features SectionFeatures SectionPROBLEMATIC — JSON array causes rendering errors
NadpisHeadingHeading with size, color, and alignment options
Hero sekciaHero SectionHero banner with carousel/bento options, video, and publishing schedule
Mriežka produktovProduct GridProduct grid with customizable column count
Mriežka kategóriíCategory GridCategory grid or carousel
Mriežka bannerovBanner GridHorizontal carousel of promotional cards
Časté otázkyFAQExpandable question and answer section
Sekcia referencieTestimonialsCustomer reviews loaded from approved reviews
Blok formátovaného obsahuRich Content BlockWYSIWYG editor with full formatting toolbar
ObrázokImageSimple image block
Banner s produktomProduct BannerBanner with text on the left and product card on the right
NewsletterNewsletterNewsletter subscription form
Sekcia rozloženiaLayout SectionContainer for nested blocks with layout options
Vložená mapaEmbedded MapEmbedded Google Maps or custom iframe
Odporúčač produktovProduct RecommenderProduct recommendation block
ZáložkyTabsTabbed content, each tab with formatted text
TextTextFormatted text block
UPS štatistikyUSP StatisticsStatistics cards (orders, partners, customers, experience)
OddelovačDividerHorizontal line separating sections
Na stiahnutieDownloadBlock for file upload and download
Fakturačné údaje / FormulárBilling Info / FormTwo-column layout with billing details and form

5. Detailed Settings for Key Blocks ​

Hero Section ​

The Hero section is ideal for creating an engaging page introduction with an image, text, and layout options.

Layout ​

Choose from three options:

  • Single Hero — One large banner
  • Carousel/Slider — Scrollable banners
  • Bento Grid — Banner grid in various sizes

Title ​

  • Title — Main text (multilingual)
  • Show title — Toggle to hide/show
  • Title color — Color picker (hex code)
  • Responsive sizes — Text sizes for different devices (text-xs to text-4xl)

Description ​

  • Description — Subtitle (multilingual)
  • Description color — Color picker

Colors ​

  • Title color — Main text color
  • Description color — Subtitle color
  • Fallback text color — White or black (for cases when the image is not visible)

Maximum Content Width ​

Choose from the following options:

  • max-w-sm — Small width
  • max-w-md — Medium width
  • max-w-lg — Large width
  • max-w-xl to max-w-7xl — Very large widths
  • Full width — No width limitation

Alignment ​

  • Horizontal — Left, center, or right
  • Vertical — Top, middle, or bottom

Background Images ​

You can set separate images for:

  • Desktop — Image for desktop
  • Mobile — Image for mobile
  • Tablet — Image for tablet

For each image you can set:

  • Object Fit — cover, contain, fill, or other options
  • Image rounding — Rounded corners (in pixels)
  • Zoom animation — Animation on hover

Publishing Schedule ​

  • End date — The page will stop being visible after this date
  • Responsive padding — Inner spacing for different devices

Rich Content Block (WYSIWYG) ​

The Rich Content Block is the most flexible tool for adding anything — from text and images to videos and tables.

Title ​

  • Title — Section title (multilingual)

WYSIWYG Editor ​

Click on the text area and a formatting toolbar will appear with the following tools:

  • Text formats — Bold, italic, underline, strikethrough, subscript/superscript
  • Font — Font family and size selection
  • Formats — Headings (H1 to H6), normal text
  • Colors — Text color and highlight
  • Alignment — Left, center, right, justify
  • Lists — Bulleted and numbered lists
  • Links — Insert hyperlinks
  • Images — Insert images
  • Videos — Insert videos
  • Tables — Create tables
  • Fullscreen — Full screen mode
  • Code blocks — Insert source code
  • Source code — See details below

Source Code Mode ​

For advanced users, the "Source code" option is available (icon </>). In this mode you can:

  • Edit raw HTML — Directly insert or edit HTML code
  • Preserve formatting — HTML code is automatically translated to formatted content

TIP

Source code is the most reliable option for adding structured content and is ideal if you have complex HTML content.

Responsive Padding/Margin ​

You can set inner and outer spacing for individual devices:

  • Desktop — Padding for desktop
  • Mobile — Padding for mobile
  • Tablet — Padding for tablet

The Benefit Card is ideal for displaying values, product benefits, or service features. Each card contains an icon/image, title, and description.

Recommendation

Use one Benefit Card block per value or feature. This is the safest and cleanest approach.

Configuration ​

  • Icon or image

    • If it is an icon, enter in the format: heroicons:icon-name (for example heroicons:star)
    • If it is an image, enter the image URL
    • Formats contain : — for icons, just enter the name with prefix

  • Icon/image size — Size in pixels (default value: 48px)

  • Icon color — Hex code (for example #B59A7D)

  • Icon/image alignment — Left, center, or right

  • Headline — Card title with tag selection (H1 to H6)

  • Subtitle — Card content description

Usage Example ​

If you want to display three main values of your company:

  1. Create three separate Benefit Card blocks
  2. For each card:
    • Set the icon (e.g. heroicons:heart)
    • Enter the icon color
    • Write the title and description
  3. Save the page

Features Section — WARNING ​

IMPORTANT NOTICE

The Features Section block has a problem with the JSON "Features" field:

  • When you enter a valid JSON array, the system displays dozens of empty "Learn more" cards instead of the expected items
  • Even when you enter an empty array [], 2 default fallback cards still appear
  • This causes a serious visual error on the frontend
  • The page may appear broken or incomplete

SOLUTION: Never use the Features Section block. Instead:

  • Use Benefit Card blocks (recommended above)
  • Or use Rich Content Block with custom HTML

6. Creating a Page — Step by Step ​

The following guide will show you how to create a new page from scratch.

Step 1: Open Page Management ​

Navigate to Admin > Content > Pages.

On the page you will find a list of existing pages and a button to create a new page.

Step 2: Create a New Page ​

Click the "New page" button (or similar). You will be redirected to the form at /admin/pages/create.

Step 3: Fill in Basic Information ​

Fill in the following fields:

  • Title — Page title (visible to users)
  • Template — Select a template (for example "Blank page" or "Store")
  • Saved layout template — Optionally: selecting a previously saved template will load all blocks (optional)

Step 4: Fill in SEO Data ​

In the SEO section, fill in:

  • Meta title — Page title in Google search results
  • Meta keywords — Keywords for SEO (separated by commas)
  • Meta description — Page description in Google results

Step 5: Publishing ​

Under Page settings, by checking the "Published" checkbox:

  • Verify the page is "Published" (indicated by a checkbox)
  • Optionally set a publishing date

Step 6: Open the Editor ​

Click the "Create and open editor" button. The system will create the page and automatically redirect you to the Page Builder.

Step 7: Search for Blocks ​

In the left panel you will find a list of all available blocks. You can:

  • Browse — Scroll through the list
  • Search — Enter a block name in the search field (for example "Hero" to find the Hero section)

Step 8: Drag Blocks onto the Canvas ​

Grab a block from the left panel and drag it onto the center panel (canvas). The block will appear where you drop it.

Step 9: Edit the Block ​

When you click on a block on the canvas:

  • The right panel appears with the title "Edit block"
  • Fill in all required fields (titles, colors, images, etc.)
  • Changes are automatically updated on the canvas

Step 10: Use the WYSIWYG Editor ​

If the block contains text content (for example "Rich Content Block"):

  • Click in the text area — The formatting toolbar will appear
  • Write or format text — Use the available tools
  • Insert images/videos — Click the corresponding icon in the toolbar
  • Source code — If you need HTML, click the </> icon and enter code directly

Step 11: Save the Page ​

You can click the "Save" button in the top toolbar at any time. All changes will be saved.

Step 12: Preview the Page ​

Click the "Preview" button in the top toolbar to open a preview of how the page will look in the store.

Step 13: Test Responsiveness ​

Use the "Mobile" and "Tablet" buttons in the top toolbar to test the page on different devices.

7. Templates ​

Page Builder allows saving and reusing templates. Templates help you save time when creating similar pages.

Save Page Template ​

When you have a finished page with a layout you like:

  1. Click the "Save page template" button in the top toolbar
  2. Enter the template name (for example "Product catalog")
  3. Click "Save"

The template is now available for future pages.

Apply Page Template ​

When creating a new page and you want to use a saved template:

  1. In step 3 of page creation (the "Saved layout template" field), select your template
  2. All blocks and settings from the template will be automatically loaded
  3. You can further edit them as needed

Insert Section Template ​

If you have a saved template for an individual block (section):

  1. Click the "Insert section template" button in the top toolbar
  2. Select the section template from the menu
  3. The template will be inserted at the current position on the canvas

Save Section Template (from an Individual Block) ​

When you have a block on the canvas that you like and want to use on other pages:

  1. Click the "Save section template" button on the block (in the block controls)
  2. Enter the template name
  3. The template is now available for insertion on other pages

8. Page Management ​

Page management allows you to control all aspects of your pages without needing the Page Builder.

Path: Admin > Content > Pages

Page Features ​

Merzio Page Builder supports:

  • Translatable title and content — Pages can be in multiple languages
  • Page Builder blocks — All blocks and settings created in the Builder
  • SEO fields — Meta title, keywords, and description
  • Publishing status — Published or as a draft
  • Page hierarchy — Parent page (for nested pages)
  • Homepage — Designation as homepage
  • Navigation and footer — Display in navigation and footer
  • Password protection — Options for password-protecting the page
  • Custom CSS/JS — Custom styles and scripts for a specific page
  • Redirects — Redirect to another URL
  • Recommender blocks — Recommended product configuration

9. Media Library ​

The Media Library is accessible via the Media Library or Select image button in various forms and editors (blog, FAQ, products, etc.).

How to Access the Media Library ​

  1. Click the Media Library or Select image button in any form
  2. A modal window opens with your media library
  3. Browse existing images or upload new ones

Uploading New Media ​

  1. In the library, click the Upload button or drag files onto the upload area
  2. Select an image from your computer
  3. The image is automatically uploaded and becomes available for selection
  4. Click an image in the library to select and confirm it

Managing Media ​

  • Browse all uploaded images in the library
  • Search for images using the search field
  • Deleted images are removed from the media library as well

10. Blog ​

The blog allows management of posts and their display on pages.

Path: Admin > Content > Blog (/admin/blogs)

Post List ​

Table of all blog posts with the following columns:

  • Title — Post title
  • Category — Assigned category
  • Author — Person who created the post
  • Date — Publication date
  • Status — Published / Unpublished / Featured

Post Actions ​

  • Unpublish — Hides the post from the public
  • Feature — Marks the post as featured
  • View — Opens the post on the public page
  • Edit — Opens the post editor
  • Delete — Permanently removes the post

Creating a New Post ​

Path: /admin/blogs/create

The post creation form is divided into 3 tabs:

Tab: Basic ​

  • Language selection — Language switcher (post is available in 10 languages)
  • Title — Required field, max. 200 characters
  • Content — WYSIWYG editor with a full set of tools (bold, italic, headings H1–H6, lists, links, images, videos, tables, source code)
  • Excerpt — Short description (max. 500 characters) displayed in listings
  • Slug — URL identifier, automatically generated from the title
  • Main image — Recommended format: JPG, PNG, recommended size: 1200×600 px
  • Author — Search field with autocomplete
  • Categories — Assign to multiple categories
  • Tags — Keywords separated by comma or Enter
  • Published — Checkbox to publish
  • Featured — Mark as a featured post

Tab: SEO ​

  • Meta title (per language) — 50–60 characters (recommended)
  • Meta description (per language) — 150–160 characters (recommended)
  • Meta keywords — Separated by comma

Tab: Localization ​

Checkboxes for all 10 languages — select in which languages the post will be visible.

Blog Categories ​

Path: /admin/blog-categories

Manage categories for organizing your posts. The table displays categories with Edit and Deactivate options. The Create category button opens a form to enter a new category name.

Blog Tags ​

Path: /admin/blog-tags

Browse all tags and their frequency of use. Options to edit, delete, and create new tags.

Integration with Page Builder ​

In Page Builder you can use the following blocks:

  • Blog Grid — Display posts in a grid or carousel
  • Testimonials — If you want to display featured posts

11. FAQ (Frequently Asked Questions) ​

The FAQ module allows you to create and manage frequently asked questions.

Path: Admin > Content > FAQ (/admin/faqs)

FAQ List ​

Table of all FAQ items with the following columns:

  • Question — Question text
  • Categories — Assigned categories
  • Status — Published / Unpublished
  • Actions: Edit, Delete

Creating a New FAQ ​

Path: /admin/faqs/create

  • Language selection — Language switcher (available in 10 languages)
  • Question (per language) — Required field, max. 300 characters
  • Answer (per language) — WYSIWYG editor with a full set of tools
  • FAQ image — Optional image for the answer
  • Sort order — Numeric field (lower number = higher position)
  • Categories — Assign to multiple categories
  • Published — Checkbox to publish
  • Available languages — Checkboxes for 10 languages

FAQ Categories ​

Path: /admin/faq-categories

Manage categories for FAQ items. Table of categories with edit and delete options. Button to create a new category.

Integration with Page Builder ​

In Page Builder you can use the block:

  • FAQ — Display questions and answers as expandable sections

12. Popups ​

Popups allow displaying notifications, offers, or other information to users.

Path: Admin > Content > Popups

Features ​

  • Create popups — Design and configure popups
  • Triggers — Set when the popup appears (time, scrolling, click, etc.)
  • Content — Page Builder blocks can be used in a popup
  • Styles — Customize popup appearance

13. Announcement Bar ​

The announcement bar is a status bar at the top or bottom of the page with important messages.

Path: Admin > Content > Announcement Bar

Features ​

  • Content — Message displayed in the bar
  • Styles — Background color, text color, and other CSS properties
  • Visibility — Set on which pages the bar is displayed
  • Position — Top or bottom of the page

14. Banners ​

Banners are promotional elements that you can attach to products, categories, or pages.

Path: Admin > Content > Banners

Features ​

  • Create banners — Design promotional banners
  • Placement — Assign banners to products/categories
  • Scheduling — Set visibility dates
  • Styles — Customize appearance

Integration with Page Builder ​

In Page Builder you can use the block:

  • Banner Grid — Display multiple banners in a horizontal carousel

15. Navigation (Menu) ​

Navigation (menu) is the main navigation element of your store.

Path: Admin > Content > Navigation (/admin/menu)

Available Menu Positions ​

The interface provides 4 menu positions:

  1. Header — Menu in the store header
  2. Top menu (Double) — Additional menu at the top
  3. Footer — Menu in the footer
  4. Category sidebar menu — Category menu on the side

When creating or editing a menu item, you can choose from 15 types:

Custom link, Page, Product list, Category, Blog, Blog category, FAQ, External link, Parent menu, Mega Menu, Menu category, Parent category menu, Product categories (grid), Show more, Services.

Add Menu Item Form ​

  • Name — Item name (available in 10 languages)
  • Type — Select the menu item type
  • Position — Location of the item in the menu
  • Parent menu — Assign to a submenu
  • URL — Custom URL (for selected types)
  • Active — Checkbox to activate the item
  • Open in new window — Open the link in a new tab

Menu items can be freely arranged and customized.

16. Footer ​

The footer is the bottom section of the page with information and links.

Path: Admin > Content > Footer (/admin/footer-builder)

The footer visual editor is a drag-and-drop tool for customizing the footer with support for various block types and layouts.

Three Tabs ​

Tab: Blocks ​

Catalog of available blocks organized into categories (Navigation, Logos, Social Networks, Forms, Content, Brand, Utility, Layout).

15 available block types:

Menu column, Single link, Payment logos, Carrier logos, Custom logos, Social links, Newsletter, Text block, Footer logo, Language switcher, Spacer, Divider, Contact information, Instagram Feed, Menu columns.

Tab: Settings ​

Global footer settings: colors and style, typography, dimensions, and spacing.

Tab: Layout ​

Footer layout configuration:

  • Add block — Insert a new block
  • Add row — Insert a new row
  • Blocks can be freely arranged using drag-and-drop

Device Previews ​

At the top of the editor, previews are available for: Mobile, Tablet, Desktop.

17. URL Redirects ​

Redirects allow you to redirect old URLs to new pages.

Path: Admin > Content > Redirects

Configuration ​

  • Original URL — Old address (for example /old-page)
  • New URL — New address (for example /new-page)
  • Redirect type — 301 (permanent) or 302 (temporary)

Example ​

When transferring content from an old page to a new one, create a redirect:

  1. Navigate to Admin > Content > Redirects
  2. Click "New redirect"
  3. Enter the old and new URLs
  4. Select the redirect type (usually 301)
  5. Click "Save"

18. Recommendation Blocks ​

Recommendation blocks display personalized products based on user behavior.

Path: Admin > Content > Recommended Products

Features ​

  • Recommendation rules — Logic for determining which products to recommend
  • Styles — Customize the appearance of recommendations

Integration with Page Builder ​

In Page Builder you can use the block:

  • Product Recommender — Dynamically displayed personalized products

19. Visual Settings ​

Path: Admin > Settings > Visual Settings (/admin/settings/visual)

Visual Settings is where you configure the global appearance of your e-commerce platform. This section is divided into 9 tabs:

  1. Brand and colors — Primary and secondary colors, button colors
  2. Typography — Font selection and text sizes
  3. Headers and navigation — Header and navigation settings
  4. Search — Search field configuration
  5. Buttons and forms — Button and form styles
  6. Admin — Admin panel settings
  7. Logo and favicon — Logo and favicon upload
  8. Mobile menu — Menu configuration on mobile devices
  9. Category sidebar (desktop) — Category sidebar settings

Tab: Brand and Colors ​

This tab contains the following configuration elements:

  • Primary colors — Store primary color with a color picker and hex input, including hover state
  • Secondary colors — Secondary colors with a color picker and hex input
  • Add to cart button — Color of the add to cart button
  • Success state — Colors for success states
  • Status colors — Colors for various states (warning, error, etc.)
  • Text colors — Primary and secondary text colors
  • Background colors — Background colors for various sections

Each color has a color picker (visual selection) and a hex input (manual hex code entry).

Action buttons: RESET TO DEFAULTS and SAVE CHANGES.

20. Theme Management ​

Path: Admin > Settings > Theme Management (/admin/settings/themes)

Theme management allows you to select and configure predefined appearance themes for your store.

Available Preset Themes (5 themes) ​

  1. Modern Store — Modern and minimalist design
  2. Classic Store — Traditional and classic look
  3. Minimal — Minimalist and clean design
  4. Boutique — Luxurious and elegant style
  5. Compact — Compact and space-saving design

Activating a Theme ​

For each theme the status is visible:

  • Current theme — Badge indicating the currently active theme
  • Option to switch to a different theme with a single click

Additional Tips and Tricks ​

How to Work with Responsiveness ​

  1. Click the "Mobile" or "Tablet" buttons in the top toolbar
  2. Adjust blocks so they look good on these devices
  3. Page Builder automatically saves responsive settings

How to Hide Blocks by Device ​

Some blocks have a "Hide on..." option for specific devices:

  1. Click on the block
  2. In the right panel, find the "Visibility" or "Hide on" option
  3. Select the devices on which the block should not appear

How to Use Custom CSS ​

  1. In the top toolbar, click "Settings" (gear icon)
  2. Find the "Custom CSS" field
  3. Enter CSS code
  4. Click "Save"

How to Add Custom JavaScript ​

  1. In the top toolbar, click "Settings" (gear icon)
  2. Find the "Custom JavaScript" field
  3. Enter code
  4. Click "Save"

How to Use Multilingual Content ​

If your store supports multiple languages:

  1. In text fields you will notice "SK", "EN", etc.
  2. Click the language icon
  3. Enter content in that language
  4. Repeat the process for each language

Troubleshooting ​

Block Is Not Displaying Correctly ​

  • Check settings — Go to the block editor and check all fields
  • Clear cache — Refresh the page (Ctrl+F5 or Cmd+Shift+R)
  • Try a different block — If the block is problematic, try an alternative

Features Section Shows Empty Cards ​

  • PROBLEM: This is a known Features Section block bug
  • SOLUTION: Use Benefit Card blocks instead

Changes Are Not Saving ​

  • Click "Save" — Make sure you clicked the Save button in the top toolbar
  • Check errors — If an error message appears, read it and fix the problem
  • Try refreshing — Refresh the page and try again

Page Looks Different on Mobile Device ​

  • Test on mobile — Click the "Mobile" button and check the preview
  • Set responsive padding — For the Hero section and other blocks
  • Hide unnecessary blocks — Use the "Hide on mobile" option for unused elements