Hero stage

Component preview#

Tabs#

• Customers want clear separation between store and online store offers and an overview of which topics are on offer at what time.
• Onlineshop Tab: All campaign teasers in the onlineshop tab have to refer to non-food campaigns which are available in the onlineshop.
• Retail Tab: All campaign teasers in the retail tab have to refer to campaigns which are available in retail.
• Hybrid campaign teasers will be presented in the onlineshop tab and the retail tab.

Marketing message#

• A marketing message is to provide the customer with one important information and must be quick and easy to understand.

Hero stage headline#

• The Hero stage headline welcomes the customer on the page and also helps users to understand which tab is active.

Special OnlineShop Teaser#

• per day the option "Special OnlineShop Teaser" can be activated.
• On mobile the first teaser is rendered in the upper right corner and on desktop the first teaser in the upper left corner.
• The main difference between standard and a Special OnlineShop Teaser comes with the yellow background and additional subtitle.

Standard Campaign Teaser#

---

Amount of Teasers#

• min amount of 4 teaser
• the amount of teasers can increase in steps of one
• if there are more than 8, display a "show more" function

Recommendations of Use – Do's and Don'ts#

Since the hero stage mainly consists of a form of campaign teasers, you can find everything you need to know about campaign teasers under the heading. Click here!

Accessability, WCAG#

All elements and ingredients of the hero stage must fulfill the guidelines of the WCAG

Downloads#

Get the latest hero stage Photoshop template: hero-Stage-template-2021-09-19.psd (535 KB)

Source references#

• Lidl-DE-neue-Startseite-Umfrage_2020-05-12.pdf
• A/B Test Online Wording 2020
• Concepts for Lidl Startpage 2021
• Customer Survey Hero Teaser
• RES202106PPRO_Redesign Product Tile Concept