Tip
★★★★★(312)
Philips Hue White Ambiance GU10 Triple Pack
ZigbeeMatter
€ 67,95 € 80,99
Op voorraad Morgen
ROBBshop component library
De ~30 herbruikbare blokken waaruit elke ROBBshop pagina is opgebouwd. Configureerbaar via Shopware admin (kleuren, content, layout-keuze) — geen code per pagina nodig. Component-IDs (H1, C1, P1, …) zijn 1:1 dezelfde IDs als in het page-component-matrix document.
01
Tokens
Design-variabelen die elke pagina overerft van theme.json
TOK-1 · COLOR
Kleurpalet ROBBshop
8 brand-kleuren + 4 semantische statuskleuren. Aangestuurd via theme-tokens.json en gepusht via Shopware Admin API.
Gebruikt op: élke pagina
(gedefinieerd in
(gedefinieerd in
:root)
Brand
Semantic
Orange
#FF8C00Orange dark
#E67E00Orange soft
#FFF4E6Slate
#4A545BMuted
#828282Line
#EEEEEEBg soft
#F8F8F8Yellow accent
#FEDC70Success
#3CC261Warning
#F39C12Danger / Sale
#E84130Info / Tip
#1FBA8C
TOK-2 · TYPOGRAPHY
Typografische schaal — Mulish
Mulish 400 / 600 / 800. Headlines altijd 800 (bold-extra), body 400, accents 600.
Gebruikt op: élke pagina
display · 46/800We ❤ Smart
h1 · 30/800Slimme GU10 lampen
h2 · 24/800Tips van Robb
h3 · 18/800Smart Home Categorieën
h4 · 15/800Klantenservice
body · 14/400Slimme GU10 lampen zijn de eenvoudigste manier om bestaande spots slim te maken.
small · 12/600Voor 16:00 besteld = morgen in huis
eyebrow · 11/800 · CAPSLimited release
TOK-3 · SHAPE
Radii & schaduwen
Default radius 6px, pills 999px, shadows op 3 niveaus voor subtle depth.
Gebruikt op: kaarten, knoppen, panels
6px
pill
shadow-sm
shadow
shadow-lg
02
Atoms
De kleinste herbruikbare UI-onderdelen
A-1 · BUTTON
Buttons (.btn-pill family)
Pill-vorm conform Gravity demo-3. Primary = oranje, secondary = outline, ghost = subtle, dark = slate, disabled = .45 alpha.
Gebruikt op: Home, PLP, PDP — overal waar een CTA nodig is
A-2 · INPUT
Inputs & selects
Standaard form-velden. Focus-ring is oranje.
Gebruikt op: Search bar, Newsletter, Filter sidebar, Checkout
A-3 · PILL FILTER
Filter pills
Sub-categorie quick-filters bovenaan een PLP. Outlined oranje, gevuld bij active state. Atom toegevoegd op basis van de live PLP — niet in standaard Gravity demo-3 inventory.
Gebruikt op: PLP (boven product-grid)
A-4 · BADGE
Badges
Status-labels op product-cards en in headers. Discount = rood, Tip = groen, New = oranje, Outline = neutraal.
Gebruikt op: Product cards (overal), Top-utility bar, PDP gallery
−16%
Tip van Robb
Nieuw
Bestseller
Limited
A-5 · ECO-TAG
Eco-tag chips
Smart-home protocollen als chips op productkaart en in PDP buy-box. Eigen kleurcodering per protocol — kritiek conversion-element in deze categorie.
Gebruikt op: Product card (overal), PDP buy-box
Zigbee
Matter
Thread
HomeKit
WiFi
Z-Wave
Generiek
A-6 · STAR RATING
Sterren-rating
5-star rating in geel (#FCB72D) op product-cards; groene Trustpilot-versie (#00B67A) in de review snippet.
Gebruikt op: Product card, PDP buy-box, T4 review snippet
★★★★★
★★★★★
★★★★★
★★★★★ Trustpilot
A-7 · STOCK DOT
Voorraad-indicator
3-staat dot: groen (op voorraad), oranje (laag), grijs (uitverkocht). Met halo-glow voor de actieve states.
Gebruikt op: Product card, PDP buy-box
Op voorraad
Nog 2 op voorraad
Uitverkocht
A-8 · PRICE
Prijsweergave
Standaard, sale (rood + doorgestreepte vorige prijs), grote variant voor PDP buy-box.
Gebruikt op: Product card, PDP buy-box, CTA banner
€ 49,99
€ 41,95 € 49,99
€ 67,95 € 80,99
A-9 · BREADCRUMB
Breadcrumb crumb
Navigatiepad onder de hoofdnav op PLP en PDP. Laatste niveau is altijd .current (slate, geen link).
Gebruikt op: PLP, PDP
03
Molecules
Combinaties van atoms tot bouwbare componenten
M-1 · SEARCH BAR
Mega search met categorie-dropdown
Pill-bar met categorie-keuze links, search-input, en zoek-icon-knop rechts. Hoogte 48px, max-width 680px.
Gebruikt op: Header (élke pagina)
M-2 · PRODUCT CARD
Product card (.pcard)
3 varianten: default (rating + eco-tags + stock-line — voor sliders), minimal (geen rating, prominent ATC button — voor PLP grid), out-of-stock (grijze stock-dot, "Op verlanglijst" CTA).
Gebruikt op: Home P1 sliders, PLP grid, PDP cross-sells
Default (slider)
Minimal (PLP grid)
−16%
Out of stock
★★★★★(48)
Reolink P750 Outdoor 5K Camera
€ 219,00
Uitverkocht Verwacht 14 jun
M-3 · NEWSLETTER INPUT
Newsletter pill input
Pill-vormig e-mail input met circulaire submit-knop rechts. Gebruikt op alle pagina's (pre-footer).
Gebruikt op: Home, PLP, PDP (als F1)
M-4 · FILTER GROUP
Filter group (sidebar)
Heading + collapsible checkbox-lijst met counts, of price-range slider. Onderdeel van de PLP filter-sidebar.
Gebruikt op: PLP filter sidebar
Merk
Prijs
—
M-5 · PAGINATION
Pagination
Standaard pagineer-component voor PLP en zoekresultaten.
Gebruikt op: PLP onderaan grid
M-6 · ACCORDION ITEM
Accordion / FAQ item
Native <details> element voor FAQ-secties. Open-state markeert met oranje + → −.
Gebruikt op: M7 accordion (FAQ-secties)
Werken deze GU10 lampen zonder Hue Bridge?
Ja, via Bluetooth tot 10 lampen. Voor automatisering, scènes en koppeling met Apple Home of Google Home heb je wel een Hue Bridge of een Matter-hub nodig.
Hoe werkt Matter in combinatie met deze spots?
Met de Hue Bridge zijn deze spots Matter-bridged — je kan ze toevoegen aan elke Matter-controller (Apple Home, Google Home, SmartThings).
M-7 · USP ITEM
USP item
Icoon-cirkel + heading + body. Gebruikt in T1 stack (verticaal) en T2 row (horizontaal).
Gebruikt op: Trust-strips, USP sidebars
Voor 16:00 = morgen
Verzending door PostNL of DHL
30 dagen retour
Niet goed = geld terug
Showroom Oss
Op afspraak openbare middagen
04
Organisms · Header chrome
Top-utility, mega-header, main-nav — gedeeld door élke pagina
H1 · UTILITY BAR
Top utility row (oranje gradient)
3-kolomraster: links links/reviews, midden marketing-pill, rechts taal/valuta.
Gebruikt op: Élke pagina
H2 · H3 · H4 · MEGA HEADER
Logo · Search · Tools
Header met links het ROBBshop logo, midden de mega search bar (M-1), rechts wishlist + account + cart-tool met live total.
Gebruikt op: Élke pagina
H5 · MAIN NAV
Main navigation
Horizontale navigatie met onderstreep voor active state. Categories beheerd via Shopware admin.
Gebruikt op: Élke pagina
05
Organisms · Content blocks
De composeerbare blokken in Shopware Shopping Experiences
C1 · IMAGE-COVER (HERO)
Hero banner
Full-bleed hero met eyebrow + headline + body + CTA's. Gradient achtergrond met radial glow.
Gebruikt op: Home (boven), PLP compact, brand-pages
💡
C4 · VERTICAL CATEGORIES
Sidebar category list
Verticale lijst van top-categorieën met icoon + naam. Niet op live home; aanwezig in aspirational layout.
Gebruikt op: Optioneel — niet op live home
C5 · MARKETING-CARD-SMALL
Side marketing card
Compacte promotie-kaart: eyebrow + heading + body + CTA. Gebruikt naast hero of als sidebar-tegel.
Gebruikt op: Home hero (rechts), Sidebar fillers
P1 · PRODUCT SLIDER
Product carousel (4 of 5 cols)
Carousel met productkaarten. Bron: nieuw / topseller / handmatige set / categorie. Pijlen .prev/.next aan zijkanten.
Gebruikt op: Home (Tips van Robb, Nieuw), PDP (Alternatieven, Klanten kozen ook voor)
★★★★★(312)
Philips Hue GU10 Triple Pack
€ 67,95
★★★★★(186)
Aqara Hub M3 — Matter, Thread & Zigbee
€ 129,99
★★★★★(98)
Reolink P750 Outdoor 5K
€ 219,00
★★★★★(523)
Nuki Smart Lock 4.0 Pro
€ 279,00 € 349,00
P3 · PRODUCT-LISTING (PLP)
Two-column listing met sidebar filters
Linker filter-sidebar (filter-groups stack) + rechter product grid (4 cols, .pcard.minimal). Mid-grid M2 marketing card insertion.
Gebruikt op: PLP (Slimme Verlichting / GU10 / etc.)
Merk
Lichtkleur
Protocol
Prijs
Volledig voorbeeld: open 02-category-plp.html →
P3 · LAYOUT VARIANTEN
6 PLP-layouts uit Gravity demo-3
Gravity ships 6 officiële PLP-templates. Switchen per categorie via Shopware admin → Catalogues → Categories → "Layout". ROBBshop's huidige PLP matcht With sidebar.
Gebruikt op: Per categorie config
L-PLP-1 · WITH SIDEBAR
With sidebar
Linker filter-sidebar + 4-koloms grid. Default voor productrijke categorieën.
L-PLP-2 · STANDARD
Standard
Gravity default — sidebar + grid, geen mid-grid marketing card.
L-PLP-3 · WITHOUT SIDEBAR
Without sidebar
Geen filter-sidebar — filters bovenaan. Bredere grid (4-5 kolommen).
L-PLP-4 · BIG IMAGE
Big image
Full-width hero-foto bovenaan + sidebar+grid. Voor brand-pages of seasonal landings.
L-PLP-5 · MINIMAL CONTENT
Minimal content
Geen SEO text-block, geen FAQ — pure listing. Voor outlet-, sale- of niche-categorieën.
L-PLP-6 · SHOPPING EXPERIENCES
Shopping Experiences
Volledig CMS-gebouwd — geen automatische listing. Voor curated /collecties/ of /story/ pagina's.
Volledige catalog met klikbare thumbnails: open 04-layout-catalog.html →
P6 · PRODUCT GALLERY
Foto-gallery met thumbs
Hoofdfoto + 4 thumbnails. Active state op gekozen thumb (oranje rand).
Gebruikt op: PDP (linker kolom)
M1 · IMAGE-GRID
Asymmetric image grid
3-tegel of 7-tegel grid voor lifestyle/inspiratie. Tekst-overlay met CTA pill. Niet op live home, beschikbaar voor seasonal campaigns.
Gebruikt op: Optioneel — campagne-pagina's, aspirational
Beveiliging vanaf € 89
#deursloten
Ledstrips
M2 · INLINE MARKETING CARD
Split image+text banner
Image links, copy + CTA rechts. Of vice versa. Mid-page promotie banner.
Gebruikt op: Home, PLP (mid-grid), PDP
Hue starter pack
Begin met 3 GU10 spots + Hue Bridge
Pakket-korting van €25,- — alles wat je nodig hebt om vandaag nog je verlichting te automatiseren.
Bekijk starter pack →💡
M3 · IMAGE-TEXT-ROW
3-4 gelijk-formaat tegels
4 cards naast elkaar. Op live home gebruikt voor "Smart Home Categorieën" (icon + label) en "Smart Home Blogs" (image + meta + heading).
Gebruikt op: Home (categorieën quick-nav, blog teasers), PLP optioneel
Variant: blog-cards
M4 · TEXT BLOCK
SEO content block
Heading + paragraph(s) + bullet list + optionele CTA. Voor PLP-onderkant SEO copy of "over"-pagina's.
Gebruikt op: PLP (onder grid), info-pagina's
Slimme GU10 lampen voor jouw veiligheid en comfort
Slimme GU10 lampen zijn de eenvoudigste manier om bestaande spots in je plafond slim te maken. Vervang je oude halogeen of niet-slimme LED-spot één-op-één.
- Wit licht — basis, dimbaar, instelbare kleurtemperatuur.
- Wit + Kleur (RGB) — alle 16 miljoen kleuren plus alle witten.
- Outdoor (IP65) — waterdichte versies voor de tuin.
M6 · VIDEO EMBED
YouTube/Vimeo embed thumbnail
16:9 thumbnail met play-button + label-strip. Bij click opent video in lightbox/iframe.
Gebruikt op: Home (Tips van Robb video), PDP (productvideo)
▶
Tips van Robb · Hue installatie · 4:32M7 · ACCORDION (FAQ)
FAQ-blok
Stack van <details> items met heading + lijn-afbakening. Native HTML, geen JS.
Gebruikt op: PLP (optioneel), info-pagina's, productspec details
Heb ik een Hue Bridge nodig?
Niet per se — via Bluetooth tot 10 lampen direct te koppelen aan je telefoon. Voor automatisering of meer dan 10 lampen, wel.
Werken deze met Apple Home / Google Home?
Ja — via Hue Bridge native, of via Matter (Bridge) voor de nieuwste setup.
Kan ik meerdere lampen tegelijk dimmen?
Ja, in groepen via de Hue app of via een Hue Dimmer Switch / Tap Dial.
T1 · USP-STACK VERTICAL
Verticale USP-sidebar
Stack van USP items in een sidebar. 4 USPs typisch.
Gebruikt op: Home topseller layout (aspirational), PDP zijbalk
Voor 16:00 = morgen
PostNL, DHL of DPD
30 dagen retour
Geen gedoe — geld terug
10+ jaar ervaring
De smart home experts
Live chat 9-17u
Direct advies van mensen
T2 · USP-ROW HORIZONTAL
Horizontale trust strip
5 USPs naast elkaar in een lichte strip. Gebruikt direct onder buy-box op PDP, en (optioneel) onder hero op home.
Gebruikt op: PDP (onder buy-box), home aspirational
Trustpilot★★★★★4.8
Voor 16:00 = morgen
30 dagen retour
Officiële dealer
T3 · BRAND-LOGO STRIP
"Onze merken" logo-strip
6-8 brand-namen of logo's in een rij, in muted-grey. Op hover: kleur naar slate.
Gebruikt op: Home onderaan, PDP (optioneel)
AqaraApplePhilips HueHomeyFIBAROShelly
T4 · REVIEW SNIPPET
Trustpilot/Kiyoh review snippet
Inline review-summary met badge + stars + count + "Lees reviews" CTA.
Gebruikt op: Footer (optioneel), PDP, hero (footer-trust)
F1 · NEWSLETTER SIGNUP
Newsletter band
3-kolom: logo / copy / pill input form. Pre-footer op élke pagina.
Gebruikt op: Élke pagina (pre-footer)
Meld je aan voor onze nieuwsbriefMaximaal 1× per week — alleen tips & aanbiedingen.
F2 · CTA BANNER LARGE
CTA banner (large, gradient)
Brede oranje-gradient banner met heading + body + CTA. Voor pre-footer of als duplicate-ATC onderaan een lange PDP.
Gebruikt op: PDP (bottom CTA), pre-footer optioneel
F3 · KEUZEHULP 4-GRID
Keuzehulp entry-grid
4 cards die naar de keuzehulp-wizard leiden. Eerste card = featured (slate background). Het enige expliciete maatwerk in scope (~4-8 uur via plugin of iframe).
Gebruikt op: Optioneel home, eigen keuzehulp pagina
❓
Nog geen smart home?
Doe de keuzehulp — wij vertellen je welk ecosysteem past.
💡
Begin met verlichting
Eenvoudig in te stellen, direct effect.
🛡️
Beveiliging eerst
Slimme deursloten, camera's en sensoren.
🔍
Compatibel?
Vertel ons wat je hebt — we tonen wat werkt.
06
Organisms · PDP blocks
Buy-box, tabs, bundle row — Gravity demo-3 PDP layout
PD1 · BUY-BOX (SW10040)
Buy-box (default — gallery + buy-box, no manufacturer logo)
Hoofdvariant zoals op de live ROBBshop PDP. Title + price + variants + qty + ATC + payment-icons + delivery line.
Gebruikt op: PDP (rechter kolom)
📦
Philips Hue White Ambiance GU10 Triple Pack
ZigbeeMatterHomeKit
€ 67,95 € 80,99
In winkelwagen →
Op voorraad — morgen in huis
PD1 · LAYOUT VARIANTEN
15 PDP-layouts uit Gravity demo-3
Gravity ships 15 officiële PDP-templates verdeeld over vijf families: top-region content (5), sidebar (2), gallery-presentatie (3), special media (2), extra functionaliteit (3 — via Features menu). Switchen is een config-keuze in admin, niet code. ROBBshop draait op SW10040.
Gebruikt op: Configureerbaar per product (Catalogues → Product → CMS Page)
Top-region content · 5
L-PDP-1 · SW10040
Default
Gallery + plain buy-box. Title only.
L-PDP-2 · SW10042
+ manufacturer logo (Popular)
Brand-logo bovenin buy-box.
L-PDP-3 · SW10048
+ description in buy-box
Korte beschrijving in buy-box.
L-PDP-4 · SW10064
+ logo + description
Alles in de buy-box: logo, titel, beschrijving, prijs, ATC.
L-PDP-5 · SW10066
Description under gallery
Beschrijving onder gallery, buy-box compact met logo.
Sidebar varianten · 2
L-PDP-6 · SW10041
Without sidebar
Brede gallery + buy-box, geen kant-sidebar.
L-PDP-7 · SW10039
With sidebar
Met linker filter/categorie-sidebar.
Gallery varianten · 3
L-PDP-8 · SW10043
Gallery slider
Eén grote foto + pijl-knoppen om te slideren.
L-PDP-9 · SW10044 (New)
Gallery scroller
Horizontale strip — alle foto's continu scrollbaar.
L-PDP-10 · SW10049 (New)
Gallery grid
Multi-koloms grid — alle foto's in één keer zichtbaar.
Special media · 2
L-PDP-11 · SW10065 (New)
3D product
3D-model viewer in plaats van foto-gallery (Spatial Commerce).
L-PDP-12 · SW10067
Video product
Video als extra "Video"-tab onder PD2 (gallery blijft normaal).
Extra functionaliteit · 3 (via Features menu)
L-PDP-13 · SW10047
Product with features
Specs als bullet-list onder de prijs (boven tabs) + uitgebreide custom tabs.
L-PDP-14 · SW10046
Additional tabs
5-6 custom tabs onder buy-box (vs 4 default). Voor producten met veel context.
PDFDOC
L-PDP-15 · SW10045
Datasheets / Documents
Dedicated "Documents" tab — datasheets, handleidingen, drivers, certificering downloadbaar.
Bron: Layouts hub + Features menu — alle 15 PDP-thumbnails klikbaar naar de live demo. Switchen is config: Shopware admin → Catalogues → Product → "CMS Page" attribuut. Volledige catalog: open 04-layout-catalog.html · Features & capabilities: open 05-features-catalog.html →
PD2 · PRODUCT TABS
Beschrijving / Specificaties / Reviews / Handleiding
Horizontale tab-bar onder buy-box. Specificaties is bij ROBBshop default open (matcht huidige PDP).
Gebruikt op: PDP
EAN: 8719514340107 · Aansluiting: GU10 · Lichtkleur: 2200K – 6500K · Lumen: 350 lm · Vermogen: 4,2W · Protocol: Zigbee 3.0 + BT · Garantie: 2 jaar fabrieksgarantie
PD4 · PRODUCT BUNDLES
"Vaak samen gekocht"
4 product-cards in een rij die de getoonde producten complementeren. Op live PDP = "Gecombineerde producten".
Gebruikt op: PDP
Hue Bridge
€ 59,95
Hue Smart Button
€ 19,95
Hue Tap Dial
€ 49,99
Motion Sensor
€ 39,95
07
Organisms · Shop / CMS pages
5 Gravity demo-3 layouts voor over-ons, contact, nieuwsbrief, content
SHOP · L-SHOP-1 .. L-SHOP-5
5 Shop / CMS pagina layouts
Voor over-ons, contact, nieuwsbrief, en algemene content-pagina's. Configureerbaar per pagina via Shopware admin → Content → CMS Pages.
Gebruikt op: Niet op live ROBBshop nog — beschikbaar voor uitbreiding
L-SHOP-1 · ABOUT-US
About us
Brand-storytelling: hero + foto + tekst + CTA. Voor "Over ROBBshop".
L-SHOP-2 · CONTACT
Contact
Contactformulier + adres + map. Native SW met Gravity-styling.
L-SHOP-3 · NEWSLETTER
Newsletter
Volledige nieuwsbrief-landing met grote signup pill in het midden.
L-SHOP-4 · WITH SIDEBAR
Generic page · with sidebar
Algemene content-pagina met linker navigatie-sidebar. Voor klantenservice-secties.
L-SHOP-5 · WITHOUT SIDEBAR
Generic page · without sidebar
Volle breedte content-pagina. Voor blog-artikelen, juridische pagina's.
Volledige catalog: open 04-layout-catalog.html →
08
Organisms · Footer
De volledige FT1-FT4 footer chrome
FT1 · FT2 · FT3 · FT4 · FOOTER
4-column footer + social + payment + bottom-bar
FT1 = 4 kolommen (Hotline / Klantenservice / Over / Trust). FT2 = social-icon row. FT3 = payment + shipping badges. FT4 = bottom-bar met legal links.
Gebruikt op: Élke pagina
Volgende stap: bekijk de pagina-mockups
Zie hoe deze componenten op de homepage, PLP en PDP gecombineerd worden — 1:1 zoals de huidige robbshop.nl.