Learn here how to use the Frontend Editor

This step-by-step guide describes how to fill pages with content using the Frontend Editor. Each step introduces you to a function of the Frontend Editor. Study this guide to become familiar with all the features of the Frontend Editor.

Before your start, make sure that the Frontend Editing Plugin is correctly installed and activated in your Shopware.

If you are a developer and would like to make technical enhancements, please read the Developer's Guide.

< Frontend Editor />

The Frontend Editor can be accessed via the URL "/frontend-editing" in your storefront (e.g. https://www.storefront.example/frontend-editing). Log in with the data that you also use for Shopware administration.

Within the Frontend Editor, you can navigate through your Shopware frontend, as with a regular browser.

Once the start page of your shop is loaded in the Frontend Editor, you will see two grey framed rectangular areas. These areas are content areas that can be filled with content elements.

Caution: If you do not see the content areas, this may be due to your Shopware theme not using the standard Shopware Twig blocks. Please ask your developer to customize the theme accordingly. Technical information can be found in the Developer's Guide.

In addition to the start page, you will also find these content areas by default on category pages and product detail pages.

< Content elements />

To create a new content element, click on the "Content elements" button in the lower left corner. A list of all available content elements appears. Press the left mouse button on the text element while holding down the mouse button. The list of content elements disappears and you can now move the element to one of the content areas. Move over a content area so that it turns blue. The green marker shows you at which position the content element will be placed. Now release the mouse button to place the text element.

Tip: On the start page and the category pages you will find two content areas by default. If you create Shopping Experiences via the Shopware6 Administration, the content of the Shopping Experiences would appear between these two content areas. In this way, you can determine whether the content elements should be displayed before or after the Shopping Experiences.

To edit the text of the text element, simply double-click on the placed text element. The text can now be edited and formatted. To exit text editing mode, click the checkmark icon in the top right corner, or just click anywhere outside the text element.

Each content element has different configuration options. For example, for the text element, you can configure the text color. To do this, click on the placed text element with a simple click. The configuration menu will appear where you can select one of the text colors.

< Breakpoints />

Within the Frontend Editor, you can switch between different breakpoints at any time. So you can always check what your content page would look like on smartphones or tablets. Below the address line of the Frontend Editor, you will find a tab for each breakpoint that you can click to toggle between the different breakpoints. The "Auto" tab does not represent a breakpoint, but automatically adjusts the preview to the size of your browser's window.

You can configure the behavior of content elements for each breakpoint individually. Click again with a simple click on the placed text element. At the bottom of the configuration menu you will also see a tab for each breakpoint. Scroll to the "Mobile Portrait" tab and click it. Activate the checkbox "Hidden" in the "Visibility" section and close the configuration menu. Switch between the different breakpoints within the Frontend Editor. You will see that the text element is no longer displayed in the "Mobile Portrait" breakpoint.

It depends on the content element which breakpoint-specific configuration options are available.

< Column layout />

With the columns element, content elements can be arranged in multiple columns. It is possible to arrange two, three, four or six content elements next to each other.

Place a new columns element in a content area. Now you can see that the columns element contains two separate content areas. Move a text element into the right column and an image element into the left column. To remove the space between the two elements, click once on the placed columns element to get to the configuration menu. Now select the option "None" from the "Column spacing" area.

< Images and quick preview />

Newly placed image elements are pre-filled with a placeholder image. To replace this placeholder image, click once on the previously placed image element to open the configuration menu. Click on the large button in the "Image" section to open the Media Manager. Here you can select an image from your Shopware media. Click on a directory and choose an image of your choice. The placeholder image will now be replaced by the selected image.

Images can also be uploaded directly via the Media Manager, if you are in a directory.

Good to know: The images are loaded device-specific depending on your Shopware thumbnail configuration. For example, when the page is accessed from a smartphone, the smallest possible thumbnail is loaded to save data volume. On devices with large screens, the largest possible thumbnail is loaded.

If the images appear blurry, you'll need to adjust the thumbnail configuration for that image album to generate thumbnails that are large enough for each screen resolution (e. g. 320x320, 640x640, 1280x1280 and 1920x1920). Learn more about the Shopware thumbnail configuration here.

To get an accurate impression of your built page, click on the eye icon in the upper right corner. This activates the quick preview and hides all guides. When quick preview is enabled, you will see the actual state of your page. In the quick preview, content elements can not be reconfigured and moved, but behave as they would behave in the Shopware frontend. Click again on the eye icon to go back to edit mode.

< Responsive Design />

The column layout element allows you to make your content elements responsive.
Click on the placed column layout element to open the configuration menu. Click on the "Mobile Landscape" tab at the bottom of the configuration menu. Then select "1 Column (100%)" in the "Columns" section. Now, for all breakpoints that are smaller than "Mobile Landscape", the column layout element is displayed as a single column. In the Frontend Editor, click through the breakpoints to test the behavior of the column element.

< Button element />

Even call-to-action buttons are easy to create. Drag a new button element into a content area. By double-clicking the button, you can edit the button text. In the configuration menu you can define the link target and the appearance of the button.

< Speichern und Seitenvorschau />

Click the three-dot icon in the upper-right corner of the Frontend Editor to open the action menu. Then click on "Save".

Info: Whenever you save without publishing, your changes will not affect the Shopware frontend.

To get a real impression of your current working status, click on "Open URL in new tab" in the action menu.

Since you have not published anything yet, you will now see a page preview of your last saved working status. Via the bar at the bottom of the page, you can deactivate the page preview. If you deactivate the page preview, you will see the actual state of the page.

< Save and page preview />

You can publish your current working status in the action menu by clicking on "Save and publish". Open the action menu again and click on "Open URL in new tab".

Now that you've published your content, you no longer see the page preview, but you are now seeing the actual state of the page, which is now visible to everyone.

< Save and publish />

Every time you save, a new version of your working status is created. This means that you can always revert your working status to a earlier version.
To do this, click on "Versions" in the action menu. Here you can see all versions of the current page. For each version you can see when and by whom it was created. The blue checkmark indicates which version is currently published. The arrow on the right opens the version preview. By clicking on the version itself, you revert your working status to the clicked version. Click on a version and then on "Confirm". You will now see that your working status has been reverted.

< Import/Export />

If your shop is available in another language, you don't have to create the content manually again, you can simply import the content. To do this, switch to the required language in the Frontend Editor. Then click on "Import" in the pull-down menu. In the following dialog, click on the tab "From sales channel" and select the sales channel from which you want to import the content. Click on "Confirm" to import the contents. You can now adapt or translate the texts for the imported contents. Click on "Save" in the action menu to save your contents for the language.

Tip: Of course you can also add or delete content elements. This allows you to create completely individual content pages for each language.

Switch back to the language in which you originally created the content. Create a new content element and click on "Save" in the action menu. Now return to the language with the translated content and perform the import again. This time, activate the "Keep language-specific data" checkbox. You will now see that the new content element has been imported, but your translated texts have been retained. Not only translated texts are retained with this option, but also other language-specific data such as links.

Tip: You can export your contents to a file in the action menu via the menu entry "Export". You can import this file as you like. Thus, content can be imported on other sites or even in other Shopware systems.

< Example: Landing Page />

Tablet Portrait

Landingpage Tablet Portrait

Mobile Landscape

Landingpage Mobile Landscape