Shopping worlds enable you to easily create impressive landing pages, product presentations and marketing campaigns all by yourself. Shopping worlds will help you capture your customers attention and take them into the world of emotionally driven stories - no matter on what display or device!
In this article we introduce you to how the module works and how you can build device-independent shopping worlds. You can find the module in the backend under Marketing > Shopping worlds
Shopping worlds are sorted by category and available in the overview, which allows you to always keep track of what and how many shopping worlds you created and have actually set active in you r shop. Additionally you will find information on device preferences for each category here.
Double-click a shopping world to edit its most important features "inline", meaning directly from where you are in the active table. You can also activate or deactivate shopping worlds and change their positions.
Note: The screencast (a YouTube tutorial) linked below was not created using the latest version of Shopware. So expect the tutorial to miss out on the latest developments and perhaps not cover all possible existing features. However, basic handling hasn't changed substantially and is easily tracked and comprehended with the help of said screencast.
Using the built-in designer tool, it is possible to display several different shopping worlds within a single shopping world, even if they are of a different layout or use various elements for different terminal devices.
Don't forget to save any changes you made by hitting the "save" button.
Customer streams let you restrict the display of specific shopping worlds to certain groups of customers only. By using the Shopware login token, you can - for example - welcome specific customers with a custom-tailored shopping world. This works directly from the start page, just by making use of customer streams. Thanks to the login token the process works even without an individual login and makes delivering your content an even more flexible and special endeavour.
Selecting the option Only for the following Customer Streams (1) enables you to restrict content to precisely defined audiences and groups of customers, simply by making use of customer streams. Customers accounted to such a stream will be able to see certain shopping worlds exclusively. These shopping worlds are initially displayed alongside previously added shopping worlds, that are themselves not subject to any restrictions. Using the option Replace the following shopping worlds (2) you can optionally select shopping worlds that should no longer be displayed.
That is how you make different views of your shop come to life. You can also make sure, your customers are showcased with varying presentations or make the appearance of your shop depended on your visitors' status and/or customer streams.
This matters most, if you plan on advertising products differently for regular customers and e.g. other retailers. Furthermore you can target certain customers precisely with this function. It enables you to address potential customers, that e.g. did not place an order for a certain time, with an incenting rebate or discount.
Working with the built-in designer is easy and clear. Simply select a viewport and the grid below automatically adjusts itself. This way you'll easily get an accurate estimate of how your shopping world will look and feel on many devices.
The Layout tab holds the following adjustable settings that help you set up your shopping worlds.
Not any mode is suitable for each and every shopping world. Here you will learn how different modes works and what modes are for.
Fluid mode looks a little like the former Masonry mode, with one exception: the elements assembly within a shopping world is not dynamic. It only affects the elements width. This way how you keep your arrangement in order and your shopping world will display fine on most devices.
Elements are displayed the same way they were created. The arrangement stays the same all the time, however depending on the end user device, elements might be displayed relatively small, as position and aspect ratio are fixed values in this case.
The row mode is mainly to be applied to content pages that don't require static row heights. Respectively the height of a row is defined by its content.
In the rows mode the element with the biggest height value sets the height for the whole row. All other elements will be scaled to match this if the column size allows this.
As you can see here, the elements adapt to one another. As the image element becomes narrower, the text element becomes longer / higher. However, since the image retains its aspect ratio, it is not changed at this point. Therefore, a different layout is required for the mobile shopping world; in the example, the image is simply brought into portrait format:
Since the picture is now significantly higher, it can also keep up with the text length and the shopping world looks better on the mobile device.
Dimensions of elements in line mode
Height depends on the content of the text.
|Text element||Height depends on the content of the text.|
|Banner element||Zooms the banner to the maximum possible size (within the element) without changing the proportions.|
|Banner slider||Relates to the banner element, where the height of the highest banner determines the height of the element. Smaller banners are placed at the top of the slider.|
|Article||fixed height of 360px.|
|Article slider||fixed height of 360px.|
|Category teaser||fixed height of 360px.|
|Manufacturer slider||fixed height of 360px.|
|iFrame element||fixed height of 360px.|
|YouTube Video||fixed height of 360px, alternatively use the code widget with embed code.|
|HTML5 video element||Inherits the proportions of the video (scaling mode here without function).|
|Blog article||Preview images have a height of 160px, the text then stretches the element further (see Text element).|
|Code element||No dimensions, you can work with your own adjustments here.|
|Sideview element||Gets the dimensions of the image, similar to the banner element.|
|Digital Publishing banner||If an image is selected as background, the image proportions are used, if a color is used as background, a fixed height of 360px is set.|
|Digital Publishing slider||Analog to the banner slider element, the largest digital publishing banner defines the size of the element.|
The Designer supports direct changes to grid settings, so you can adjust the settings for columns, row spacing and row height directly in the shopping world. The designer adapts directly to your adjustments and adjusts the grid accordingly.Grid settings
In this section we explain the handling of elements within the shopping worlds. Click in your opened / created shopping world on the tab Elements:
To place an element in the shopping world, drag it from the left selection into the designer. New elements are always one box in the standard system. When placing in the Designer, the Designer will display a blue or red box. The blue box means that you can place the element. The red one indicates that the element does not fit here. Possible reasons for this could be: Element too wide for the shopping world, element overlaps with other elements, element is more than 1 column wide, but should be positioned on the far right.
You can edit elements already placed in the shopping world with the mouse: Move the mouse over the element to see the following controls:
Use the pen icon to clear the element. The blue X hides an element on the current viewport, so that it may still be available in other viewports. The "red X"", on the other hand, deletes the element from the shopping world and thus from all other viewports!
Use the Hide function to create an alternative layout with other elements for special viewports without a separate shopping world. Hiding is only necessary if you want to use an element in the current viewport not, but it should be available in other viewports.
If there are hidden items in your shopping world, this is shown by the dotted circle icon. The cipher in the icon indicates the number of hidden items:
Click on the icon to open a small bar with the hidden elements:
You can then drag'n'drop these elements back to the shopping world or delete them by clicking on the red X. Note that the items are completely removed from the shopping world when deleted, so they are no longer available in other viewports!
"Hidden elements" can only be opened for the active viewport. If you are in the "Desktop" viewport for editing, you cannot directly open the hidden elements of the "Mobile Portrait" viewport, but only those of the active "Desktop" viewport.
In the Banner Element you can include a banner and link to it, define the link target, assign a title and set a CSS class on the element. If a banner is uploaded here, this appears as a preview in the lower area of the element. The preview contains a 3x3 grid, this is important if your shopping world uses the fluid effect. The effect is to always fill elements by cutting off images in some places. By setting the grid, an output point for the zoom can be used. This ensures that the most important content of the image is always visible. Set this setting by clicking in the corresponding field in the grid.
The mapping function can also be used in the banner element. This makes it possible to link individual areas of the banner and, for example, to refer to different article detail pages. Click on Create Image Mapping: to open the following view:
Here the banner is displayed in original size and you can now create new mappings. You can place them freely on the banner and link them via the corresponding line in the mapping. The link type (internal, external), title and "Title as tooltip" can be configured here. Mapping behaves in the same way as zoom. It zooms in dynamically so that the positions in the image remain unchanged.
The article element can represent articles in the shopping world. A distinction is made between the article categories Selected Articles, Selected Variant, Newcomer, Topseller & Random Article. Selected articles can be freely selected from the assortment. All other types are determined automatically by the system. Category is available as a category selection if the system is to determine the article so that no arbitrary articles are displayed. Product image only ensures that the customer only sees the image of the article in the frontend. No frame ensures that no frame is set around the element in the frontend and you can use the CSS class to set an individual CSS class on the element.
The category teaser provides a category link in the shopping world. You can use any article from a selected category or a selected picture. You can also specify whether the target category is an article category or a blog category and an additional CSS class if required.
The blog article element displays articles from the selected blog category in the shopping world. Here you can select the blog category and the number of articles displayed.
In the Banner Slider you can run several banners in one slideshow. The following options are available:
In the "Banner Administration" area you can upload the images and define a link, alternative text and a title for each image by double-clicking.
Here you can embed a YouTube video. You can set the following things:
Use HD videos: Directs the widget to play the video in HD
You can find the YouTube video ID here:
You can embed existing URLs in the iFrame element.
The manufacturer slider offers the possibility to integrate manufacturer logos as sliders into the shopping world. You can adjust the following settings here:
The article slider can integrate articles into the shopping world in a preview. The following settings can be found here:
HTML5 video element
The HTML video element can be used to integrate a self-hosted video into the shopping world. This element provides the following settings:
If this setting is active, the video is placed in the element so that it remains 100% visible at all times and the aspect ratio is maintained. Depending on the video format, black bars may appear in the element. Fill If this setting is active, the element is enlarged, taking into account the aspect ratio, so that no black bars appear in the element. However, depending on the underlying format, part of the video may be cut off. If this setting is active, the video is stretched to the size of the element regardless of the aspect ratio. Depending on the video format, this can result in stretching or compression in the image. Note that the elements can also be displayed in different sizes depending on the device used, which means that a video may be displayed differently on the desktop than on a smartphone. This behaviour is technically conditioned.
Mute video: Mutes the video until the customer activates the sound again. Note that the sound can only be reactivated with active video control! If video mode Fill is active, the zoom factor of the video can be selected here.
You can add and remove lines directly in the designer, on the left side in the designer you will find a small "+" icon between each line. A new line is inserted here by clicking.
On the right side of the designer you can delete the respective line with the "x" icon. If there are still elements in the row, they are hidden. However, you can retrieve and reposition them at any time from the list of hidden items.
If you have installed the Shopware Storytelling plugin, you can further optimize your shopping worlds. By combining these two Shopware functionalities you send your customers on an emotional journey of discovery and will inspire them for your products. Using the storytelling plugin you create the following possibilities: Divide the shopping world into sections through which the customer is guided. SideView elements allow you to actively promote products in the shopping world. QuickView allows you to view and remember items without leaving the shopping world.
Shopping worlds, in combination with the plugin Storytelling always are displayed full screen! Storytelling shopping worlds also always have priority. This means that - if a storytelling shopping world is already displayed in the category - no further shopping world can be displayed, no matter if activated or not.
Click here and consult our detailed how-tos on the Storytelling plugin.
Shopping Worlds Settings
You can now activate the quick view in all shopping worlds via the general settings. This opens a kind of preview of the product within the shopping world, but uses "real" information from the corresponding detail page. This means that variants can also be changed within the quick view, for example.
In the layout settings you can select the type of shopping world. This defines whether it is a "normal" shopping world or a storytelling shopping world. Please note that when changing the shopping world type, elements may be hidden if they are above one of the inserted transitions of the sections. This happens because elements cannot be placed across sections.
Once you have put your shopping world into storytelling mode, you can set the number of lines per section in the storytelling settings. Note, however, that when the rows are reduced, the elements in them are hidden.
When you create a storytelling shopping world, the layout of the designer changes. This makes it easier to create the individual sections.
However, the designer is no longer able to add or remove rows. Instead just fill those sections you want with content and leave all others empty. Those empty sections won't be considered part of the shopping world and you can move on designing your shopping world as customary.
Using the "storytelling" layout, rows don't have a fixed height anymore. A row's height is determined by the overall height of the viewport, the number of rows and the distance between cells. In this mode a screen covering display is usually achieved.
With "Storytelling" you have an additional choice in the design of your shopping worlds. Under Settings > Basic Settings you can now tick "Quick View for product links" under Quick View. This enables the display of articles within a slider, which in turn is placed as an overlay over the active shopping world.
The SideView element can provide a banner with a fold-out article slider to place special articles directly in the banner.
Banner mapping via icon
Once the storytelling plugin is installed, you can display the mappings in the regular banner element via an icon. The mapping itself works as described above, but you can now additionally activate the option "Show as icon":
The mapping would then be displayed as follows in the frontend:
Landing pages offer various design and marketing possibilities in the shop. Begun of topic sides, in which marketing can be operated, up to the individual error side. To make landing pages even more technically flexible, you can create master and slave landing pages.
In earlier Shopware versions, the concept of master and slave landing pages was introduced due to different layouts on a number of possible end devices. But even today, as landing pages within a separate shopping world can contain different elements, the master/slave principle is still useful.
The main reason for this is its technical flexibility: A slave landing page is only loaded in the corresponding viewport. If your landing pages are elaborately designed, you can even save loading time, since with cross-device landing pages only the elements of the respective viewport are displayed. Nevertheless all elements are still loaded in the background. Using a master landing page, only the corresponding landing page is loaded for each viewport, which also generates less traffic.
Additionally you can realize different layout options by means of separate landing pages. For example, you can set change the number of columns or different row heights per viewport. This is possible, because the landing pages are independent shopping worlds.
In "master" all general settings such as URL, teaser image, category assignment, position and SEO information are defined. "Slave", on the other hand, inherits those settings from the master page. That's why all landing pages for the respective devices are accessible from a single URL, use the same SEO information, but still maintain the possibility of displaying a completely different layout.
The master viewport cannot be considered a fallback variant. If for a particular viewport (mobile portrait, mobile landscape ...) no landingpage is available, nothing will be displayed in the frontend. Thus you should make sure, there is a landigpage for every viewport. To do so visit the section device settings. Within a master/slave joint, every single landing page that is able to display the current viewport, are displayed.
If you are just starting with Shopware 5.3, you might want to use our premade shopping world templates. They should make it even easier for you to integrate emotional shopping experiences into your shop and to share it with potential customers. It is also possible to create, export and import templates from other authors into your shop. Shopware already includes templates for various areas of application in the standard version. With the template manager you can manage these shopping worlds in a simple way and thus create perfectly coordinated shopping worlds quickly and easily using your own content. In the following we will show you how you to put all this into practice.
The shopping world templates are easy to use: When you have completed your shopping world and want to use it as a template, you can save it directly as a template. Just click on the button "Save as template" (1)'.
After clicking the button, a small window opens in which you can assign a name, a description and a preview image to your template. Click on "Save template" to create your template.
If you want to build another shopping world based on that same template, you can do so by calling it up again via Create from template (1)'.
Here you can manage the templates provided with Shopware, templates from other plugins (1) and of course your own templates (2). To load a template for a new shopping world, select the relevant template and click on the button "Use template" (3). If you are no longer satisfied with a template, you can delete it using "Remove selected template" (4).
Based on the template, a new shopping world is created, that you can develop further, according to your wishes.
Shopping Worlds Template Set
Shopware offers you templates from our own company, which you can easily download, use and develop further. There is a free plugin for this purpose, you can download it from the store or via the plugin manager.
Please note that some templates require the plugins "Digital Publishing" and "Storytelling" to be used correctly. If these plugins are not installed or a wrong version installed, you cannot download the corresponding template.
You can export your finished shopping world to be able to use it in other shops, for example. It is also possible to import other third party shopping worlds directly into your shop and then use them like your own shopping world.
With a click on the icon for export (1) your shopping world is exported as a zip archive. By clicking on "Import" (2) you can add an existing shopping world to your shop.
If there are elements in an exported shopping world that require an additional plugin, you will be informed during the import attempt. Shopware will then name the required plugin and the lowest compatible version of the plugin. Only when these requirements are met, you will be able to successfully import the shopping world.
If media with the specified name already exist during import, the new image is treated as a duplicate in the Media Manager and a hash is appended to the file name. However, this does not affect the assignment of the screen to the shopping world.
Since the Shopware Theme is responsive, you should always make sure that the elements of your EKW are visible on all devices as well as possible. Now we'll give you a few tips to help you create the best shopping environments for your shop. All responsive themes have one thing in common: There are no fixed resolutions for inserted media that you can use as a guide, as these vary depending on the device. More important in responsive theme is the aspect ratio of the content. First of all, you should be clear about whether you want to create a shopping world for all devices in the same layout, or whether you want to define separate layouts for each device or a specific selection of devices. You can adjust the arrangement of the elements within a shopping world. However, if you want to create a different template or a different number of columns on certain viewports, you can create a separate shopping world and activate it only for the selected viewports. This even has the advantage that only the associated shopping world with its special elements has to be loaded in the respective viewport and no cross-viewport shopping world with elements that may not be displayed at all on the respective viewport. Here you have to consider which concept is more suitable for you.
In the standard system, the settings for a new purchasing world specify the following parameters:
Shopping worlds that do not cover the entire area are always 1160px wide as standard. According to your settings, you must now reduce the total width by the distances between the cells (10px x 4) and divide by the number of columns, so the formula is (1160-40)/4 = 280px
The calculation of the height is similar: row height plus distance times number of rows: (185+10)*4 for a 4 lines high element.
If your image is larger than the element, it will be fitted into the element, taking into account the aspect ratio, using the side of the image that has the smaller deviation from the specified image size to the element's dimensions as the scale. In this way, Shopware ensures that the element is always fully filled. The starting point of the image zoom, which you can set in the banner element, is also taken into account. In fullscreen mode, the element behaves exactly the same, except that it is then displayed at full screen width.
If you put links via TinyMCE in your shopping world, you can open them in modal windows. the following example will show a shipping notice:
<p class="product--tax" data-content="" data-modalbox="true" data-targetselector="a" data-mode="ajax"> Prices incl. VAT <a title="Shipping costs" href="/payment-and-shipping" style="text-decoration:underline">plus shipping costs</a> </p>