STRIX · ROBBshop × Gravity demo-3 — design preview package Mei 2026 · Voor klant-akkoord
Strix · Configuration-first design preview

Zo ziet ROBBshop eruit op Gravity demo-3

Geen redesign. Geen tear-down. Je huidige robbshop.nl — 1:1 dezelfde structuur — maar opnieuw gebouwd op het Gravity demo-3 thema met ROBBshop huisstijl.

Vier bestanden hieronder: een component library (zo werkt het systeem) en drie volledige pagina-mockups (homepage, categorie, productdetail) waarin je je huidige site herkent.

00 · COMPONENT LIBRARY~30 componenten · scrol-doc

De ROBBshop component library

De ~30 herbruikbare blokken (Tokens, Atoms, Molecules, Organisms) waaruit elke ROBBshop pagina is opgebouwd. Configureerbaar via Shopware admin — geen code nodig per pagina. Elk blok heeft een ID, varianten, en "Used on:" referentie.
Voor: Strix & ROBBshop ontwikkelteam · designers · PM
Open styleguide →
01 · HOMEPAGEAnchored to live site

Homepage

Hero + Smart Home Categorieën quick-nav + ONTDEK DE banner + Tips van Robb + Smart Home Blogs + Nieuwe producten + Onze merken + nieuwsbrief. Volledig op ROBBshop huisstijl, structuur identiek aan de live home.
Mockup-anchor: robbshop.nl/ (mei 2026)
Open homepage →
02 · CATEGORY PLPAnchored to live site

Slimme GU10 lampen

Sub-categorie-pills + filter-sidebar (Merk · Lichtkleur · Protocol · Vermogen · Prijs) + 4-koloms product-grid met eco-tags + mid-grid marketing card + SEO content block. Dezelfde categorie als op de live site voor directe herkenning.
Mockup-anchor: robbshop.nl/slimme-gu10-lampen (mei 2026)
Open PLP →
03 · PRODUCT PDPGravity SW10040 layout

Philips Hue GU10 Triple Pack

Gravity SW10040 layout (gallery + buy-box default) — exact zoals de huidige robbshop.nl PDP. Inclusief eco-tags, stock-dot, "Werkt met" badges, gecombineerde producten, alternatieven, tabs (Specificaties open), reviews, klanten kozen ook voor, en een herhaal-CTA onderaan.
Mockup-anchor: Philips Hue GU10 Triple Pack op robbshop.nl (mei 2026)
Open PDP →
04 · LAYOUT CATALOG26 varianten · alle uit demo-3

Gravity demo-3 layout catalog

Alle 26 officiële layout-varianten die Gravity demo-3 aanbiedt: 6 PLP-templates (Standard / Big image / Minimal / Shopping Experiences / With- en Without sidebar) · 15 PDP-templates (5 buy-box content + 2 sidebar + 3 gallery + 3D + Video + 3 extra-functionaliteit) · 5 Shop-pagina's. ROBBshop's huidige keuzes (with-sidebar PLP, SW10040 PDP) zijn in oranje gemarkeerd. Schematische thumbnails — klik elk voor de live Gravity-demo.
Voor: "kan dat ook?" vragen over page templates
Open layout catalog →
05 · FEATURES CATALOG31 capabilities · uit demo-3 Features menu

Gravity demo-3 features catalog

De andere dimensie naast page-layouts: 31 named features uit het Features-menu van demo-3. Header-config (transparent header, video bg, overlaying), Shopping Experiences editor-blokken (Code, Divider, Grid blocks, Search banner, Layout blocks), product micro-features (Cover switch, Product actions), en 6 cross-theme features (alleen op Horizon/Atmos/Sphere).
Voor: "kan dat ook?" vragen over capabilities — micro-blokken, theme-toggles, gedrag
Open features catalog →
06 · OPTIMAL HOMEPAGEGravity vol benut

Optimal homepage — upgrade-path

Wat de homepage kan worden als Gravity demo-3 vol benut wordt: hero met video-bg (F-HF-2), transparant overlaying header (F-HF-3/5), search banner (F-SE-4), Keuzehulp 4-grid above-the-fold (F3), product cards met cover-switch + quick-actions (F-P-1, F-P-2), asymmetric image-grid (M1), Features element (F-SE-5), video-playlist (M6), USP-stack + topseller layout, Trustpilot widget via Code element (F-SE-6), AVG-conform newsletter.
Voor: de fase-2 upgrade-discussie — "begin met variant 01, evolueer naar 06"
Open optimal homepage →
07 · OPTIMAL PLPL-PLP-4 + F-SE-1/5/7

Optimal category PLP

Wat de PLP kan worden: L-PLP-4 big-image hero met stats-bar bovenaan, F-SE-1 inspiration slider ("Welke GU10 past bij jou?"), filter-sidebar met collapsible groups, product grid met F-P-1 cover-switch + F-P-2 quick-actions + color-swatches, mid-grid M2 marketing card, F-SE-7 dividers, F-SE-5 brand-authority Features element, M4 SEO content, M7 FAQ accordion, T4 Trustpilot snippet.
Voor: upgrade-discussie — toont wat productrijke categorieën kunnen worden
Open optimal PLP →
08 · OPTIMAL PDPL-PDP-2 + L-PDP-13/14/15

Optimal product PDP

Wat de PDP kan worden: L-PDP-2 SW10042 layout met manufacturer logo in buy-box, L-PDP-13 product features bullet list onder prijs, F-P-1 gallery cover-switch via color swatches, "Werkt met" compatibility row (Apple/Google/Alexa/Homey/Matter/SmartThings), F-SE-5 brand-authority Features element, L-PDP-14 6 custom tabs, L-PDP-15 downloadable docs, M6 video tab, F-SE-6 Code element Trustpilot widget, F-P-1+F-P-2 op cross-sell cards, F2 bottom cta-banner.
Voor: upgrade-discussie — toont premium PDP met uitgebreide spec-content
Open optimal PDP →
09 · PURE GRAVITY HOMEzero custom dev

Pure-Gravity homepage

100% admin-configureerbaar. Alleen Theme-Configuration + Shopping Experiences editor. Géén Twig overrides, géén mini-plugins. Behoudt: hero video bg (F-HF-2), search banner (F-SE-4), Features element (F-SE-5), Code element Trustpilot (F-SE-6). Vervangen: F3 Keuzehulp 4-grid → F2 CTA banner naar /keuzehulp pagina (waar Tally iframe via Code element). Verwijderd: eco-tag chips, 3-staat stock-dot, custom mascotte. Native productkaart.
Voor: "wat krijgen we als we 0 dev-budget besteden?" — minimale viabel pad zonder Strix-werk
Open pure-Gravity home →
10 · PURE GRAVITY PLPzero custom dev

Pure-Gravity category PLP

L-PLP-1 with-sidebar layout (native default). Behoudt: F-SE-1 image-text slider (inspiratie), filter-sidebar, M4 SEO + M7 FAQ + T4 Trustpilot. Verwijderd: sub-categorie pill-row (custom), mid-grid M2 banner (zou L-PLP-6 of Twig vereisen), eco-tag chips, 3-staat stock-dot, F-P-1/F-P-2 visualisatie. Native productkaart met binary stock-indicator.
Voor: baseline PLP zonder enige dev-investering
Open pure-Gravity PLP →
11 · PURE GRAVITY PDPzero custom dev

Pure-Gravity product PDP

L-PDP-2 SW10042 layout (manufacturer logo in buy-box, native config-keuze). Native gallery + buy-box. Property-display als platte tekst ("Werkt met: Apple Home, Google Home, Alexa") ipv styled badges. PD2 4 standaard tabs (Beschrijving / Specs / Reviews / Handleiding). F-SE-5 Features element + F-SE-6 Code element Trustpilot. Verwijderd: eco-tag chips, 3-staat stock-dot, "Werkt met" styled badges, L-PDP-13 features bullet list, L-PDP-14/15 extra tabs.
Voor: baseline PDP — representeert wat zonder enige dev klaar staat na go-live
Open pure-Gravity PDP →
12 · KEUZEHULPTally iframe via Code element

Keuzehulp wizard pagina

Landingspagina voor de Keuzehulp — bestemming voor de "Doe de keuzehulp" CTAs op de homepage. Pure-Gravity: het multi-step wizard-blok is een Tally-formulier ge-embed via F-SE-6 Code element. Hero met intro, gestylede wizard-frame (toont vraag 1 van 4 met 6 antwoord-opties + progress bar), preview van alle 4 vragen, alternative contact-methoden (live chat / bel / showroom), implementatie-noot voor ROBBshop's PM. Zero Strix-dev — ROBBshop's PM beheert vragen + uitkomsten direct in Tally-dashboard.
Voor: ROBBshop's primary differentiator — slim configureerbaar zonder development-traject
Open keuzehulp →

Voorgestelde leesvolgorde voor klantbespreking

  1. Homepage eerst — laat zien dat de structuur identiek blijft. "Dit is jullie site, in nieuwe huid." (5 min)
  2. Dan Category PLP — toon dat filter-sidebar, eco-tags en sortering allemaal native werken in Gravity. (3 min)
  3. Dan Product PDP — toon dat de huidige PDP-structuur (specs flat onder het scherm, alternatieven, gecombineerde producten) één-op-één terugkomt. (5 min)
  4. Houd layout catalog + features catalog bij de hand voor "kan dat ook…?" vragen. Layout = welke pagina-template kies je per categorie/product (26 varianten). Features = welke micro-blokken / theme-toggles / gedrag zet je aan (31 capabilities). Samen dekken ze ~95% van de "kan dat ook?" vraagstellingen. (~5-10 min als demo, of naslag tijdens Q&A)
  5. Sluit af met de component library als naslag-document — geen vereiste lezing voor de eerste klantbespreking. (5 min als rondrit, of na akkoord)
  6. Optioneel — voor de fase-2 / upgrade-discussie: open de drie optimal varianten (06 home · 07 PLP · 08 PDP) aan het einde van het gesprek of in een vervolgsessie. Tonen wat ROBBshop's site kan worden als Gravity vol benut wordt — niet als verplichting maar als roadmap-aanknopingspunt. (10-15 min als demo)
  7. Voor budget/scope-discussie: de pure-Gravity trio (09 home · 10 PLP · 11 PDP) toont de baseline-versie waar 0 dev-uren aan besteed worden — alleen admin-config. Handig om met klant af te bakenen: "dit krijg je gratis bij de migratie, dit is wat dev-budget oplevert." (5-10 min als referentie)
🔭 Bonus reference (niet voor de eerste klantbespreking): de aspirational homepage toont wat hetzelfde Gravity-systeem kan als ROBBshop later wil uitbreiden — Keuzehulp 4-grid, asymmetric image-grid, video embed, USP-stack + topseller layout. Pas relevant na akkoord op de huidige scope.