Create and position containers
Summary
Containers are the advertising spaces of the shop. They are maintained under eCom \ Container.
A container becomes effective in two steps: you create it, and you define how the area in which it appears is displayed.
What a container is, which link types exist, and which image dimensions apply are described in the service description on the page Marketing-Container.
Create container
- Open eCom \ Container. The list shows all existing containers with position, type, link type, and status. Use Create new container to add another one; clicking on a row opens an existing one for editing.
- Select Container type: Image, Image with text, or Text with image. See below.
- Depending on the type, add Image and Text. If the image was created with AI, check Image is AI generated — see Mark images as AI-generated. The text can be formatted using the toolbar of the Content field. The image dimensions depend on the display type of the area, see below.
- Set Priority.
1appears first. - If the container should only appear for certain customers, select a Customer list. Without a customer list, it appears for all.
- Set Link type and the associated target.
- Set Status to Released — only then does the container appear in the shop.
- Save.
- Provide data — with the Images checkbox, otherwise the image will be missing in the shop.
Optionally, a display period can be set via From and To, for example for a limited-time promotion. Without an entry, there is no limitation.
Select container type
| Type | in float area | in slider |
|---|---|---|
| Image | image only | image only |
| Image with text | text to the right of the image | text below the image |
| Text with image | text to the left of the image | text above the image |
The Content field includes its own toolbar for formatting.
When choosing the type, note in which Type the container appears: the same combination of image and text is displayed side by side in the float area and stacked in the slider. Text that fits next to the image in the float may appear differently above the image in the slider.
Add image
Use a square 900 × 900 pixel image for a float tile — also for types with text. A tile with text is twice as wide, but the image inside remains the same size as in a tile without text. So you do not need a larger image.
Warning: In the float area, the image can be cropped left and right. It fills the tile height, and if a neighbouring tile has a lot of text, the entire row becomes taller. Therefore, place the motif centrally and leave margins on the sides.
As a rule of thumb: use rather wide images for the slider, square ones for the float area.
For the slider, the required format depends on whether it switches automatically:
| Display interval | Recommended image size |
|---|---|
0 — no autoplay | at least 630 pixels high, aspect ratio between about 1:1 and 2.3:1, for example 945 × 630 |
greater than 0 — autoplay | 1500 × 500 pixels (3:1) |
The slider does not crop. If the aspect ratio does not fit, the image is scaled smaller and gets blank stripes — for the autoplay slider on the sides if the image is too tall, and top and bottom if it is too wide. A larger image frame does not help, only the correct ratio.
Warning: If you change the Display interval later, the required image format of the containers at this position also changes. The complete size table is in the service description on the page Marketing-Container.
Warning: For the link type Order template, the selected order template must be enabled for eCom. See Enable order template for eCom.
If a container does not appear in the shop
Check in this order:
| Check | Background |
|---|---|
| Is the Status set to Released? | Only this status appears in the shop. In progress, Completed, and Deleted remain invisible. |
| Is today within the From / To period? | Empty fields mean no limitation. |
| Does the Culture match the customer's language? | In the multilingual shop, the container must be maintained per language. |
| Were the data provided with the Images checkbox? | Without this checkbox, the image is missing. |
A container that should no longer run does not have to be deleted — Completed removes it from the shop but keeps it in the list.
Define display type of the area
- Open eCom \ Container, submenu Items.
- For Type of display for the desired position — Homepage top or Homepage bottom — select Slider or Float.
- For Slider: set in the field Display interval whether it switches automatically. See below.
- Save and provide data.
Display interval
The field appears only for Slider.
The value is entered in milliseconds: 3000 is three seconds.
| Value | Effect |
|---|---|
0 | The slider does not switch automatically. Several cards are shown side by side; the customer navigates using the arrows left and right. |
greater than 0 | The slider switches automatically after this time. Only one card is visible at a time, with a dot navigation below. |
Warning: The time applies per image, not for the entire cycle. With three containers and
3000, each image is shown for three seconds; one cycle takes nine seconds.
Consider when setting: a short interval appears restless, and a container with text needs longer to read than a pure image.
The switch pauses as long as the customer’s mouse is over the slider or it is focused via keyboard. If the customer clicks a dot in the dot navigation, the slider stops permanently on that image and does not start again automatically. Therefore, do not expect every customer to see all containers — important content belongs on the first container or in the float area.
Both positions can be freely assigned: a slider at the top and a float area at the bottom is the usual combination, but the reverse or the same display type twice is also possible.
Order of multiple containers
If multiple containers are in the same area, the priority determines the order. For a slider, the shop then shows arrows and dot navigation; for a float area, the containers are stacked from left to right.