Big Slider

Purpose

The Big Slider is a variant of the Stage Theme. The Stage Theme displays images as a slider and minimum of 1 and a maximum of 7 images can be integrated in the Stage Theme component. If desired, the images can link to specific target pages. The Stage Theme Component is integrated per default in the Header part of the Webconsumer Homepage and is displayed in full width.

The Big Slider variant can additionally insert selected Article Tiles to highlight them so that customer can find out more quickly  about articles that could be right/ relevant for the customer. 

Go directly to

Examples

The following examples show what the component can look like. Depending on the configuration, a component can be displayed in different ways.

TEST Test slide 2

2.59
350-g-Packung kg = 7.40
TRADER JOE'S Salat Menü
Salat Menü
1.79
300-g-Schale kg = 5.97
TRADER JOE'S Frische Salate
Frische Salate

1.29
125-g-Beutel 100 g = 1.03
TRADER JOE'S Feiner Blattsalat
Feiner Blattsalat
0.69
250-ml-Flasche 100 ml = 0.28
DELIKATO Salatdressing
Salatdressing

Configuration

To create the component, follow the steps below. 

  1. Open a Consumer Page and open setting of the Stage Theme
  2. Check that in Tab GENERAL a variant called "big slider" can be selected and activate the checkbox
  3. In the dropdown at the top it is possible to choose either "Points" or "Tabs" as Navigation Style for the Big Slider 
  4. Check that on each Theme Tab a new area Big Slider is available
    • Here you can configurate Button text+URL, Link target behavior and headline
    • A color scheme can be selected fo each tile (will be displayed as color of the Article and Content Tile)
    • In the dropdown of "display in.." you can decide if this particular slide should be displayed in Web only, Web&App or App only - if App only is selected then it is only neccessary to insert the image format for mobile viewport
    • At the bottom you can "add field" these are for the Article and further below for Content Tiles
    • After adding a field you can see new input fields, here the like article link and tile position can be configurated
  5. Keep in mind that an image has to be selected for each active slide (can be inserted at the top of each slider tile settings) as well that the articles chosen for the Slide need to be integrated into a current active offer/assorment page

Additional Note

 

The interaction concept assumes a maximum of 4 Article Tiles on desktop and 3 on mobile Tiler per category / slide.

In order to show article tiles in the slider, 2-4 tiles need to be selected on each slide. If the number of tiles is not within this range, no tiles are displayed on the whole slider.

 

There are no fixed heights. The height per viewport can be defined by the editor by the graphic. Each size (listed below) indicates the recommended maximum dimension of the graphic (width x height) in pixel (see max-width).

Therefore it it is highly recommended to use the same height/ dimension for all slides to avoid inconsistencies.

  • Mobile:
    • min-width: 320px x 180px
    • max-width: 767px x 432px
  • tablet:
    • min-width: 768px x 432px
    • max-width: 1023px x 575px
  • desktop:
    • min-width: 1024px x 333px
    • max-width: 1817 x 590px
  • APP:
    • App Small: 2800px x 2100px (Dimension: 4:3)
    • App Medium: 2800px x 1200px (Dimension: 16:9)
Erinnerung für
Fehler Es ist ein Fehler aufgetreten. Bitte versuchen Sie es später erneut.

Sollen wir Sie benachrichtigen wenn der Artikel verfügbar ist?

hh

Tag der Erinnerung
Zwei Tage vorher
Einen Tag vorher
Am Angebotstag
Uhrzeit
00:00
01:00
02:00
03:00
04:00
05:00
06:00
07:00
08:00
09:00
10:00
11:00
12:00
13:00
14:00
15:00
16:00
17:00
18:00
19:00
20:00
21:00
22:00
23:00
Hinweise
  • line 1
  • line 2
  • ...

Eine Erinnerung ist nicht mehr möglich

Die Erinnerungszeiten für diesem Artikel sind bereits abgelaufen.

Erinnerung aktiv!

hh

Sie erhalten Ihre Erinnerung am ${date} um ${time} Uhr.

hh

Wir senden Ihnen noch eine Nachricht per E-Mail, um ihre E-Mail Adresse zu bestätigen. Bitte klicken Sie auf den Link in der Nachricht.

regions.regionSwitchHeadline

regions.regionSwitchText
regions.regionSwitchTextExplicitSwitch