Gravity demo-3 features catalog

Naast de 26 page-layouts bevat Gravity demo-3 een tweede dimensie: 31 named features — micro-blokken, theme-config toggles, Shopping Experiences editor-elementen en product-gedragingen.

Sommige features overlappen met componenten die al in de styleguide staan (kruisreferentie). Sommige zijn nieuwe capabilities die ROBBshop zonder maatwerk kan inschakelen. Sommige zijn alléén beschikbaar op andere Zenit-thema's (Horizon, Atmos, Sphere) — niet in demo-3.

8 Header / Footer 13 Shopping Experiences 7 Products 3 Cross Presentation Status: NEW capability Status: cross-ref Status: ⚠ cross-theme

NEW nog niet in styleguide — extra config-keuze

↔ Cross-ref = bestaand component / layout (zie styleguide)

⚠ Cross-theme alleen op Horizon / Atmos / Sphere — niet demo-3

A · Header & Footer

8 features

Theme-niveau opties voor hoe header, hero en footer zich gedragen. Configureerbaar in Shopware admin → Settings → Theme → "Theme-Configuration".

↔ C1

Hero — image bg

Zie styleguide → C1

F-HF-1

Hero section (image bg)

Full-bleed banner met afbeelding-achtergrond. = Component C1 (image-cover hero) — al gerenderd in styleguide.

NEW

Video achtergrond

F-HF-2

Hero section (video bg)

Full-bleed banner met video-achtergrond in plaats van statische afbeelding. Variant van C1. Gebruikssituatie: campagne-landings of brand-storytelling.

NEW

Header zweeft over carousel

F-HF-3

Overlaying header (slider)

Header zit over de hero-carousel — geen witruimte tussen header en eerste afbeelding. Voor campaign-landings waar de hero direct boeit.

NEW

Header zweeft over video

F-HF-4

Overlaying header (video)

Combineert F-HF-2 + F-HF-3: header zit over de video-bg hero. Sterk visueel statement.

NEW

Transparent

F-HF-5

Transparent header

Doorzichtige nav — content erachter zichtbaar. Voor sterke hero-imagery. Theme-config toggle.

↔ F1

= Component F1 — newsletter signup pill. Al gerenderd op alle drie de mockups.

Multi-level mega-menu — alleen op Horizon theme. Niet beschikbaar in Gravity demo-3 zonder theme-switch.

⚠ Demo-1

Custom footer columns

Gravity demo-1 only

F-HF-8

Custom column footer

Volledig configureerbare footer-kolommen — alleen op Gravity demo-1 demo, niet ingebouwd in demo-3.

B · Shopping Experiences

13 editor-blokken

Wat ROBBshop's productmanager ziet in de Shopware admin → Content → Shopping Experiences drag-drop editor. Deze blokken kunnen op élke pagina gesleept worden zonder developer.

NEW

Image + text carousel

Slide-by-slide

F-SE-1

Image text slider element

Carousel die afbeeldingen + tekst-blokken combineert per slide. Verwant aan M3, maar in slider-vorm.

↔ C1/M1

Teaser block

Zie styleguide → C1/M1

F-SE-2

Teaser element

Promotional content block. Overlap met C1 (hero) en M1 (image grid). Generieke teaser.

↔ F2

Statische tekst-aankondigingsbalk. Overlap met F2 (CTA banner large).

NEW

🔍 Zoeken…

Search met bg-image

F-SE-4

Search banner element

Search-input met achtergrondafbeelding. Voor categorie-pagina's of brand-pages waar zoeken primair is.

NEW

Highlights van product/service-voordelen in een rij. Verwant aan T1 USP-stack maar als CMS-block.

NEW

<div>...</div>
{{ twig }}
// JS

HTML/TWIG/CSS/JS

F-SE-6

Code element

Krachtig: custom HTML/TWIG/CSS/JS in een Shopping Experiences pagina zonder plugin. Voor één-malige tweaks of externe widget-embeds (Trustpilot, Calendly, etc.).

NEW

Visuele scheidingslijn

F-SE-7

Divider element

Scheidingslijn tussen secties. Atom-niveau block — gebruik voor visuele rust op lange landings.

Nav-pad-indicator. = Bestaande breadcrumb chrome — al op PLP/PDP gerenderd.

= Layout L-PDP-3 (SW10048) — al in layout catalog. PDP top-region met description in buy-box.

↔ L-PDP-4

Gallery + full buybox

Zie layout catalog

F-SE-10

Gallery buybox block 2

= Layout L-PDP-4 (SW10064) — al in layout catalog. PDP top-region met logo + description.

NEW

Multi-koloms layout

F-SE-11

Grid blocks

Multi-koloms content-layout systeem — ribbon van 2/3/4/6 kolommen. Layout-primitief voor de SE editor.

NEW

Page-section templates

F-SE-12

Layout blocks

Flexibele page-section templates — 1/2/3-kolom rijen die in het editor lijst staan. Layout-primitief.

↔ P3

= Component P3 (product-listing). Productrasters met filters + sortering, op categorie-niveau.

C · Product page features

7 features

Sub-element gedrag op productkaart en PDP. 3 hiervan zijn volledige PDP-layouts (L-PDP-13/14/15) — al in de layout catalog.

NEW

Variant image swap

F-P-1

Cover switch

Hover/klik op een variant-kleurzwatch toont direct de bijbehorende productfoto. Voor producten met kleurvariaties (bv. Hue lampen, schakelaars).

NEW

♥

⇄

Quick wishlist / cart

F-P-2

Product actions

Quick-action knoppen op hover over productkaart: wishlist, add-to-cart, vergelijken. Verlaagt friction op PLP.

= Layout L-PDP-13 (SW10047). PDP met productspecificaties als bullet-list onder de prijs.

= Layout L-PDP-14 (SW10046). PDP met extra custom tabs (Properties / Video / Documents / Manufacturer).

Datasheets / Documents

= Layout L-PDP-15 (SW10045). PDP met dedicated "Documents" tab voor downloadbare datasheets.

Aantal-keuze als dropdown in plaats van +/- knoppen. Alleen op Horizon theme.

Aantal-keuze als tekstveld voor handmatige invoer. Alleen op Sphere theme.

D · Cross Presentation

3 features

Theme-presentatie opties die op alle pagina's van invloed zijn.

↔ TOK-2

= Tokens TOK-2. Font-family / weight aangestuurd via theme-config (ROBBshop = Mulish 400/600/800).

Promotionele notification-balk bovenaan. Alleen op Horizon theme.

Animated form input labels (label "zwemt" naar boven bij focus). Alleen op Atmos theme.

Wat dit document toevoegt aan de layout catalog: 5 nieuwe header/footer features (video bg, overlaying header ×2, transparent header), 7 nieuwe Shopping Experiences blokken (image-text slider, search banner, features element, code element, divider, grid blocks, layout blocks), 2 nieuwe product micro-features (cover switch, product actions). De 6 cross-theme features zijn alleen beschikbaar bij switchen naar een ander Zenit-thema.

Hoe je een feature aanzet:

Theme-config features (Header/Footer): Shopware admin → Settings → Theme → "Theme-Configuration"
Shopping Experiences blokken: Shopware admin → Content → Shopping Experiences → blok slepen in editor
Product page layouts (L-PDP-13/14/15): Shopware admin → Catalogues → Product → "CMS Page" attribuut
Cross-theme features: vereist switchen naar Horizon / Atmos / Sphere — separate licence-beslissing

Bron: gravity.zenit-demos.com/demo-3/en/features/