Content editor

You compose your article content in the Content tab using the visual editor — similar to Shopware Shopping Experiences, but right inside the article.

How an article is built

An article consists of sections that contain blocks. Each block offers one or more elements such as text, image, gallery or video.

• Sections are the big horizontal strips. There are two types:

  • Standard — single column.

  • Sidebar — two columns (main area + sidebar) on large screens. On tablet and mobile the columns automatically stack.

• Blocks are the building bricks (text, image, image + text side by side, video, reviews and so on). They arrive on the stage via drag & drop from the right-hand block library.

• Elements are the actual content of a block. Clicking on them opens an editor (text editor, media picker, gallery configuration, …).

Using the editor

The stage

• Desktop / tablet / mobile switcher at the top centre: shows how the article looks on smaller screens. A dashed outline marks the simulated viewport. Pure preview — your content is unchanged.

• Section header shows the number, the type and the action buttons (⚙ settings, ↑/↓ move, ✕ remove).

• An empty section shows a big dashed drop zone "Drop block here". Fill it either by dragging from the sidebar or via the "Add block" button.

The block library (right)

• Collapsed by default so the stage stays as wide as possible.

• Once opened you pick a category (e.g. text, image, commerce, blog) and see every available block.

• Every block is a drag source — drop it on any drop zone in the stage.

Add a section

Below the last section there's an "Add section" card. Pick the type (Standard or Sidebar) and click + Add section.

Section settings

The ⚙ icon in the section header opens a small dialog with:

• CSS class — a custom class that the shop adds to the section container. Useful when your theme provides additional styles for this section.

Block settings

Clicking the ⚙ icon on a block header opens a settings panel right below the block:

• Column position (Main area / Sidebar) — only visible in Sidebar sections.

• CSS class for the block.

• Margin top / bottom — spacing above and below the block.

Edit an element

Clicking a block opens the element dialog with two tabs:

• Content — the actual editor (rich text for text, single-line for headline, media picker for images, …).

• Settings — the same block settings as above (CSS class, margins, column position). Intentionally duplicated inside the dialog so you can adjust the layout while editing the content.

Content and settings are saved together on Apply.

Which blocks are available?

For stability reasons the block library is limited to a verified selection. Every block in this list is known to work properly in the inline editor.

Shopware standard

• Text & HTML: text single-column, text two-column, text three-column, text on image, teaser section, HTML.

• Images & image-text: image, image + text, image-text row, image-text cover, image cover, image slider, image gallery, image highlight row, image bubble row, three image cover, three image columns, four image columns.

• Video: local video, YouTube, Vimeo.

Plugin blocks (PremsBlog)

• Article content: title, subtitle, short description, preview image, author card, categories, tags, linked products.

• Reviews (premium): aggregate stars, review form, review list.

• Showcase: "Posts by category", "Latest posts", "Selected posts" (for custom compositions on the article page).

Drag & drop

• A new block from the sidebar is dropped on a drop zone. A "+" cursor appears while hovering.

• An existing block can be picked up with the mouse via the drag handle (⋮⋮) and re-ordered or moved between the main and sidebar columns of a Sidebar section.

In a different language

When you switch the language picker into a translation language the structure is locked:

• No adding, removing or moving sections.

• No adding, removing or re-ordering blocks.

• Block settings (CSS class, margins, column position) stay locked.

What still works: the content itself — texts, headlines, alt texts of images, etc. Exactly what you want to translate. The editor automatically inherits the layout from the default language; you only overlay the texts with your translation. This keeps the article structure consistent across every language.

Tip: a proven article layout

A solid starting point for magazine-style posts:

Section (Standard)
  ├ Title
  ├ Preview image
  └ Short description
Section (Sidebar)
  Main area:
    ├ Text  (the actual body copy)
    └ Image gallery (optional)
  Sidebar:
    ├ Author card
    ├ Categories
    └ Tags
Section (Standard)
  ├ Linked products
  ├ Star rating
  ├ Review list
  └ Review form

This is exactly the layout shipped as "Blog detail page (PremSoft)". You can duplicate it in Shopping Experiences and tailor it as your own template.