You are currently viewing the article on an older Shopware version!
Shopping Experiences
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.
Overview
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, duplicate 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.
Creating a New Layout
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.
- Shop page:
- All service pages of your shop are to be understood as shop pages. These include, for example, the general terms and conditions page, the shipping conditions or the contact form.
- Landingpage:
- Landing pages offer you a wide range of design and marketing options in your shop. These can be theme pages, in which marketing can be done or other pages, on which your customers can land during their visit to your shop.
- Category page:
The category page automatically includes a product listing.
Furthermore, you have the possibility to dynamically display texts from the corresponding category on a category page. In the top right of the text element editor use the Data mapping to choose the dynamically display text.
Section
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.
Wenn Du Dich für einen Typ entschieden hast, kannst Du auswählen, wie die Sektion des Layouts aufgebaut werden soll. Dir steht hierzu ein Layout mit einer Sidebar oder alternativ die volle Seitenbreite zur Verfügung.
Name
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.
Layout Editor
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.
Settings
In the settings you can change the layout name assigned during creation and subsequently the Layout type.
Blocks
The menu item Blocks lists various predefined blocks, these are grouped by categories. You can select them from the drop-down menu.
Add Blocks
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
Text
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.
Picture
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.
Product listing
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.
Video
The element settings for a video depend on whether you have stored a Youtube video or a Vimeo video.
Youtube
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.
Vimeo
For Vimeo videos you can also choose what color you want the navigation to appear in and what information the video creator should display.
Sidebar
No separate settings are required for the sidebar blocks. They are automatically filled with content.
Form
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.
Block Settings
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.
Section settings
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.
Mobile sidebar behavior (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 (6) and image mode (7): 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.
Navigator
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.