You are looking at an older version of this article!
The Shopping Experiences are found under Content. With Shopping Experiences you can create content pages such as landing pages, shop pages and category layouts and manage them centrally.
The created layouts consist of sections in which individual blocks are added, which in turn consist of one or more elements such as text or images.
Further functions for the Shopping experience are provided by the CMS extension, that is available from the Shopware Professional Edition onwards.
The overview lists (1) all layouts already created. In the search box (2) you can search for a created layout. You can use the dropdown menu Sort by: (3) to sort the list by creation date or editing date.
In the menu called Layouts (4) on the left side, you can filter the layouts thematically. For example, here you can limit the display to all shop pages or all landing pages.
Using the context menu (5) in each entry, you can delete or preview the respective layout. This preview only has the purpose to make it easier to distinguish between the layouts in this overview.
With the button Create new Layout (6) you can create a new layout.
To edit a layout, just click on the corresponding entry.
When creating a new layout, some points for the configuration are first defined via a step-by-step query.
After you click on Create new layout, you will get a selection of the page type for which you want to create a layout. On the one hand, this serves to better sort your layouts in the overview. Furthermore you can choose between different blocks depending on the type. Currently you can create shop pages, landing pages and category pages.
Once you have decided on a type, you can choose how the section of the layout should be structured. You can use a layout with a sidebar or alternatively the full page width.
The sidebar can be used to display the category navigation, filters or both.
During later editing you can add further sections, these may differ from the layout type that was initially chosen.Once you have decided on a type, you can select how the section of the layout is to be constructed. You can choose a layout with a sidebar or alternatively the full page width.
On the following page you must assign a name for the layout that you are creating. Chose a name in a way that it will reflect the purpose.
After completing the basic configuration steps, the layout editor opens.
You create new layouts and chance existing layouts in the layout editor.
The central editing area (1) for your layout.
The menu bar is located on the right hand side, here you can up the individual editing functions. These are divided into the areas Settings (2), Blocks (3) und Navigator (5). Depending on whether you have clicked on a certain block or on the whole section (9), you can reach the Block settings or the Section settings through (4).
Detailed information can be found in the respective section below.
With the + buttons (6) and (7) in the editor you have the possibility to add another section. It's not required to use the the same structure (with or without sidebar) as the existing section.
Use the icons (8) located on the top bar of the screen to switch between the different viewports, this will give you a peview of how the layout is displayed in the different views. The list view for will let you populate the existing elements faster, since you don't need to open the them individually.
In the settings you can change the layout name assigned during creation and subsequently the Layout type.
The menu item Blocks lists various predefined blocks, these are grouped by categories. You can select them from the drop-down menu.
You can drag and drop them into the editor and place them in the desired position.
Populate an element with content
To adjust the content of an element within a block, move the mouse over the element in the preview. This will display 2 symbols in the upper right corner of the element. The gear symbol (1) opens a new window where you can define the content of the element.
You can use the symbol with the 2 arrows (2) to change the element, e.g. a text element with an image.
There are differnt settings depending on the block you want to edit
A text editor is available to customize the text in the settings of a text element. If you have chosen Category Page as layout type, the data mapping is available on the right side above the editor. Here you can select dynamic category texts, such as the category description, which are then displayed in this element.
In the element settings of an image you can change the image that should be displayed. In display mode, you decide how the image should be displayed in the block. In Standard mode, the image adapts to the surrounding box up to its native size. Cover mode fills the box completely with the image. With Stretch the image is stretched to the size of the box. Please bear in mind that Cover and Stretch mode can negatively impact the image quality, this depends on the format and resolution used.
Under Link to you can enter a URL to which the image should link. This can be done either in the same tab or in a new tab.
The image element does not have a size limit. However, you should generally ensure that the image is not too large for performance reasons. In the demo data, for example, we use a full-surface image with a resolution of 1280x528px.
Beside explaining the basic settings of most image elements here, you can make more in-depth settings for sliders and galleries. These are explained below.
After you have added images to the slider, it is also possible to store a URL for each image that is called up when the image is clicked on. Optionally, the call can be made in a new browser tab.
In the element settings for product listing elements you can decide in which layout type the product should be presented. You can present the product in the standard view, with a Big image or with Minimal content.
The element settings for a video depend on whether you have stored a Youtube video or a Vimeo video.
After you have created a video link, you can make some settings to determine how exactly the video should be displayed. If you activate the advanced privacy mode, Youtube will not save any information from visitors until they watch the video. In addition, you can choose exactly which part of the video should be shown by selecting the start and end time.
For Vimeo videos you can also choose what color you want the navigation to appear in and what information the video creator should display.
No separate settings are required for the sidebar blocks. They are automatically filled with content.
For the form block you can first select the form to be displayed in the element settings. You can also enter a title and a confirmation text.
On the Settings tab you can enter the recipient addresses that will receive the completed form.
The contact form is sent to the shop operator by e-mail after it has been filled in by a shop visitor. For this e-mail there is a corresponding template in the e-mail templates with the name contact form, which can be adapted.
If you select the layout type Category Page when creating a layout, your layout will automatically contain a Product Listing Block. Here, the products of the respective category are displayed as standard.
In the settings of this block you can choose between standard, large images and minimal content in the Content tab. You can find out about the differences between these displays here.
In the tab Soting you can set how the products from the product listing should be sorted.
Show product sorting (1): Here you can activate or deactivate the selection of sort orders for this product listing.
Use custom sorting (2): If you do not use your own sortings, the default sortings that you have selected in the Settings>Shop>Products section will be used.
Default sorting (3): If custom sorting (2) has been activated, you can select the sorting according to which the product listing should be sorted by default. You can create and edit the sortings under Settings>Shop>Products.
Product sortings (4): Here you can select all the assortments that the customer should be able to choose from in the product listing. The assortments are then displayed in the front end as a drop-down menu.
Priority (5): In the list of selected sorting options, double click on the priority to change it. In the frontend the available sorting options are displayed in the order of priority starting with the highest.
Delete (6): Use the drop-down menu on the right to remove the selected sorting option from the list.
To open the block settings click on a block in the preview and then clicking on the block settings icon located just below the plus icon for new blocks.
The basic settings for the currently selected block are entered here.
Name (1): This name is used to better distinguish this block. It is displayed in the navigator, for example.
Background color (2): Here you choose the background color of the block. To achieve uniform coloring, you can also specify the color using the hexadecimal value.
Background image (3): Instead of a background color you can use your own background image here. This can be a pattern or a background image for a text.
Image mode (4): If you have created a background image, you can choose here whether it should fill the block or whether the image should be aligned to the block.
Layout settings (5): In the layout settings you can define the distance between the elements of a block and its edges and you can also include your own CSS class.
To open the section settings click on the icon for the respective section in the preview on the left and then click on the section settings icon, which is located directly under the plus icon for new blocks.
Here you can enter basic settings for the currently selected section.
Section name (1): This name is used to better distinguish this section. it is displayed in the navigator, for example.
CSS classes(2): You can add one or more CSS classes, separated by spaces.
Sizing mode(3): Here you decide whether the content should be drawn to full width or remain centered.
sw-cms.sidebar.mobile(4): If you activate the optionHidden, the content of the sidebar will be hidden in the mobile view.
Background color (5): Here you can choose the background color for the section. You can also specify the color using the hexadecimal value to achieve a uniform color scheme.
Background image and image mode (6): Instead of a background color you can use your own background image here. This can be a pattern or a background image for a text.
The navigator shows you an overview of all blocks by their name. You can change the order of the blocks by drag & drop.
With the plus symbol you can create a copy of the block below the respective block. With the trash can symbol you can remove the block.
There are various ways of using an adventure world in the storefront.
Experience worlds are used to display shop pages such as terms and conditions, imprint etc. The assignment is carried out under Settings > Shop > Basic information in the shop pages area.
You can use experience worlds in the categories to customise the layout of the category listing. On the other hand it is also possible to assign a landing page.
A Landingpage type experience world does not contain a fixed listing element to include products.
If it is not possible to call up the landing page from the normal navigation menu, activate the Hide in navigation button in the Menu settings area.
The landing page can then be called up via the URL of the category to which the experience world is assigned.