Shopify-vergelijker: tray en modal, niet een statische tabel

De shopper zet City op de tray, opent Tour, vinkt die aan, en wil nú kolommen zien — niet een bookmark “Vergelijk onze lijn”. Wie een Shopify productvergelijker tray modal zoekt, zoekt die twee lagen: een balk die de selectie onthoudt, en een overlay met rijen die uit de producten komen.

Native Shopify heeft collectiekaarten en search. Geen runtime die Mini + Pro vasthoudt tot de modal opent. OO - Advanced Table Builder bouwt het vergelijkingstype; de app embed draait tray en modal. Theme-blocks alleen zijn niet genoeg.

Het type zelf (attributen, metafields) staat in Shopify product comparison table. De productpagina is knop versus inject. De collectiekaart is waar Add to compare begint. Hier blijft de chrome: tray + modal.

Zonder embed is de knop een dode link

Enable the app embed: Theme settings → App embeds → Tables, Specs & Comparisons. Die embed voedt shortcodes, de vergelijkings-runtime, auto-inject onder de prijs, en size-chart-plaatsing boven Add to cart als er geen Size chart-block is.

Zet je alleen een Compare button-block neer en laat de embed uit, dan is er geen tray. Geen modal. De shopper klikt in het niets. Docs: theme-blocks alleen volstaan niet voor tray/modal.

Auto-placement voor Comparison: ontbreekt het Compare-block, dan kan elke vergelijkingstabel kiezen om Add to compare onder de prijs te injecteren (Settings → comparison placement). Tray en modal komen alsnog van de embed. Specs hebben geen ATC-inject; die vragen het Product specs-block. Tabbed en Us vs Them: altijd de specifieke tabel in het block kiezen.

Wat shops nu tonen tot niemand twee SKU’s bij elkaar krijgt

Een page “Onze lijn” met vijf screenshots

Statisch. Wattage wijzigt, de PNG niet. Geen tray. De shopper opent vijf tabs.

Metafield “vergelijk met” als platte tekst

Leesbaar. Niet klikbaar. Geen live kolom voor het tweede product.

Us vs Them als “vergelijker”

Dat type heeft vaste kolommen (wij / zij). Shoppers kiezen daar geen twee SKU’s. De comparison-tray hoort daar uit.

Geen van die routes: Add to compare → tray vult → modal met live cellen.

Design: tray en modal zijn chrome, geen tweede tabel

In Comparison table definieer je attribuutrijen (Weight, Price, options, custom attributes). Groepeer onder koppen als het helpt. Placeholderkolommen “Product 1 / Product 2” zijn alleen admin-preview. De storefront vult cellen uit elk gekozen product. Hardcode geen wattage per cel voor live rijen.

Design voor Comparison:

• Layouts: grid, cards of spotlight

• Modal- en tray-styling

• Uiterlijk van de Add to compare-knop

Chrome (popup, tray, tabs) zit in Design, niet in een extra app. Refine with AI op Design mag: beschrijving, screenshot of website-URL voor merkkleuren/fonts. Structure blijft tot je bevestigt. Type blijft Comparison.

Klantgerichte strings — triggertekst, lege staat, labels — vertaal je per locale in Settings. Zonder DE-vertaling ziet de Duitse shopper EN-chrome in een verder Duitse checkout.

OO - Advanced Table Builder is Free (5.0, 1 review). Listing: size charts, specs, comparison tables, AI, visuele builder, fully translatable. Werkt met Excel / Google Sheets / AI. Geen Premium-tier. Docs zeggen soms nog Tables, Specs & Comparisons; de CTA blijft deze listing.

Voorbeeld: drie e-bikes, tray onderaan, modal met koppel en bereik

Producten City, Tour, Cargo. Comparison-tabel “E-bikes”: rijen Gewicht, Prijs, actieradius (metafield), motor (optie). Geen cel met “Tour = 85 km” hard gezet.

App embed aan. Op de producttemplate: Compare-block óf inject onder de prijs. Op de collectie: Compare-block op de kaarten, zodat Add to compare daar al start.

Test: City toevoegen. Tray verschijnt. Tour toevoegen. Modal openen. Twee kolommen, live waarden. Wissel naar locale DE: vertaalde labels. Cargo als derde. Geen Specs-tabel naast Add to cart verwachten — die blijft een apart block.

Zichtbaarheid in Settings: alleen de e-bike-producten. Een regenjas in dezelfde collectie hoort niet in deze tray.

De lege tray is geen fout. Zonder selectie toont de chrome een empty-state — die string vertaal je mee. Op mobiel blijft de tray onderaan; de modal krijgt dezelfde rijen, smaller. Test beide viewports. Een knop die op desktop onder de prijs zit, kan op een stacked theme naast de galerij verdwijnen: dan wint het Compare-block op een voorspelbare plek.

Als de modal opent maar cellen leeg zijn: hardcoded admin-preview, of modules die geen Shopify-veld raken. Weight/Price/Color horen Shopify-modules te zijn, geen custom attributes die je na AI vergat na te lopen. Visibility te krap: Tour staat niet in de tabelregels, dus de tray accepteert hem niet. Embed uit na een theme-duplicate: de knop overleeft, de runtime niet.

Aan de slag met de runtime, niet met een PNG

1. Installeer de app. Free, 5.0 (1).

2. Nieuw tabeltype Comparison. Attribuutmodules, geen hardcoded cellen. Enable + visibility.

3. Design: layout + tray/modal + knop. Eventueel Refine with AI op Design.

4. Theme settings → App embeds → Tables, Specs & Comparisons. Save.

5. Compare-block en/of inject onder de prijs. Collectiekaarten als je daar wilt beginnen.

6. Storefront: twee producten in de tray, modal, locale-check. Embed uit = stoptest: tray weg.

Shortcode `[oo-table id=…]` kan op een page, met embed aan en tabel enabled. De runtime blijft dezelfde tray/modal.

Tot slot

Een Shopify productvergelijker tray modal is geen screenshot in het menu. Het is Add to compare, een tray die de selectie vasthoudt, en een modal met rijen die de producten vullen. Native Shopify stopt bij kaarten. De app embed is de runtime; het Compare-block of de inject is alleen de knop.

Zet embed + comparison-type live in OO - Advanced Table Builder. Daarna vergelijkt de shopper twee SKU’s in één overlay, niet in vijf tabs.