Shopping Experiences

Version

Table of contents

You can find the menu item Experience Worlds under Content. In the shopping experiences you can create content pages like landing pages or shop pages and manage them centrally. 
The created layouts consist of blocks, which in turn consist of one or more elements such as text or images and can be used as a shop page or category page. 

Overview

In the overview you will find all layouts already created in one list (1). Via the search bar (2) you can search directly for a created layout. In the dropdown menu Sort by: (3) you can sort the list by creation date or editing date.
On the left side in the menu Layouts (4) you can filter the layouts thematically. Here you can, for example, limit the display to all shop pages or all landing pages
Using the context menu (5) in each entry, you can delete the respective layout or preview it. This preview serves to distinguish the layouts in this overview faster. 
The layout editor can be opened by clicking the button Create new layout (6).
To edit a layout, just click on the corresponding entry. 


Create new Layout

After you have clicked on Create new layout, you will now see the preview (1) of your layout on the left side. This will show you live how your layout will look like in your shop.
On the right side you can see the settings (2) of your layout. Here you can enter a unique name (6) for the layout and a layout type (7)
The + symbol (3) opens the selection window of the blocks you can add to your layout.
In the block settings (4) you can make all the important settings for a selected block and in the navigator (5) you have a quick overview of all blocks. You can open these two points as soon as you have added a block to your layout. 
 

Layout Type

Beside the name you first have to choose a layout type in the Settings. This serves on the one hand to sort your layouts better in the overview. Furthermore, depending on the type, different blocks are available.

Shop page: 
All service pages of your shop are to be regarded as shop pages. These can be for example the terms and conditions page, the shipping conditions or the contact form.

Landingpage: 
Landingpages offer you various design and marketing possibilities in your shop. These can be theme pages where you can do marketing or other pages where you can land during your visit to the shop.

Listing page: 
The listing page automatically includes a product listing. If you select this layout type, you can also use the Preview data record field in the settings to select the article stock to be displayed in this listing.

Furthermore, you have the possibility to dynamically display texts from the corresponding category on a category page. For this you can use the data mapping in the element settings of a text element on the right above the editor.

 

Add a block

To add a new block, first open the block selector. You can open it by clicking the plus icon on the right side of the preview or by moving the cursor between two existing blocks and clicking the plus icon in the preview.


In the Blocks selection window, all blocks are available for you to create your own layout. In the drop down menu Block category you can choose which category of blocks should be displayed in the selection. The categories text blocks, image blocks and blocks with text and images are available here. In the category Commerce you can add an article listing to your layout.

To add a block to your layout, you can simply drag and drop it into the preview area and drag it to the desired position.

Block settings

You open the block settings by clicking on a block in the preview and then clicking on the block settings icon located directly below the plus icon for new blocks. 
This is where you set the basic settings for the currently selected block.

Name (1): This name is used to better distinguish this block. For example, it is displayed in the navigator.
Sizing mode (2): Here you can decide whether the elements of the block should be centered or displayed in full width.
Background color (3): Here you choose the background color of the block. In order to realize uniform colorings you can also specify the color using the hexadecimal value.
Background image (4): Instead of a background color you can use your own background image at this point. This can be for example a pattern or a background image to a text.
Image mode (5): If you have deposited a background image, you can choose here whether it should fill in the block or align the image with the block.
Layout settings (6): In the layout settings you determine the distance between the elements of a block and its edges.


In the navigator you can see an overview of all blocks by their name. Drag & Drop allows you to move the blocks up and down and thus change the order of the blocks. 
With the plus symbol you can create a copy of the block below the respective block. You can remove the block by clicking on the recycle bin icon

 

Preview

The preview shows you directly how your layout currently looks in the storefront. You can also display the layout here directly for the mobile view, the tablet view and the desktop view (1). The used blocks and elements are automatically scaled to the appropriate format. In the compact mode (4) you get an overview of all element settings. Here you can directly change the settings of multiple elements without having to open each element individually. 
Via the X (5) in the left upper corner you get back to the overview.
 

Element settings

Depending on whether you want to edit a text element, an image element or a listing element, there are different setting options.


Text

 

Image

In the element settings of an image, you can change the image to be displayed. In display mode, you decide how the image should be displayed in the block. By standard, the image adjusts to the surrounding box up to its native size. When Cover, the box is completely filled with the image. For stretches, the image is stretched to the size of the box. 
Under Link to you can enter an URL to which the image should be linked. The URL can be opened either in the same tab or in a new tab. 

Product listing

Was this article helpful?