Build Pages Without HTML – the xoContentEditor
Create landing pages, category descriptions, and product descriptions with a few clicks instead of coding: Select building blocks, fill in fields, and use the preview to see how the page will look on both desktop and mobile devices. This guide takes you from getting started to a finished page and explains how to integrate widgets from third-party services.
The guide as a video (3:25 min., German audio with English subtitles): switching it on, how the page builder is structured, adding elements, layout for desktop and mobile, preview, templates and third-party widgets. Chapters and the transcript are on the video page. AI-generated voice-over.
At a Glance
- Where: CMS pages, categories (description and SEO text), products, news, FAQs, and manufacturers. A toggle above the content field activates the builder for each language.
- Structure: A page consists of content blocks. Each block has up to 16 elements, and each element is one of 22 building blocks.
- Preview: Desktop and mobile side by side. You’ll only see your store’s fonts and colors once the page is live in the store.
- Templates: You can save a completed layout as a template and reuse it on other pages or in other languages.
- Third-Party Widgets: The editor removes script code upon saving. The store has its own settings for Trusted Shops, the Google Store widget, Sovendus, and the PayPal “Pay Later” prompt.
- Activation: The xoContentEditor is an add-on module. It is included in XONIC packages starting with the Basic plan but is not included in older contract models. The button will not appear unless the module is activated. XONIC Premium: Content Editor
In this guide
What the xoContentEditor Does
A modular editor instead of a text field.
Without the xoContentEditor, you type content into a single large text field. Anything beyond continuous text and an inserted image—two columns side by side, cards with an image and a button, a timeline, a customer quote—would require you to write the HTML by hand or have it programmed.
With the xoContentEditor, you instead build the page using ready-made building blocks. Each block comes with its own input fields: The “Card” block asks for an image, title, text, and button destination, and automatically ensures that the result looks clean on any screen. You fill in the fields, and the layout is created automatically.
Where You Can Use It
Six sections in the backend—the same user experience everywhere.
CMS Pages
Landing pages, “About Us,” guides, promotional pages. Under CMS → CMS Manager, click the “Content (xoContentEditor)” button above the “CMS Page Content” field.
Categories
Description and SEO text, each with its own “Use xoContentEditor” button. This turns a product list into a topic page. Under Products → Categories / Products.
Products
The product description as a designed page with a comparison table, tabs, and detailed images. “Product Description (xoContentEditor)” button.
News
Articles with subheadings, quotes, and image galleries. Under CMS → News Articles, “Content (xoContentEditor)” toggle. Authors’ biographies can also be designed this way.
FAQ
Answers with expandable sections, info boxes, and tables. Under CMS → FAQ Articles, click the “Content (xoContentEditor)” button.
Manufacturers
Brand pages with logos, brand histories, and selected products. Under Products → Manufacturers, click the “Use xoContentEditor” button.
Enable—one click per field
The editor does not replace the text field; it takes its place.
If the “Content (xoContentEditor)” toggle is enabled, the editor—with its header bar and content blocks for this language—appears in place of the text field. Click to enlarge.
There is a toggle above the content field. If it’s off, you’ll see the familiar text field. Turn it on, and the editor appears in the same spot. Depending on the section, the toggle is labeled “Content (xoContentEditor),” “Product Description (xoContentEditor),” or “Use xoContentEditor.”
The toggle applies to each language individually. You can build the German version of a page using the builder and leave the English version as plain text for now—or vice versa.
The Interface: Content Blocks with Three Columns
At the top is the header bar, followed by the content blocks. Each block has Structure, Edit, and Preview.
This is what the open editor looks like. The three columns work together: You select an element on the left, fill it out in the middle, and see how it’s arranged on the right.
Header Bar
“Collapse All” closes all blocks; “Template Manager” opens the templates. The “Add New Element” button in the header bar and at the end of the list creates a new content block.
In the backend, a block is called a “Flexible Layout.” Multiple blocks are arranged one below the other; you can change their order by dragging the header of a block.
Header of a Content Block
The header displays the number of elements. Use the “Active” toggle to hide a block in the store without deleting it. This change takes effect the next time you save.
The trash can icon removes the entire block from the screen immediately and without confirmation. It is not actually deleted until you save—if you leave the page without saving, it remains.
Two buttons, two functions: “Add New Element” in the header creates a new content block, while “Add New Element” below the structure adds another element to this block. Click to enlarge.
1. Structure
The list of elements in this block. “Add New Element” adds an element; a maximum of 16 per block. Drag to reorder the elements; this sets the same order for both desktop and mobile.
2. Editing
The fields for the selected element. At the very top are the “Content” and “Layout & Appearance” tabs. In the “Content” tab, you’ll find a custom name for the element (which appears above the tile in the preview) and the component type, followed by the block’s fields. “Remove Element” in the header deletes the element after a confirmation prompt; the last element in a block remains.
3. Preview
Two side-by-side views: desktop and mobile. You can see at a glance whether a three-column row of cards still works on a mobile device. Clicking a tile selects the element.
6 Steps to Your First Page
Example: a topic page as a CMS page or as a category.
| Step | What to do | What to Keep in Mind |
|---|---|---|
| 1 | Create a page—as a CMS page under CMS → CMS Manager (the “Insert” tab) or as a category under Products → Categories / Products. | A category appears in the navigation like any other category. You can link a CMS page in the footer or in the header using “Link CMS Page to Header Navigation,” see CMS Manager. |
| 2 | Toggle the switch above the content field. | The toggle applies per language—set it individually for each language version. |
| 3 | Select “Hero / Stage” as the component type for the first element. | The Hero is the large header area with an image, headline, and button—the first thing the visitor sees. |
| 4 | Use “Add New Element” to add more elements: text, maps, product list, customer testimonial. | You can change the order later by dragging and dropping. Start with a rough layout, then refine it. Create a new content block when you have 16 or more elements. |
| 5 | Check both views on the right side of the preview. | It’s especially worth checking the mobile view for tables and multi-column rows. |
| 6 | Save. | Then open the page in the shop; for CMS pages, use “View in Shop.” Only there will you see it with your fonts and colors. |
Tip for beginners: Don’t build your first page on an important existing page. Create a new CMS page, don’t link to it anywhere, and turn off “Include in XML sitemaps for search engines.” Use “View in the Shop” to check the result without customers being able to find the page. The shop, however, won’t display an inactive page at all—not even to you.
Select and Fill Modules
A dropdown menu determines which input fields you’ll see.
Here’s how to proceed
A new element is empty. Select what you want it to be in the “Component Type” field, and the editor will load the appropriate input fields.
You can change the type later. Fields that the new building block doesn’t recognize will be discarded. The settings in the “Layout & Display” tab are retained. If you’re unsure, create a new element and delete the old one once the new one is ready.
In the text block, select headings (header 2 through 6) using the drop-down menu on the toolbar. 4.9.0
Layout for Desktop and Mobile
You can set the width, order, and visibility for each element, and the background and carousel for each block.
Per element: “Layout & Appearance”
In the “Layout & Appearance” tab, you can set the width, indentation, order, and alignment separately for desktop and mobile, as well as visibility and background color. Click to enlarge.
Use the “Desktop” / “Mobile” toggle to set the following separately for both views:
- width, offset (left indentation), and order,
- vertical and horizontal alignment.
Below that are “Visibility” (Always visible, Desktop only, Mobile only), the background color, “Custom Classes,” and a “Custom ID,” for example, for a link to this exact spot on the page. “Desktop” refers to screens 1,200 pixels wide or wider.
For each block: “Widget Options”
The widget options apply to the entire block: here, a full-width color strip featuring three customer testimonials displayed in a carousel. Click to enlarge.
The expandable “Widget Options (Width, Background, Display)” section applies to the entire block:
- Width: Page width, full width with content in a container, or full width borderless—for color bands spanning the entire screen width.
- Background: Color or image, optionally with a parallax effect, plus vertical padding.
- Display: Grid or “Carousel / Slider” with autoplay, arrows, dots, and multiple cards per slide.
“Hero / Stage” and “Product List / Product Slider” always occupy the full width of their block; the editor hides the width fields for these elements.
The Block Catalog
22 blocks—sorted by function, with their names displayed in the selection field.
| Block | What it’s for |
|---|---|
| Text & Structure | |
| Text | Body text with optional heading and text alignment—the most commonly used block. |
| Hero / Stage | Large header area with headline, subheading, button, and background image, optionally with a dark or light overlay and minimum height. |
| Tabs / Tab Navigation | Multiple content sections organized behind tabs to save space. |
| Accordion / Expandable Sections | Sections that can be expanded and collapsed—ideal for questions and answers. |
| Empty / Spacer | Empty space or an empty column; on mobile and desktop, hidden or with its own spacing. |
| Images & Media | |
| Image | Single image with image title (alt text), rounded to a circle, image crop, and image focus. The image block does not have a link. |
| Video | YouTube, Vimeo, or a custom video file, with autoplay (muted) and endless loop. |
| Card / Tile with Image, Text, and Button | Image, title, text, and button as a single unit—the building block for tile rows. |
| Icon Box / Feature Box | Icon, headline, and short text, optionally as a link to the entire tile—for benefits and features. |
| Sell & Convince | |
| Product List / Product Slider | Actual items from your store right in the middle of the text—from a specific category, via “Select Products,” or from bestsellers, new arrivals, and special offers. As a gallery or list, optionally as a slider, with a shopping cart button. |
| Button / Call-to-Action | A single button with a destination, style, and icon. |
| CTA Callout / Icon + Text + Button | A highlighted box with a headline, text, and button—the classic way to wrap up an argument. |
| Testimonial / Customer Review | Quote with name, title, or company, profile picture, and star rating. |
| Counter / Animated Counter (upward) | A metric that increments as the page is scrolled—for years of experience, satisfied customers, or items in the product lineup. |
| Countdown / Countdown timer (live shopping, product launch) | A clock counting down to a specific time, after which your expiration message appears. |
| Information | |
| Table / Responsive Table | Comparisons and technical specifications; can be scrolled horizontally on a mobile device. |
| Timeline | Processes and company history presented as a series of milestones. |
| Alert / Alert Box | Colored box for warnings, tips, and success messages; can be closed if desired. |
| Map / Embedded Map | Map from OpenStreetMap or Google Maps with a marker. “Determine coordinates from address” fills in the location based on your address. Google Maps requires a key, which can be found under Settings → Design → General → Google Maps API Key. |
| Contact & Technical Information | |
| Form / Embedded Form | A form created under CMS → Forms displayed here. |
| Newsletter / Sign-up Form | Newsletter sign-up, with title and name if desired. A confirmation email is sent if double opt-in is enabled. |
| Code / Custom HTML from 4.9.21 | Custom HTML for anything that doesn’t have its own module, such as a linked image or an iframe embed. This is not translated. The editor removes script code; see External Widgets. |
Interpreting the Preview Correctly
Two views and two display modes.
Desktop and mobile side by side
The preview shows both views simultaneously, including width, indentation, alignment, and order. What appears as three cards side by side on the desktop becomes three cards stacked one below the other on a mobile device—you’ll see this immediately, rather than discovering it later.
Pseudo or Live
At the top of the preview, you can switch between “Pseudo” and “Live.” Pseudo displays a tile for each element with an icon and the module name—ideal for checking layout and order. Live displays a scaled-down summary of the content with abbreviated text. Both views are backend mockups; you’ll only see your store’s fonts, colors, and spacing on the actual page when it’s open in the store.
Templates: Reusing a Layout
Build it once, use it as often as you like—even in other languages.
Save Template
In the “Apply” tab, a template replaces the existing structure or is appended to the end; if you do not check the “Apply template contents” box, only the framework is applied. Click to enlarge.
- Save the page first. Only a saved version can be used as a template.
- Open the “Template Manager” in the header bar, then select the “Save” tab.
- Enter a name (required in the default language; optional for other languages).
- Leave “Save content” checked to include text and images, or uncheck it to save only the structure and layout.
- Click “Save as Template.”
In the “Manage” tab, you can rename or delete templates; under “Import/Export,” you can exchange them as files with another store.
Apply a Template
In the “Apply” tab, select a template (“Preview” shows it beforehand) and then:
- “Replace (overwrite existing content)” —the previous structure for this language will be replaced.
- “Insert (append to content)” – the template’s blocks are added to the end.
If you do not check the box “Adopt template content,” only the empty framework will be applied.
Important: Applying the template reloads the page—any unsaved changes in other fields will be lost. Be sure to save the page afterward; otherwise, the store will continue to display the old version.
Apply the Structure to Another Language
Save the completed German version as a template with content. Switch to the language tab for the target language, enable the builder there, save, and apply the template using “Replace.” Then replace the texts with the translation.
To create templates not linked to a specific page, go to CMS → Template Manager (xoContentEditor) and select “New Template.”
Third-Party Widgets and Custom HTML
Rating seals, partner coupons, installment payment notices: first use the built-in integration, then the code block.
What the code block can do
The “Code / Custom HTML” block is suitable for embedding via iframe; the editor removes scripts when you save. Click to enlarge.
“Code / Custom HTML” outputs your HTML without modification or translation—with one exception; see below. This works for a linked image, an embed via