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.
You can find a tutorial for designing your store here.

Further functions for the Shopping experience are provided by the CMS extension, that is available from Shopware Evolve onwards.

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 drop down 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 by means of a step-by-step query.

Layout Type

After you click on Create new layout, you must define 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.
Product page:
Each product has its own product page on which all information about this product can be found and on which the product can be placed in the shopping basket. Some blocks such as the product description or the buybox including the product image gallery are already available as standard. However, the page can also be designed completely by yourself.

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.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.

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) is used for editing your layout.
On the right side is the menu bar, which you can use to call up the individual functions for editing. These are divided into the areas Settings (2), Blocks (3) and Navigator (5). Depending on whether you have clicked on a specific block or the entire section (9), you can access the block settings or the section settings (4). Via Layout Assignment (6) you can set which category or landing page the layout will be assigned to. The assignment can also be found in the settings of the respective category.

Detailed information can be found in the respective section below.
Using the + button (7) and (8) in the editor, you have the option to add another section. This section does not have to use the same structure (with or without sidebar) as the already existing section.
Using the icons (9) in the bar at the top of the screen, you can switch between the individual viewports and thus see how the layout is displayed in the different views. You can also switch to the list view of the existing elements to fill the content of the elements more quickly without having to open each element individually.

Settings

In the settings you can change the layout name assigned during creation and subsequently the Layout type.

Blocks

In the menu item Blocks, various predefined blocks are available, grouped according to categories, which you can select using the drop-down menu. The blocks consist of one or more elements that can be individually filled with content.

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 different settings depending on the block you want to edit

Text
Text blocks are blocks that contain only text. These are available in different formats.

A text editor is available to customise 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.

For category and product pages, you also have the option of including variables (1). This allows you to access category or product information and integrate it directly into the text.

You can format the variables using the editor functions (e.g. bold). Note, however, that the formatting is done for the complete variable including the curly brackets "{{ variable }}". Otherwise the variable will no longer be correctly stored in the source code and cannot be replaced by the actual content.

The following feature is available to all customers with a commercial plan

AI Copilot
If you are looking for inspartion, you can have an artificial intelligence prescribe texts to you. You can then either use these texts or adapt them to your needs.

If no text is available, you can open the AI Copilot (1) with the space bar. If there is already text, you can select the desired text and replace it with the AI Copilot (1) via the bar.

Insert link
Links can be inserted within a text block. As of version 6.4.10.0, it is possible for these links to point not only to a fixed URL, but also to a product, a category, an e-mail address or a phone number.

Image
Image blocks contain only pictures. These blocks are available in different formats as well.

Image (1): First, you can change the image that is to be displayed. You can have the content of the image filled automatically with the item Data assignment. For instance, on a product page you can display the preview image of the product or the manufacturer. On a category page, you can use the data assignment to display the category image of the assigned category.

Generate image (2): Here you can access the AI-Copilot feature text to image. This button is only a shortcut and will open the image generation in a new tab.

You can find more information about the text to image feature here.

Display mode (3): Here you decide how the image is to be displayed in the block. With Standard, the image adapts to the surrounding box up to its native size. With Fill, the box is completely filled with the image. With Stretch, the image is stretched to the size of the box.
Vertical alignment (4): Specify here whether the image should be aligned to the top or bottom edge, or whether it should be displayed in the center.

Horizontal alignment (5): Specify here wether the image should be aligned to the left or right edge, or whether it should be displayed in the center.
Link type (6): Here you can select whether you want to add a URL, a product, a category, an e-mail address or a telephone number to the link.
Link to (7): Here you can specify what you want to link to. Either by entering a URL, email address or phone number or by selecting a category or product from a dropdown. This can be done either in the same tab or in a new tab (8).

The image element does not have a size limit. However, you should generally make sure that the image is not too large for performance reasons. In the demo data, for example, we use a full-size image with a resolution of 1280x528px.
The image width is set in the standard template to a maximum of 1320 pixels at full HD resolution (and higher) and is dynamically scaled down at smaller resolutions.

In addition to the basic settings for most image elements explained here, you can make more in-depth settings for sliders and galleries. These are explained below.

Slider

Display mode (1): Here you specify how the images are to be displayed.
Standard: The image is displayed completely. The height of the entire slider element is therefore dynamic and will automatically adjust accordingly. It is therefore recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider will "jump up and down".
Cover: The element is completely filled with the image. In the case of smaller images, this results in them being stretched (and thus possibly appearing blurred). For images with an unsuitable aspect ratio, the longer side is cut off, so the complete image is not displayed.
Contain: The height of the element is automatically determined on the basis of the highest deposited image. In contrast to the Standard mode, however, this is not adjusted when switching between different images. You can define the alignment of lower images using the item vertical alignment.
Minimum height (2): This setting is only available for the Fill display mode. It is then necessary to make an entry, otherwise no images are displayed. The entry is made in pixels as an integer and additionally "px" (as an abbreviation for pixel) is added directly after the number. The entry could therefore look like this: 500px.
Vertical align (3): This setting is available under the display mode contain and specifies how the images are to be placed within the slider element. For smaller images, corresponding free spaces are displayed.
Arrow navigation (4): Adds arrows to click through the images. You can define if the arrows should be displayed on or next to the displayed image or if they should be hidden.
Dots navigation (5): As an alternative (or in addition) to the arrow navigation, you can use the dots navigation. This represents a small dot for each deposited image, which you can use to call up the respective image directly.
The display is possible on top of or below the image.
Automatic slide (6): Here you can set whether the image should automatically slide.
Delay (7): The number stored here determines after how many seconds the slider begins to "slide". The number is given here in milliseconds.
Animation delay (8): The number stored here determines how fast the images slide. The value is also given here in milliseconds.
Linking (9): For each image that you have uploaded to the slider, you can specify an external link to which the image should lead when clicked. In addition, you can use a checkbox to decide whether the link should be opened in a new tab.

Gallery

Display mode (1): Here you specify how the images are to be displayed.
Standard: The image is displayed completely. The height of the entire slider element is therefore dynamic and will automatically adjust accordingly. It is therefore recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider will "jump up and down".
Cover: The element is completely filled with the image. In the case of smaller images, this results in them being stretched (and thus possibly appearing blurred). For images with an unsuitable aspect ratio, the longer side is cut off, so the complete image is not displayed.
Contain: The height of the element is automatically determined on the basis of the highest deposited image. In contrast to the Standard mode, however, this is not adjusted when switching between different images. You can define the alignment of lower images using the item vertical alignment.
Minimum height (2): This setting is only available for the Fill display mode. It is then necessary to make an entry, otherwise no images are displayed. The entry is made in pixels as an integer and additionally "px" (as an abbreviation for pixel) is added directly after the number. The entry could therefore look like this: 500px.
Vertical align (3): This setting is available under the display mode contain and specifies how the images are to be placed within the slider element. For smaller images, corresponding free spaces are displayed.
Arrow navigation (4): Adds arrows to click through the images. You can define if the arrows should be displayed on or next to the displayed image or if they should be hidden.
Dots navigation (5): As an alternative (or in addition) to the arrow navigation, you can use the dots navigation. This represents a small dot for each deposited image, which you can use to call up the respective image directly.
The display is possible on top of or below the image.
Preview navigation (6): Specify whether the small images for the gallery preview should be displayed to the left of the image or below it.
Zoom (7): If you activate this option, an enlarged representation of the image is displayed when the shop visitor moves the mouse over the image.
Fullscreen gallery (8): Allows the gallery to be displayed in a full screen browser window by clicking on the image.

Commerce

In the commerce blocks you will find various product-specific blocks to offer and promote products in your shop.

Product name & manufacturer logo
The product name & manufacturer logo block consists of a text block and an image block.If the shopping experience is a product page, the text box is filled with the respective product name and the image block is highlighted and linked with the manufacturer's logo.

Three columns, product boxes

Product (1): For each of the three products in this box, you can specify here which product should be displayed here.
Layout type (2): This specifies how the product should be presented. You can display the product in the default view, with a large image or with minimal text.
Display mode (3): Here you specify how the images are to be displayed.
Standard: The image is displayed completely. The height of the entire slider element is therefore dynamic and will automatically adjust accordingly. It is therefore recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider will "jump up and down".
Cover: The element is completely filled with the image. In the case of smaller images, this results in them being stretched (and thus possibly appearing blurred). For images with an unsuitable aspect ratio, the longer side is cut off, so the complete image is not displayed.
Contain: The height of the element is automatically determined on the basis of the highest deposited image. In contrast to the Standard mode, however, this is not adjusted when switching between different images. You can define the alignment of lower images using the item vertical alignment.
Vertical align (3): This setting is available under the display mode contain and specifies how the images are to be placed within the slider element. For smaller images, corresponding free spaces are displayed.

Product slider

Content (1): In the content tab, you enter the title of the slider, which is also displayed in the frontend, and decide which products should be included in the slider.
Display mode (2): Here you specify how the images are to be displayed.
Standard: The image is displayed completely. The height of the entire slider element is therefore dynamic and will automatically adjust accordingly. It is therefore recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider will "jump up and down".
Cover: The element is completely filled with the image. In the case of smaller images, this results in them being stretched (and thus possibly appearing blurred). For images with an unsuitable aspect ratio, the longer side is cut off, so the complete image is not displayed.
Contain: The height of the element is automatically determined on the basis of the highest deposited image. In contrast to the Standard mode, however, this is not adjusted when switching between different images. You can define the alignment of lower images using the item vertical alignment.
Vertical align (3): This setting is available under the display mode contain and specifies how the images are to be placed within the slider element. For smaller images, corresponding free spaces are displayed.
Layout type (4): This specifies how the product should be presented. You can display the product in the default view, with a large image or with minimal text.
Navigation (5): Here you can activate or deactivate the navigation arrows on the sides.
Automatic sliding (6): If you activate this option, the slider changes to the next product approximately every 5 seconds.
Frame (7): With this option you draw a frame around the slider to separate it from the rest of the experience.
Minimum width (8): This value specifies the minimum width of the individual product boxes.

Gallery and Buybox
The gallery and buybox blocks consist of a Gallery picture block and a Buybox. In the latter you can specify the product to which the Buybox is to be linked and its exact position in relation to the Gallery block. If the world of experience is a product page, the gallery and the buybox are automatically linked to the respective assigned product.

Product description and review
This block contains the product description and the product review. In the element settings, you can assign the respective product for which this block is to apply. If the experience is a product page, the block is automatically linked to the assigned product.

Cross Selling

Content (1): In the content tab, you can specify the product from which the cross-selling products are related. If the shopping experience is a product page, the cross-selling products automatically refer to the product assigned by the product page.
Layout type (2): This specifies how the product should be presented. You can display the product in the default view, with a large image or with minimal text.
Display mode (3): Here you specify how the images are to be displayed.
Standard: The image is displayed completely. The height of the entire slider element is therefore dynamic and will automatically adjust accordingly. It is therefore recommended that all images in the slider have the same aspect ratio, otherwise the elements below the slider will "jump up and down".
Cover: The element is completely filled with the image. In the case of smaller images, this results in them being stretched (and thus possibly appearing blurred). For images with an unsuitable aspect ratio, the longer side is cut off, so the complete image is not displayed.
Contain: The height of the element is automatically determined on the basis of the highest deposited image. In contrast to the Standard mode, however, this is not adjusted when switching between different images. You can define the alignment of lower images using the item vertical alignment.
Minimum width (4): This value specifies the minimum width of the individual product boxes.

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.

HTML

By integrating the HTML block, you can visualize all HTML representations in it. Please make sure that the HTML Sanitizer is configured accordingly or deactivated, otherwise certain HTML tags or attributes may be deleted.

3D-model

This feature is available from the commercial Plan Rise onwards.

You can now add and display your 3D models in every layout.

3D models enable a more realistic and detailed product visualization than conventional 2D images. Customers can view the product from different angles, zoom, and rotate, giving them a better idea of the product.

It also allows you to convey more information about a product. Users can better understand details such as structure, surface, and shape, which can lead to a more informed purchase decision.

You have the option of assigning 3D elements in the same way as the other blocks using the drag-and-drop function. You then have the option of adding an image file. It is important to note that this must not be an ordinary photo file. A 3D image file in .glb format is explicitly required.

The .glb file represents a file format that is frequently used in the exchange of 3D models. It is a binary format based on the widely used glTF (Graphics Library Transmission Format).

Product listing
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.

Sorting and Filter

Sorting
In the tab Sorting 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 sorting, the default sorting 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 sorting 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.

Filter
In the Filter tab (1) you can define which filters are to be displayed in the storefront. The setting is also possible at category level and is explained in more detail in the documentation on the categories.

On the one hand, there is the area with the general filters (2) such as manufacturer, price, etc..
On the other hand, it is also possible to configure filters based on the product properties.
By default, all filters are active. To change this, activate the switch Configure filterable product properties (3). Here you can define if the individual property (4) should be displayed as a filter in the category. Please note that a filter is only displayed in the storefront if at least one product with this property is available in the category.

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 - CSS classes (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 behaviour (4): If you activate the option Hidden, 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.

Visibility by viewport

Visibility (1) allows you to customize the layout of an experience world for specific devices. Under Devices (2), you can click to specify whether the layout should be shown or hidden on the corresponding viewport or end device.
You can define this setting for individual block elements as well as for entire sections. The visibility per viewport is also shown to you in the category configuration when the layout is assigned to a category.

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.

Error Handling

Assign shopping experience to a page in the storefront

There are various ways of using an adventure world in the storefront.

Layout-Editor

You can assign the categories directly in the layout editor. To do this, click on Layout assignment (1) in the menu on the right-hand side. Click on the button Assign layout (2) to open the window for the assignment.

In the window for the assignment, click on the Select categories area, the list with the category selection then opens. To apply the selection, click on the Assign layout button.

If a different layout has already been assigned to one or more selected categories, another window appears in which you confirm the change again.

Shop pages

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.

Landingpage

A Landingpage type shopping experience 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.

Product page

You can use an experience world for the product detail page. To do this, open the respective product in Admin and open the Layout tab. Then select a created product page here.

If you have used changeable elements such as text boxes in your layout, you can change each element individually for the respective product in the Layout tab.

Default layouts

Product

When you create a product page you have the possibility to assign this layout as default layout for all new product pages. This will save you a lot of work.
Just click in the sidebar in the Layout assignment > Default layouts > Set as default layout.