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.

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

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

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.

Slider

• Display mode
  • 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: 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: 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: 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: 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.

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.


Galerie

• Display mode
  • 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: 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: 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: 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: 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: Specify whether the small images for the gallery preview should be displayed to the left of the image or below it.
• Zoom: 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: Allows the gallery to be displayed in a full screen browser window by clicking on the image.

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.

 

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.

 

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

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

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.

 

Categories

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.
 

Landingpage

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.