Shopping worlds

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

Overview

• Category filter (1): This provides an overview of your shopping worlds and how you can find them in the category tree. You will be able to see all shopping worlds within a selected category if you click on it. If you work your way down the trees branches, all shopping worlds are also listed separately in their sub-categories.
• Device filter (2): This lets you filter the shopping worlds of your shop with respect to special devices and screens. Choose a platform and be presented with all shopping worlds working on and designed for that special device. Since our shopping worlds support responsive designs, it is possible and more than likely these shopping worlds will still be there event though most of the device filters are active.
• Template management (3): This is where you head to as a technically experienced user or developer, for modifying or creating your own shopping worlds' templates and in turn use them as a basis for your shopping worlds in the future.
• Create shopping world (4): Click here to create a new default shopping world. This will open a new window in which you can start to design and edit your most current shopping world.
• Create from template (5): Allows you to create a shopping world from an already existing template. These templates are e.g. officially provided by Shopware, third parties (via plugins) or even by yourself! How this works in detail we will explain below.
• Import (6): Use this function to import shopping worlds that were exported previously.
• Delete shopping world (7): Use this to delete selected shopping world(s). Note: Media connected to the shopping world, like pictures are not deleted from the system, when deleting the particular shopping world. These files remain in Media Manager and must be deleted manually in a second step, if necessary!
• Listing (8): Selected shopping worlds and landing pages are listed here, conditional to the active category.
• Action buttons (9): Use the action buttons to delete, edit, duplicate or preview any of your shopping worlds. When duplicating a shopping world, choose between whether you want to duplicate the entire shopping world for all devices, or only duplicate it selectively for a specific group by clicking the button or using the dropdown menu.

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.

Screencast

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.

Creating shopping worlds

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.

• Tabs (1): Navigating the designer is easy, as its main functions are divided into tabs. You can switch seamlessly between "Settings", "Layout" and "Elements" without the preview on the right side disappearing. Be aware though that in contrast "free text fields" are displayed using the full window width when clicking on them!
• Basic settings (2): Define your categories here, assign a name to existing shopping worlds, (de-)activate all or just a selection of present shopping worlds, set a position, and decide whether it is considered a landing page or a "normal" shopping world. If you'd like more information on what a landing page is, further explanations are found here under
• Display settings (3): Define categories here and decide whether the product listing should be displayed under a shopping world or not. When selecting a category, it is possible to assign it to several independent categories. According to that, one and the same shopping world within a shop can be displayed in several different categories simultaneously. This also works if a category is part of another subshop. Besides you are able to show the shopping world only on the category start page, the listing page or both by setting the visibility.
• Device settings (4): Here you can decide whether a shopping world should be visible on any kind of display and device or make a selection of devices that are (not) allowed to display the shopping world. If you deactivate a device group here, an exclamation mark (9) is displayed within the respective (brightly coloured) viewport selector.
• Customer Streams (5): Select individual Customer Streams that'll carry the particular shopping world. How that works, is explained here under in the article.
• Time settings (6): Define start and end times for your shopping worlds, in case you only want to display them for a limited time. Note: The time limit function is not fully compatible with the HTTP cache in versions before Shopware 5.5! Be sure to deactivate HTTP caching, if you are experiencing any troubles, If HTTP caching is still a desirable feature for your shop, it is nevertheless possible to coordinate cronjobs and timed shopping worlds.
• Preview (7): Activate or deactivate the preview function for specific shopping worlds. If active, the respective shopping world is displayed in the backend the same way it would look like in the live frontend of your shop.
• Unlink all connections (8): If you have chained several shopping worlds, you can unlink these by clicking here. The function furthermore allows you to simultaneously edit only currently selected viewports and keep the other chained viewports out.
• Warning (9): This warning indicates there might be problems with the frontend display of the particular viewport. It either is displayed incorrectly or not at all in the frontend. Further options can be found in the Device settings (4).
• Viewports (10): Click and set active individual viewports to adjust the shopping world only for those respective viewports via the Designer (14).
• Hidden elements (11): Reveals hidden elements in the current viewport. Explanation: If you need to create a banner and apply different designs for landscape and portrait formats, you can initially add both elements to the shopping world. Afterwards you hide the element meant to appear in landscape format from the portrait viewports and only display it in the landscape format. This way you can guarantee your shopping world looks good on all kinds of displays and not deliver broken, displaced and possibly useless content.
• Chaining (12): Connect and chain a certain set of viewports with this function. This makes it easy to apply changes to a whole group of chained viewports. However the approach towards setting up the viewports differently, calls for a moment of attention. Following that, be aware that it is necessary to have all pictures used in the entire shopping world present in every viewport as well. For those pictures that will at first overlap each other, disable the ones you don't want to see. In case you only need a selection of all pictures in a viewport just activate a viewport to act as the "master". Then click on the chain icon in all of the other viewports you want to conjoin and make sure the chain icon is closed. If complications occur because there is diverging contents stored in the viewports, you will be asked if you want to overwrite the previously entered settings of your viewport. Confirm with "Yes" to accept changing the layout. Elements placed on the master viewport are instantly transferred to all other linked viewports.
• Viewport range (13): This status bar serves as an indicator for your layout. Shopping worlds are always displayed in the smallest possible size. The colored area indicates the maximum size of the shopping world in the respective viewport.
• Designer (14): Using the built-in designer tool you can freely place, move and edit the elements you have placed in the respective viewport of the current shopping world.

Don't forget to save any changes you made by hitting the "save" button.

Customer Streams

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.

How to successfully use the designer

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.

Layout

The Layout tab holds the following adjustable settings that help you set up your shopping worlds.

Modes

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

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.

Resize mode

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.

Rows mode

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.

Element	Description
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

Placing elements

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.

Hidden elements

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.

Available elements

Text element

• Text: In the Text element you can integrate your own HTML content into the shopping world, for this you can use the editor. Here you can edit directly or insert finished source code using "Edit HTML Source Code".
• Title: The title is displayed in the frontend above the element itself.
• Do not add styling: You use this to define whether the template styling should also affect the HTML element or not. This is recommended for inexperienced users, as it ensures a uniform look in the shop.
• CSS class: You can use this option to set a CSS class to the element if you want to customize the styling in the frontend more than is possible in the standard system.

Banner

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.

Articles

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.

Category Teaser

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.

Blog articles

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.

Banner Slider

In the Banner Slider you can run several banners in one slideshow. The following options are available:

• Title: Title of the element, this is displayed as an overlay in the frontend.
• Show arrows: Displays arrows in the frontend that let the customer manually navigate through the banners in the frontend.
• Show navigation: Shows the navigation of the banners through dots at the bottom of the slider. By clicking on a point the corresponding banner is displayed.
• Scroll speed: Here you can set the duration of the transition from one banner to the other in milliseconds (ms).
• Auto Rotate: Defines whether or not Shopware automatically rotates the banners.
• Rotation speed: Here you set the display time in milliseconds (ms). The display time is then the same for each banner contained in the slider.

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.

Youtube video

Here you can embed a YouTube video. You can set the following things:

• Youtube-Video-ID: Insert here the ID of the video or the complete video URL.

Use HD videos: Directs the widget to play the video in HD

• Start video automatically: starts the video automatically after loading the page.
• Hide recommendations: Suppresses video recommendations at the end of the video.
• Hide Control: Hides the control that is normally displayed at the bottom of the video when hovering. The Start and Stop functions can now be executed by clicking directly on the widget.
• Start after x seconds: Starts the video at the time index of "x" seconds. This means, for example, that the video is started 30 seconds after the actual start.
• Stop after x seconds: Stops the video at "x" seconds (not after "x" seconds!!!) At a value of e.g. 60 the video would stop at second 60. In combination with "Start after 30 seconds", this would result in a net playback time of 30 seconds.
• Hide info: Hides the video name in the item.
• Hide branding: Hides the YouTube logo.
• Enable loop: Repeats the video with the above settings automatically and in an endless loop
• CSS Class: Forget a separate CSS class here if you want to make adjustments that the element does not provide itself.

You can find the YouTube video ID here:

iFrame element

You can embed existing URLs in the iFrame element.

manufacturer slider

The manufacturer slider offers the possibility to integrate manufacturer logos as sliders into the shopping world. You can adjust the following settings here:

• Manufacturer type: Manufacturer of a category only fetches manufacturers of a selected category. Selected manufacturers allows you to define the desired manufacturers completely individually.
• Heading: Here you can define the heading that is displayed as an overlay on the element.
• Show arrows: Displays the arrows for manual navigation in the slider.
• Scroll speed: Defines the time it takes for the slider to switch pages.
• Rotate automatically: Automatically rotates the slider.
• Rotation speed: Defines the time a page remains visible before the slider changes pages.

article slider

The article slider can integrate articles into the shopping world in a preview. The following settings can be found here:

• List type:

Selected articles: Here you can define the articles completely yourself. If you select this option, an article selection appears in the lower area, in which you can search and select the articles to be displayed.

Selected variants: This option basically works in the same way as the selected article selection, only the separate variants of the articles are available here instead of only the main articles.

• Newcomer Articles: All new articles in the shop are displayed here.
• Topseller articles: All top sellers are selected here.
• Price (ascending): The articles are selected in ascending order.
• Price (descending): The articles are selected in descending order.
• Product-Stream: You can use this to select a product stream. If you choose this variant, the category selection below will be exchanged for the product stream selection.
• Category selection: This selects the category from which the articles are fetched. If you want to display all available categories, simply select the main category of the shop.
• Max number: Defines the maximum number of articles displayed in the slider. This option is only displayed if Shopware collects the items independently (top seller, newcomer & price).
• Heading: Here you can define a heading that is then displayed as an overlay on the element.
• Show arrows: Displays arrows in the slider for manual navigation.
• Slide speed: This setting determines how long the slider takes to switch pages.
• Rotate automatically: Allows you to rotate the images in the slider automatically.
• Slide interval: Defines the display time of the individual slider pages/images.

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:

• Video mode:

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.

• .webm-Video: Specifies the file source for WebM videos. Here you can specify an element from the media manager as well as an external source.
• .ogv-Video: Specifies the file source for OGG videos. Here you can specify an element from the media manager as well as an external source.
• .mp4 video: Specifies the file source for MP4 videos. Here you can specify an element from the media manager as well as an external source.
• Preview image: Here you can specify an image to be displayed if the video has not yet started.
• Automatically play video: Automatically plays the video as soon as the page is displayed.
• Automatically preload video: automatically preloads the video so that it can usually be played back more smoothly and without intermediate loading.
• Show video control: If this function is active, a control bar is displayed at the bottom of the video to control playback of the video. If disabled, only a play/pause button is displayed in the upper right corner of the element for navigation. Note that video control is only available in scale mode.
• Video loop: Displays the video in continuous loop.

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.

• Left starting point: Defines the left starting point of the video for scaling in percent.
• Upper starting point: Sets the upper starting point of the video for scaling in percent.
• Overlay Text: Sets a text for an overlay over the video.
• Overlay color: Sets the color of the overlay (text) in RGBA.
• CSS class: If you want to make further CSS adjustments, you can insert your own CSS classes here

code element

The code element is intended for HTML and JavaScript and executes code entered here without any adaptation in the frontend. First the HTML code is executed, then the JavaScript code.

JavaScript must be entered without <script> tags.

Add and delete rows

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.

Storytelling

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.

Additional options

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.

Designer

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.

Quick View

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.

SideView-Element

The SideView element can provide a banner with a fold-out article slider to place special articles directly in the banner.

• SideView Position: Here you can define whether the article slider appears on the right or at the bottom of the banner.
• SideView- Size: Here you define whether the article slider should completely overlay the banner or only partially.
• Select category: Defines a category from which the articles are to be displayed. This setting is only used for the following list types: Newcomer Articles, Topseller Articles, Price (ascending) and Price (descending).
• List type: Here you can choose whether the element should fetch the articles automatically (Newcomer, Topseller, Price (ascending) and Price (descending)) or whether you want to define the articles (and variants) yourself. In this case, the known article entry appears below, in which the articles and variants can be defined:
• Maximum number of products: This controls the maximum number of articles to be displayed in the SideView element. Note that this option is only available if the element retrieves the articles independently, i.e. the list type is not set to selected articles or selected variants.
• Show arrows: This displays navigation arrows to scroll through the slider manually. Note that without the navigation arrows the slider can be stopped by mouseover, but cannot be restarted.
• Start automatically: Automatically runs the slider after a page call.
• Select banner: Here you select a banner to be displayed in the element. After selecting a banner you will see a preview of the banner below. Here you can also select the starting point of the zoom. Note the description of the banner element, its function is also explained there.

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:

Landingpages

Introduction

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.

Master and slave

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.

Shopping World Templates

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.

Administration of the shopping world templates

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.

Import and export of templates

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.

Tips & tricks for optimal shopping-worlds

Introduction

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.

Display Sizes

In the standard system, the settings for a new purchasing world specify the following parameters:

• Cell Height 185 px
• Gap: 10 px
• Columns: 4

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.

Show HTML in modalbox

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>