Shopping worlds

Valid from version:
5.0.0

Introduction

For the release of Shopware 5, Shopping Worlds was massively overhauled, making it now possible to create fully responsive shopping and landing pages.

To open Shopping Worlds, enter your backend and follow Marketing > Shopping worlds

Overview

Categories (1): here you will see the category tree of your store. Clicking on a category will open the connected shopping world. Filter (2): so that you can customize shopping worlds for specific mobile views, you can now filter by device. Shopping worlds (3): all shopping worlds are displayed here. The view will adjust as you apply filters / select categories.

Shopping worlds are organized by their assigned category and device within the overview (3).

Shopping worlds are organized by category so that you have an overview for which devices each shopping world is active. Using the action buttons (4), shopping worlds can be deleted, edited, previewed and duplicated. The "active" hook cannot be changed here – activating/deactivating a shopping world is carried out within the "edit" window.

You have two options for duplication: create a 1:1 copy by clicking the “duplicate” button, or by dropdown, allowing you to select for which device the shopping world should be active. Adjustments can still be performed following duplication.

Creating a Shopping World

Clicking the Add shopping world button will open a new window – this is where you will enter your settings for a new shopping world.

After selecting your grid and template, save the shopping world and close the window. The designer will appear upon reopening your new shopping world.

Main settings

  • Shopping world name: name of the shopping world
  • Select type: Emotion creates a classic shopping world, where Storytelling creates contextual shopping narratives. Please note that Storytelling is an advanced feature and is only available for commercial licenses (included within the license scope).
  • Landing page: define whether or not the shopping world is a landing page
  • Active: activate or deactivate the shopping world here. When active, the shopping world will contain a green check in your overview.

General settings

  • Responsive design adjustments:
    • Masonry effect: elements are arranged dynamically according to the resolution of the end device. With this setting, elements will retain their approx. original size when readjusting to new displays. This means if elements appear next to one another on large displays, they will automatically stack atop one another, with their original size, on smaller displays.
    • Resize the elements: elements will resize in order to maintain their original relationship with one another across different devices. This means that with smaller devices, the elements will not break to sack upon one another, rather become smaller to maintain their original display.
  • Select a grid: keep in mind that each column can be assigned a different element
  • Select template: this setting can be ignored in most cases. If you customize the template for Shopping Worlds, the customized template can be assigned here.
  • Select device: select for which device the Shopping Worlds is displayed. Please note that a shopping world should be created for each individual device.
  • Display fullscreen: when active, the shopping world will appear across the entire width of the screen. When inactive, the shopping world will appear within the container.
  • Container width: : this setting is only relevant for the Emotion Template of Shopware 4 and adjusts the width of the container. This adjusts automatically for the Responsive Template of Shopware 5.
  • Position number: if you use several shopping worlds in one category, you can define the order here
  • Use Quickview: exclusively available for commercial licenses of Shopware, this feature allows customers to browse through items in a modal box without leaving the shopping world.

Category specific settings

  • Select a category: assign the shopping world to a category with your shop. From Shopware 5.1.2 it's possible to make multi selections.
  • Listing: define if the category listing should appear below the shopping world.

Time-controlled activation

The Reset time-controlled activation button resets the all time-specific settings. If you would like to use the shopping world for a limited time, use the fields provided here to define when the shopping world will automatically activate and deactivate. Note that the activation and deactivation is delayed by the HTTP cache – for changes to these settings to be effective, please clear your HTTP cache in the frontend.

Designer

The designer was updated for Shopware 5. You can now preview shopping worlds on specific end devices (1), however please note that before opening the preview, the shopping world will save. The updated shopping world will go live in your storefront when you clear the cache. Please also note that the preview only works for devices which have already been assigned to the shopping world.

It is also not easier to add rows by clicking on the (+) to the right of the grid (2). Please note that deleting a row (3) also deletes the elements contained therein, even if the element extends across several rows. To configure the elements, simple drag & drop them within the grid system. The available elements are described in detail below.

Text element (formerly HTML element)

  • Text: Text content can be integrated into your shopping world using this editor. This content can be added directly or by using the included HTML Source Editor: < > button (1).
  • Title: The title will be displayed as an overlay in the frontend.
  • Do not add styling: This defines whether or not the styling of the template will affect the HTML element. This option is only recommended for novice users, since this directly impacts the uniform appearance of the shop.

Banner

The banner element allows you to add and link a banner to your shopping world. After selecting an image using the Select own files button, the banner image will appear as a preview at the bottom of the window. The preview consists of a 3x3 grid. This is important when your shopping world uses the masonry effect, as a portion of the image might be cut off in order to fill the element.

Note: when the masonry effect is in use, the element will always be filled in the frontend. For this reason, it is possible that the image may not be displayed correctly on some devices. This is why the 3x3 grid has been implemented, which allows you to control the starting point of the zoom for when an item must be resized to fill the element. This ensures that the most relevant portion of the image is always displayed. Select the desired starting point simply by clicking on one of the sections of the 3x3 grid.

Here you may also create banner mapping, which allows you to assign links to specific sections of the image (i.e. a link to an item detail page). Click the Create image mapping button to open the following window:

Click the Add new mapping button to assign individual links to specific areas of the banner. The link can be configured using the settings provided at the bottom of the window (internal/external link, display as an icon to guide your customers to the linked spot on the banner). The mapping is anchored to the image and therefore analogous with zoom.

Item

The item element connects specific items to the shopping world. You have various options to choose from for assigning items: Selected, Newcomer, Random and Top seller. Selected items can be freely defined; the other options are automatically assigned by the system. Checking the Only show image option means the element will hide the product details (such as price) and display only the item image.

Category teaser

This element adds an entire category to the shopping world and makes it possible to include one or more items or images as teasers. You can also define if the target category is an item or blog category.

Blog article

This element allows you link your blog articles to the shopping world. You can define the number of articles to include as well as the thumbnail size for your blog images.

Banner-Slider

Create a banner slider to display a slideshow of rotating banners. Depending on your settings, these banners can be fullscreen or limited to the size of your container width.

Im Banner Slider können Sie mehrere Banner in einer Slidesow laufen lassen. Hier können Sie die folgenden Optionen einstellen:

  • Title: title of the element that will appear as an overlay in the frontend.
  • Display arrows: display arrows that the customer can use to manually scroll through the banners.
  • Display navigation: this gives the customer an impression of their position within the banner slideshow. The navigations will appear as dots instead of number for the responsive template.
  • Scroll speed: the amount entered here—measured in milliseconds (ms)—represents the speed of the banner rotating from one to the next.
  • Rotate automatically: define if the customer should manually rotate the banner of the system automates the process.
  • Rotation speed: the amount entered here—measured in milliseconds (ms)—represents the length of time the banner will be displayed before rotating.

Select and add your banners in the Banner administration. Here you you can assign a link (internal or external), alt text and a title for each banner by double-clicking on the provided input fields.

YouTube video

Add a video from YouTube and select whether or not HD videos are allowed. You can find the YouTube video id at the end of the video URL:

iFrame element

External websites can be embedded by entering the URL into the iFrame element.

Manufacturer slider

The manufacturer slider allows you to include a slideshow of manufacturers in your shopping world. The following settings are available:

  • Manufacturer type: Manufacturer by category displays manufacturers included in a specific category within your shop; Selected manufacturers allows you to manually select which manufacturers should be displayed .
  • Title: the title will be displayed as an overlay on the element.
  • Display arrows: display arrows that the customer can use to manually scroll through the manufacturers.
  • Display numbers: this gives the customer an impression of their position within the manufacturer slider. The navigations will appear as dots instead of number for the responsive template.
  • Scroll speed: the amount entered here—measured in milliseconds (ms)—represents the speed of the banner rotating from one to the next.
  • Rotate automatically: define if the customer should manually rotate the banner of the system automates the process.
  • Rotation speed: the amount entered here—measured in milliseconds (ms)—represents the length of time the banner will be displayed before rotating.

Item slider

The item slider allows you to include a slideshow of item in your shopping world. The following settings are available:

  • List by type:
    • Selected items: manually select the items to display in the slider. After selecting this option, the Item administration will open, where you can search by the item’s name or number.
    • Newcomer items: the system will automatically list the most recently added items in your shop.
    • Top selling items: your best selling items will be automatically listed.
    • Price (low to high): items are selected by ascending order.
    • Price (high to low): items are selected by descending order.
  • Filter by category: limit items to a specific category. If you do not to restrict the items, select the main shop as the category. Please note: this option is not available is you are manually selecting your items.
  • Maximum number of items: limits how many items will appear in the slider.
  • Title: the title will be displayed as an overlay on the element.
  • Display arrows: display arrows that the customer can use to manually scroll through the items.
  • Display numbers: this gives the customer an impression of their position within the item slider. The navigations will appear as dots instead of number for the responsive template.
  • Scroll speed: the amount entered here—measured in milliseconds (ms)—represents the speed of the banner rotating from one to the next.

HTML5 video element

Use the HTML video element to embed a self-hosted video into the shopping world. The following settings are available:

  • Video mode:
    • Scalable the aspect ratio will always be maintained and scaled so that the video is always 100% visible. Due to how the video of formatted, the element might place black bars in the video in order to maintain the aspect ratio.
    • Fill the element will be filled with the video so that not black bars appear. Due to how the video is formatted, the element might cut off a portion of the video in order to achieve the fill effect.
    • Stretch this will stretch the video to fit the size of the element regardless of the video’s aspect ratio. Note that the elements will vary in size depending on the device being used, therefore it could happen that a video will look different on a desktop and smartphone.
  • .webm video: specific the source file of the WebM video. You can use a file from the Media manager or select a file from an external source.
  • .ogv video: specifies the source of the OGG video. You can use a file from the Media manager or select a file from an external source.
  • .mp4 video: specifies the source of the MP4 video. You can use a file from the Media manager or select a file from an external source.
  • Preview image: select which image should be displayed when the video has not yet been played.
  • Automatically play video: the video will automatically start when the page is opened.
  • Automatically load video: automatically loads the video when the page is opened, making it possible to play without delay when the visitor choses to watch the video.
  • Display video control: when active, a control bar will appear at the bottom of the window, allowing the visitor to select video settings. When disabled, one a play/pause button will appear in the upper right corner of the element will be displayed. Please note: the video control is only available when the video is in Scalable mode.
  • Loop video: the video will play on a continuous loop.
  • Mute video: the audio will automatically be muted upon play. Please note that the customer can only turn on the sound when Display video control is activated.
  • Zoom factor: when Fill mode is activated, the zoom factor can be defined here.
  • Left scale origin: sets the left starting point of the video for the scaling percentage.
  • Top scale origin: sets the upper starting point of the video for the scaling percentage.
  • Overlay text: this text will be displayed as an overlay on the video.
  • Overlay color: defines the color of the overlay in RGBA.

Code element

The Code element is used for HTML and JavaScript code and executes it without any changes. HTML will called first, JavaScript afterwards.

Notice: JavaScript must be entered without <script>-Tags.

Storytelling

With the Storytelling plugin installed, you are able to further utilize shopping worlds in order to create emotional shopping experiences for your customers. Products can be displayed within a contextual framework in order to inspire shopping and add value to your shop. The Storytelling plugin offers the following options:

  • Shopping worlds are divided into chapters, leading the customer on a narrative through your shop.
  • Sideview: allowing you to link items to a specific element, which the customer can easily browse through without leaving the narrative. Sideview reveals items in a slider, displaying only the most relevant item information.
  • Quickview: when an item is selected, Quickview will open in a modal box displaying more detailed item information. The item images can by displayed in fullscreen and super zoom is supported.

Storytelling is an advanced feature and is reserved exclusively for commercial licenses of Shopware (the license for Storytelling is automatically included within the license scope).

Note: Storytelling shopping worlds are always displayed fullscreen. Storytelling shopping worlds always have priority – this means if a Storytelling shopping world is displayed in a category, no other shopping world can be displayed, regardless if it is active.

A detailled How-To for the Storytelling feature you can find here.

Additional options

Shopping worlds settings

Here you will define if the shopping world with be an Emotion (normal) or Storytelling shopping world. Please note that settings are lost when changing the shopping world type, so we recommend not converting existing shopping worlds into storytelling shopping worlds (and vice versa). The rows define how many rows should appear within a shopping world instance. You can also change this setting manually after creating the shopping world within the design grid itself – this just behaves as a starting point. Likewise you can also configure if you would like Quickview to be activated in the Storytelling shopping world (the alternative is that when an item is clicked, the customer is brought directly to the full item detail page). For reference, Quickview appears in the frontend as follows:

Designer

Within a Storytelling shopping world, the designer can be customized by the number of columns and rows available in each section. These sections can be thought of as chapters in the Storytelling experience. Sections each have an individual URL and are separated by bullet points in the frontend.

You are not able to add or remove columns/rows within the designer for Storytelling shopping worlds. However, you are able to add and remove entire sections. Similar to normal shopping worlds, you are still able to drag & drop elements between the different sections.

Sideview Element

Sideview is a feature of Storytelling. This feature creates makes it possible to link an item slider to any element, which creates new possibilities for staging your items and encouraging exploration through your shop. As the customer travels through your shop, they can open and collapse sideview as they shop. For your reference, sideview looks like this in your frontend.

The following configuration options are available in the backend:

  • Sideview position: define if the item slider should appear from the right or bottom of the banner.
  • Sideview size: the item slider can cover only a portion of the banner (making the image still visible) or the entire banner.
  • Select a category: select from which category the items should be displayed. This setting does not apply when you manually select items for the item slider, rather only when the system must automatically select items (i.e. topseller, newcomer, etc).
  • List type: you can either manually select the items for the slider or automate the process by defining the type of items to be displayed – the system can automatically select items by topseller, newcomer or price (ascending or descending).
  • Max products: this defines the maximum number of items in the slider. Note that this option does not apply for selected items (only automated lists such as topseller and newcomer).
  • Display arrows: these arrows allow the customer to manually scroll through the list. Please note that if these arrows are not displayed and the customer reaches the end of the list (using mouse over), the slider will not automatically restart.
  • Auto start: the item slider automatically begins moving.
  • Select banner: this is where you select the banner to appear within the element – the item slider will appear above the banner when activated.

Landing Pages

Introduction

Landing pages offer a variety of design and marketing opportunities in the shop. Starting with Themepages where marketing can operate up to individual error pages. Landing pages also have to be responsive, so there is function to set up master and slave landing pages.

Master and slave

To create an optimized landing page for each device, there are master and slaves.

In Master all settings such as URL, teaser image, category assignment and position and SEO information shall be defined. The slave inherits these settings from the master, so that all landing pages have the same SEO information, but a different URL where a different layout can be displayed.

Note: The Master is no fallback, so if a viewport (Mobile Portrait, Mobile Landscape, ...) no Landing Page is available in the frontend and nothing is displayed. Therefore, make sure that for each viewport a landing page exists.

From Shopware 5.1.2

SEO Title

From Shopware 5.1.2 it is possible to define SEO Titles. There is a box SEO Title (1) in the settings of Landing Pages.

By default, the input is followed by the shop name. Here is the title drawn with a fallback to the shopname in the masterdata.

Tips & Tricks for optimal shopping worlds

Overview

Since the Shopware 5 Theme is Responsive it is necessary to ensure always that your elements are 100% visible on all devices. For this we are giving you a few tips, that you can create optimal shopping worlds. Unlike in the emotion template there are no fixed sizes anymore in the Responsive Theme, as these vary depending on the device. Rather, the aspect ratio of the content is important. First you should be clear about whether you want to create a shopping world for all devices, or want each device define separate shopping worlds. Separate shopping worlds can be created much easier because you need to take no account of other devices here.

In the standard there are 2 grids for every shopping worlds included. These can be customized as desired. Please note that we can not give any support for your own templates or shopping worlds based on its own templates or grids.

As the following adjustments almost exclusively are needed in the Masonry mode , we will only describe these.

The default grid

The standard grid enter the following values:

  • Cell Height 185 px
  • Distance: 10 px

If we now insert an oversized image in a banner element, we will find the following element sizes in the frontend: Desktop: 1160 px x 185 px

The element will retain always its row height, but the width will be reduced depending on the device. If the stored image is larger than the element, the picture is cut off depending on the set. So information from the Picture will be lost. If now the window shrinks, the element will resize the image until the banner completely fills the element in height. Once this is done, the picture is only trimmed in width. In Full Screen mode, the element behaves the same, except that it will halt displayed over the full screen width.

FAQ

Which settings are compatible with each other?

Basically, almost all settings are compatible. However, there are some exceptions:

  • If a shopping world (eg Home) displayed full area on the desktop, it is not possible to display the items listing below in the including duplicated for Mobile or Tablet shopping world. There is always set only one option.
  • If a shopping world (eg Home) displayed full area on the desktop, further shopping worlds in this category can also be displayed only the entire surface.

Shopping Worlds from Shopware 5.2.0

What's new?

In Shopware 5.2.0, both Shopping Worlds and its designer were revised and optimised, making it easier and more intuitive to create shopping worlds for each device.

The refactored module

  • Category filter (1): Here you can filter by category, the shoping world listing will update and show you all the shopping worlds of the filtered category and all categories beneath the filtered category.
  • Device filter (2): Here you can fitler by device, so that the listing shows you only the shopping worlds, which are allocated to your selected device.
  • Template management (3): The template management got it's own tab in the module because it's a central component of the module so it should be possible to setup templates from outside a shoping world. But functional it's the same as before.
  • Add / delete shopping worlds (4): Here you can still add / delete shopping worlds.
  • Listing (5): Here you get the listing of the shopping worlds and landingpages based on the filtered category.

The new designer

With the new desinger it's possible to create shopping worlds with differnet layouts and different elements for different devices without creating mupltiple shopping worlds for each category.

  • Tabs (1): To ensure the overview, the designer is segmented in tabs. You can switch seamlessly between the "Settings", "Layout" and "Elements" without loosing the preview of your shopping world. Only "Free test fields" will be shown over te complete width of the module.
  • Display settings (2): Here you can define the category / categories and the setting to show the item listing beneath the shopping world.
  • Preview (3): With this button you can activate and deactivate the preview of your shopping world.
  • Unlink all (4): If you linked different breakpoints, you can unlink them with this button.
  • Warning (5): This warning shows you, that this breakpoint is not active, so that this shopping world will not be shown in this breakpoint.
  • Breakpoints (6): Here you can choose the different breakpoints to edit them by clicking.
  • Invisible elements (7): This shows you the quantity of hidden elements in this breakpoint.
  • Link (8): With this function you can link different breakpoints, so that your changes will appear in all linked breakpoints too. To use this feature, just choose the Breakpoint you want to use as "source" and link all the other breakpoints you want by clicking the "link" icon. If the linked breakpoints are empty, it will link directly, if the linked breakpoints are difficult, a popup will ask you, if you want to overwrite the linked breakpoints by linking them. Approve with "yes" to link the breakpoints.
  • Brekpoint range (9): This beam shows the range of the chosen breakpoint, the preview of your breakpoint is always the smallest possible size and the beam shows the size, which this breakpoint will use.

Working with the new designer

Working with the new designer is pretty easy, just choose the desired breakpoint by clicking it, the grid below will resize to the size of the breakpoint, so you get a pretty good impression of your shopping world also at creating it.

Grid settings

The new designer now supports changes directly, so your changes at columns, rows and cell height will instantly be changed in the grid. If you want to e.g. delete colums with content, a popup will appear and you have to confirm that the elements will be hidden.

Placing elements

To avoid creating different shopping worlds for each breakpoint because of differnt layout or different elements, it's now possible to hide elements in the shopping worlds. Hiding is only neccessary, then you want to hide an element in a specific breakpoint, but show it in another.

The blue X hides an element in the current breakpoint (except linked breakpoints), so you can create a completely different layout for other breakpoints without creating a seperate shpping world. The red X on the other hand deletes the element from the whole shopping world, so it won't be accessable in other breakpoints too. Be careful with this feature, because it deletes this element from every breakpoint of this shopping world, no matter, if it's in use or not.

Hidden elements

If you have hidden elements in your shopping world, this will be shown by an icon (1):

By clicking the icon, a small bar will open and show all te hidden elements:

You can drag and drop these hidden elements to the grid or delete them, but note that deleting the hidden element deletes it from the whole shopping wold, no matter if it's in use in other breakpoints!

Notice: Hidden elements can only be opened for the current breakpoint. If you are in the breakpoint "Desktop" you can't open the hidden elements in "Tablet Portrait", only the hidden elements of "Desktop".

Layout

{Achtung|Caution: In Shopware 5.2.0 the mode "Masonry" was deleted, so that you have to change the mode of your shopping worlds, which used this mode before the update! The regarding shopping worlds are marked with a yellow warning icon in the shopping world listing.}

New modes

Fluid mode

The fluid mode is similar to masonry, but it will not rearrange the elements itself, it will only resize the elements for the device width. Using this, you always take care of the right layout without losing the responsiveness.

Rows mode

The Rows mode is designated for content pages and is a mode without a fixed row height. The content determines the row height.

Notice: using the Rows mode the highest element defines the height of the whole row. Other elements in the same row are only upscaled, if they have enough space without cropping the content!

As you can see, the elements will change its size in the different breakpoints, they become slimmer but higher because of the text. Since the image stays at it's aspect ratio, it won't fit the height, through this you have to use a different layout for the smaller breakpoint, in the example we use the same image in portrait orientation:

Since the image is much higher now, its nearly as high as the text and fits the smaller breakpoint perfectly.

Element size in Rows mode
Element Description
Text element Depends on the content.
Banner element Zoom the banner to the maximum possible size (within the element) without changing the aspect ratio.
Banner slider Same as the banner element, but the height of the heightest banner will determine the elements height.
Product Fixed Height of 360px.
Product slider Fixed Height of 360px.
Category teaser Fixed Height of 360px.
Manufacturer slider Fixed Height of 260px.
Iframe element Fixed Height of 360px.
YouTube video Fixed Height of 360px, alternatively use the code widget with the embed-code.
HTML5 video element Inherits the proportions of the videos (Scaling mode has no function here).
Blog artikel Preview images have a fixed height of 160px, the text will strech the element like the text element.
Code Element Don't get any Size, here you can work with own sizes.
Side-View-Element Gets the size from the image like the banner element.
Digital Publishing banner If a background image is chosen, the image size will used, if a color is used, the height will be fixed to 360px.
Digital Publishing Slider Same as the banner element, the bigges Digital Publishing banner defines the height of the element.

FAQ

What happens at updating my shop?

At updating to Showpare 5.2 all your shopping worlds will be migrated, you should only take care of changing shopping worlds using the masonry mode, because the masonry mode is no longer contained, so these shopping worlds must be changed to another mode.

Shopping Worlds from Shopware 5.3

Customer Streams

With the new Customer Stream feature you are able to personalize the shopping worlds for each customer. You can define which shopping world is displayed for each customer stream and define which shopping world should be replaced. More information in the article Customer Streams.

Shopping World Presets

With Shopware 5.3 you can now create and use presets with your shopping worlds, making it even easier for you to create and integrate an emotional shopping experience into your shop. Presets are also sharable - you can export them from one Shopware shop and import them into another, all within seconds. The new preset manager allows you to manage your presets, create new shopping worlds from existing presets and fill the shopping world with your individual content.

Managing Shopping World Presets

Shopping world presets are easy to use - when you are done creating and designing a new shopping world and you want to use it as a preset, just click the corresponding button 'Save as preset' (1).

After clicking that button, you can enter a name and a description for the new preset. You can select a preview image and then save it by clicking on 'Save preset' (1).

To use the preset you just created, click the 'Add from preset' button in the shopping world overview.

This will show you all presets available to you, those created by Shopware or third party developers as well as those you created yourself. To use one of these presets, click to select it and hit the 'Vorlage verwenden' button. To remove a preset, select it and click the 'Ausgewaehlte Vorlage entfernen' (1) button.

Shopping World Presets made by Shopware

We already designed a few shopping world presets you can use for free as a starting point - you can install them via the Free Plugin from our Community Store.

Please note that some of those presets might be reliant on advanced feature plugins like Digital Publishing and Storytelling. Important: Advanced features like Digital Publishing and Storytelling are only available for professional or enterprise customers!

Importing and Exporting Presets

You can export any shopping world you have created and use it in a another Shopware shop. Similarly, you can import shopping worlds from other shops into your own. Just use the 'Export' (1) button to export a specific shopping world - importing is done just as easily by clicking on the 'Import' (2) button at the top of the window.

If you want to import a shopping world from another system, make sure you have all relevant plugins installed e.g. in case your shopping world uses custom elements. If a shopping world contains e.g. Digital Publishing elements, the import will stop automatically if the respective plugin is not installed in your shop.

All media (pictures and images) used in a shopping world is imported together with the shopping world - if an image already

exists in the receiving shop, it is not imported twice.
$ 6,81

Prices incl. legal
VAT + Shipping rates & policies*