Shopify vergelijkingstabel layout: grid, kaarten of spotlight

Mini, Pro en Max staan in de modal. De rijen kloppen: gewicht, prijs, accu. Toch oogt het als een spreadsheet uit 2014, of juist als losse kaarten waar niemand de derde kolom vindt. Dat is geen Structure-fout. Shopify vergelijkingstabel layout is de Design-stap: grid, cards of spotlight. Die keuze kleurt hoe de vergelijking eruitziet. Ze verandert niet welke producten de shopper in de tray heeft.

OO - Advanced Table Builder (docs zeggen soms nog Tables, Specs & Comparisons) zet dat in Comparison table: layouts zoals grid, cards of spotlight, plus styling van modal, tray en de Add to compare-knop. Listing 5 nov 2026: Free, 5.0 uit 1 review.

Eerder: tray en modal en de knop op de productpagina. Gisteren: importeren en exporteren. Dit stuk blijft bij Design. Pitch geen andere app.

Design is geen tweede catalogus

Shopify zelf heeft geen runtime die Mini + Pro vasthoudt tot een overlay opent. Collectiekaarten en search bestaan. Een live vergelijking met attribuutrijen niet. Jij definieert de rijen in Structure (Weight, Price, options, custom attributes). De storefront vult cellen uit elk geselecteerd product. Placeholder-labels “Product 1 / Product 2” zijn alleen admin-preview.

Docs zijn stellig: geen per-product celwaarden hardcoden voor live rijen. Design knutselt daar niet aan. Grid of spotlight: dezelfde metafields, dezelfde shopper-selectie.

Design settings overview per type:

• Size charts — popup vs plain, trigger, kleuren

• Product Specs — details panel, classic, cards, …

• Comparison — grid/cards/spotlight, modal & tray, Add-knop

• Tabbed — tabstijl

• Us vs Them — highlight-templates

Specs-templates zijn geen vergelijkingslayouts. Us vs Them is een ander type (jij vs “de rest”, geen live picker). Gooi Comparison niet om naar Us vs Them omdat spotlight “winnender” oogt.

Add to compare en de tray blijven via het theme-block of de app embed. Auto-inject onder de prijs als het Compare-block ontbreekt: Comparison placement. Specs hebben geen inject naast Add to cart.

Wat shops in Design zoeken tot ze Structure openen

Layout wijzigen in de hoop dat Mini vanzelf in de modal staat

De shopper kiest producten. Jij kiest hoe de modal die kolommen tekent. Spotlight maakt van een lege tray geen gevulde tray. Zonder embed is er geen tray, ongeacht grid of cards.

Cellen in Design vullen “zodat Pro er mooier in staat”

Hardcoden hoort niet bij live rijen. Zet Weight/Price als Shopify-modules in Structure. Design: kleuren, fonts, spacing, chrome. Refine with AI op Design merget alleen design-overrides nadat jij bevestigt — description, screenshot of URL voor merkkleuren. Type blijft locked.

Size-chart-popup-styling op een vergelijking zetten

Popup versus plain is size chart. Comparison heeft modal en tray. Verwissel de chrome niet. Een screenshot van een maattabel als Design-referentie voor Comparison levert verkeerde chrome op.

De knop in Design stylen terwijl hij niet in de DOM zit

Add to compare button appearance bestaat. Eerst block of auto-inject, embed aan. Daarna de knop kleuren. Een onzichtbare knop in mint helpt niemand.

Geen van die routes vervangt: Structure-rijen die uit live producten komen, embed voor tray/modal, Design alleen voor look.

Drie layouts, één selectie

Docs noemen grid, cards of spotlight. Geen extra layout verzinnen. Kies in Design, bekijk de preview, publiceer niet drie tabellen van hetzelfde type om drie looks te testen — één tabel, layout wisselen.

Praktisch, zonder de UI te verzinnen:

• Grid als je veel attribuutrijen hebt en shoppers kolommen naast elkaar moeten scannen (gewicht, wattage, garantie).

• Cards als de lijn kort is en elke SKU als blok mag staan, minder als spreadsheet.

• Spotlight als één product de aandacht mag trekken in de modal — nog steeds dezelfde live rijen, geen Us vs Them.

De shopper op Mini vinkt Pro aan. De tray onthoudt dat. De modal opent in de layout die jij zette. Wissel je van grid naar cards, dan blijven Mini en Pro geselecteerd. Alleen de tekening verandert.

Kleuren en fonts: Design, of Refine with AI met een merksite-URL. Structure blijft. Listing: visuele builder zonder code, AI-draft van beschrijving of screenshot, metafields, vertalen per locale.

Praktijk: drie e-bikes, één Design-switch

Shop “Ritme Fietsen” vergelijkt City, Tour, Cargo. Structure: Price, Weight, accu (variant metafield), opties. Embed aan. Compare-block op Default product, Show on product cards aan.

Eerste publicatie: grid. Op desktop prima. Op mobiel klaagden dealers dat de derde kolom een spreadsheet werd. Geen nieuwe tabel. Design → cards. Zelfde rijen,zelfde metafields. Tray ongewijzigd.

Tweede klacht: City verdween “na de layout-wissel”. City stond op Draft. Layout verwijdert geen SKU’s. Status wel — het product is geen live bron meer voor de cel. Zet City Active, cards of grid maakt niet uit.

Spotlight probeerden ze voor “Tour is onze held”. Dat is chrome in de vergelijkingsmodal, geen Us vs Them-kolom tegen een denkbeeldige concurrent. Voor die boodschap is het andere tabeltype.

Test: twee producten in de tray, modal open, layout wisselen, opnieuw openen. Als de selectie weg is, is de embed of de runtime het probleem, niet Design.

Aan de slag

Installeer OO - Advanced Table Builder. Free.

1. Tabeltype Comparison. Structure: modules, geen hardcoded cellen.

2. Theme: app embed aan. Compare-block of auto-inject onder de prijs.

3. Design: kies grid, cards of spotlight. Style modal, tray, knop.

4. Optioneel Refine with AI op Design (beschrijving, screenshot, URL). Bevestigen.

5. Enable de tabel. Test op productpagina én collectiekaart als je die zet.

Settings: visibility / productregels. Vertalingen van knoptekst en empty-state per locale. Import/export als je de structuur wilt backuppen — dat is gisteren, niet Design.

Tot slot

Shopify vergelijkingstabel layout is Design: grid, cards of spotlight, plus modal, tray en knop. Niet de catalogus. Niet welke SKU’s de shopper kiest. Structure vult rijen uit live producten. De embed draait tray en modal. Specs injecteren niet naast Add to cart.

Kies de layout in OO - Advanced Table Builder nádat Mini en Pro überhaupt in de tray kunnen. Eerst de runtime, dan de look.