Stage Theme

  1. Showroom Home
  2. Components
  3. Stage Theme

Purpose

The Stage Theme displays images as a slider. A 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. If more than one image is displayed in the Stage Theme, dots or tabs are displayed as indicators. Whether tabs or dots should be shown can be configured by the author. The slider works automatically.


The Stage Theme Component is integrated per default in the Header part of the Webconsumer Homepage and is displayed in full width. Here it also offers a special feature: The content editor can decide for each integrated image in which channel (Web & App, Only Web, Only App) it should be displayed. The default setting is Web & App.

 

Go directly to

Examples

In general, there are two display options the editor can choose from:

  • Corporate Responsibility Behavior: Separate images can be integrated for large, small and medium screens. Additional text elements can be added.
  • Big Slider: Up to 4 article tiles can be added which are displayed together with the stage theme to highlight certain articles 

 

Example 1: Standard Behavior, Navigation Style "Tab"

  • Tab 1

  • Tab 2

  • Tab 3

Example 2: Standard Behavior, Navigation Style "Points"

  • Point 1

  • Point 2

  • Point 3

Example 3: Corporate Responsibility Behavior, Navigation Style "Points"

ALT Text

Headline

Text displayed in Subheadline 1

Text displayed in Subheadline 2

Button Label
ALT Text

Headline

Text displayed in Subheadline 1

Text displayed in Subheadline 2

Button Label

  • Theme

  • Theme

Configuration

To create the component, follow the steps below. 

Stage Theme

Special configuration option on Homepage

Per default, the Stage Theme component is integrated in the header part of the Homepage. Within this component the channel for the integrated images can be selected. The choice is Web&App, Only web, Only App. The default setting is App&Web. This choice only applies for this very specific Stage Theme component.

Stage Theme configuration, tab General
  • Step 1
    Configure Stage Theme
  • Step 2
    Choose Navigation Style from the dropdown menu (dots or tabs) in the tab General
  • Step 3
    Choose the Behavior of the Themes
Stage Theme configuration, Tab Theme 1
  • Step 4
    Integrate the following in the tabs Theme 1 to Theme 7:
    • a. Drag and Drop Image from the side panel
    • b. Integrate Title (optional)
    • c. Integrate Alt Text
    • d.Integrate Theme (optional): The text integrated here will be displayed as tab-name, if tab has been defined as indicator in step 03.
    • e. Integrate Link (optional): If a link is integrated here, the whole image is linked
iPaper settings

From customer view it would be nice to have the possibility to add products from the magazine directly into the shopping list. 

Therefore this feature has been added. 

Following steps are needed to set it up: 

  1. Open iPaper and login
  2. Open magazin that is going to be live 
  3. Click on the price tag of an article and check that 
    • enrichment section = shop
    • Product ID is the Product Detail Page link

After doing so you need to integrate your iPaper magazine into the CMS:

  1. Open the properties of the Country Page and navigate to the Tab "external services"
    • Enter your iPaper credentials into the iPaper section, then save and publish
  2. Open properties of Language Page and navigate to Tab "Labels" 
    • Enter the labels in the iPaper section, then save and publish
  3. Create a new Page called iPaper
  4. A iPaper component is already integrated automatically 
  5. Open settings of the component and enter Headlinde, Subheadline and Flipbook/magazine URL from the iPaper
  6. Save Publish

 

iPaper Cookie Consent

For the cookie settings following config is wanted:

  1. Login in to iPaper
  2. Go to the Tab settings
  3. Click on Consent management in the topic list
  4. Switch from Basic to Integration
CR settings
  • Step 6
    When choosing Corporate Responsibility integrate the following in the tabs Theme 1 to Theme 7:

a. Drag and Drop Image (25:9) from the side panel

b. Drag and Drop Image (4:3) from the side panel

c. Drag and Drop Image (22:9) from the side panel

d. Integrate Title (optional)

e. Integrate Alt Text

f.  Integrate Theme (optional): The text integrated here will be displayed as tab-name, if tab has been defined as indicator in step 03

g. Integrate Link (optional): If a link is integrated here, the whole image is linked

Stage Theme configuration: Corporate Responsibility behavior
  • Step 6
    • h. Integrate a Button Label
    • i. Integrate a Headline
    • j. Integrate a Sub headline 1
    • k. Integrate a Sub Headline 2
    • l. Choose whether the alignment of the text block should be left aligned, centered or right aligned 
  • Step 7
    Save     changes

Configuration - Big Slider variant

Big Slider Variant
  1. Open a Consumer Page and open the settings of the stage theme
  2. Check that in Tab GENERAL a new Stage Display Option  called "big slider" was added
  3. Check that on each Theme Tab a new area "Big Slider" is available
    1. Here you can configurate Button text+URL, Link target behavior and headline
    2. A color scheme can be selected as well - this determines the color scheme of the article tile and and the background of the Headline
    3. At the bottom you can "add field" these are for the article tiles
    4. After adding a field you can see new input fields like article link and tile position can be configurated
  4. 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)
More infomation about Big Slider here

Important Information

Please be aware that the ALDI App doesn't make use of the headlines and products, so a specific image has to be created exclusively in the App.

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