Shopify product comparison table: Add to compare, tray en modal

Twee koffiemachines, drie matrassen, vier speakers: de shopper wil kolommen, geen vijf tabbladen. Een Shopify product comparison table is die side-by-side-weergave — Add to compare, een tray met de selectie, een modal met de rijen. Native Shopify geeft je collectiekaarten en een zoekbalk. Ze geeft je geen vergelijkingsraster dat metafields live houdt.

Dit artikel legt uit waarom een HTML-tabel in een page “Vergelijk” achterloopt, hoe OO - Advanced Table Builder Comparison als eigen type bouwt, en hoe plaatsing werkt: Compare button-block of inject onder de prijs. Listing-naam: OO - Advanced Table Builder. Docs zeggen soms nog Tables, Specs & Comparisons. CTA blijft die listing-URL.

We schreven eerder de product specificaties tabel. Specs = het huidige product. Comparison = meerdere producten naast elkaar. Mix die types niet.

Shopify heeft kaarten, geen vergelijkingsgrid

Collecties tonen producten. Search filtert. Wat ontbreekt: de shopper kiest A en B, opent een tabel, ziet gewicht, wattage, prijs, voorraad-status in kolommen. Wat shops wél hebben:

• een page “Vergelijk onze lijn” met een screenshot;

• metafields die nergens naast elkaar renderen;

• thema-secties die bij een theme-switch verdwijnen.

Theme app blocks lossen de *plek* op. Iemand moet het vergelijkingstype nog bouwen, visibility zetten, en de tray laten draaien.

Wat merchants nu proberen

Eén lange beschrijving per product. De shopper opent drie tabs. Niets staat naast elkaar.

CSV in een page. Veroudert zodra een wattage wijzigt. Geen Add to compare, geen tray.

Us vs Them als “wij versus de markt”. Dat is een ander type in dezelfde app (feature-rijen yes/no/text). Geen live multi-product picker. Concurrenten bij naam afkraken hoort nergens — ook niet in Us vs Them.

Liquid dat twee `all_products` naast elkaar print. Breekt bij theme-update. Geen AI-draft, geen vertalingen per locale.

Geen van die routes is: type Comparison, Add to compare, tray/modal via de app embed, metafields die meelopen.

Hoe Comparison in de app zit

OO - Advanced Table Builder is Free (0 reviews, gelanceerd 17 september 2026). UI Engels. Works with: AI, Excel, Google Sheets.

Listing: size charts, specs, comparison tables, tabbed content, Us vs Them. Visuele builder of AI-draft van beschrijving of screenshot. Product- en variant-metafields koppelen zodat waarden actueel blijven. Stylen, plaatsen op producten en pages, klantgerichte tekst vertalen. Categorieën op de listing: comparison table, multi-product, highlight differences, show and hide.

Dit artikel is het Comparison-pad. Size charts hebben auto-placement boven Add to cart. Specs gebruiken alleen het Product specs-block — geen ATC-auto-inject. Claim dat niet. Tabbed en Us vs Them altijd via hun block (specifiek table-ID) of shortcode.

Builder: rijen die van productdata komen

Structure: vergelijkingsrijen (prijs, gewicht, een metafield, een custom attribute). Na een AI-draft: moduletypes nalopen zodat Weight/Price/opties Shopify-modules zijn, geen vastgetypte custom attributes. AI is een draft, geen garantie op perfecte mapping.

Design: kleuren, fonts, templates, highlight differences waar de listing dat noemt. Settings: enable, visibility / productregels — welke producten in de vergelijking mogen. Translations: triggers, empty-state, kolomlabels per locale.

Plaatsing: block, inject, tray

Place tables with theme blocks: Customize → template (product, collection, page) → Add block → Apps → Compare button — “optional manual Compare placement”. Op een collectie zet je hem op product cards als je daar Add to compare wilt.

Auto-placement rules voor Comparison:

• Ontbreekt het Compare button-block, dan kan elke comparison table opt-in om Add to compare onder de prijs te injecteren (Settings → comparison placement).

• Tray en modal komen nog steeds uit de app embed. Zonder embed geen runtime.

Enable the app embed: Theme settings → App embeds → Tables, Specs & Comparisons. Theme blocks alleen zijn niet genoeg voor tray/modal, Compare-inject of Size chart-auto-placement.

Shortcodes zijn optioneel: `[oo-table id=YOUR_TABLE_ID]`, embed aan, tabel enabled. Voor de standaard PDP zijn Compare-block of de prijs-inject onderhoudsvriendelijker.

Voorbeeld: drie espresso-machines

SKU’s: Mini, Pro, Max. Metafields: reservoir (cl), boiler, gewicht. Shopper op de collectie “Espresso” wil Mini vs Pro.

1. Installeer vanaf de listing. Create table → Comparison. Of AI: “compare espresso machines on reservoir, boiler, weight, price” plus een screenshot van de oude page (PNG/JPEG/WebP/GIF, max 4 MB).

2. Structure: Shopify-modules voor price/weight, metafields voor reservoir en boiler. Review de AI-mapping.

3. Visibility: de drie machines (of de collectie). Enable.

4. Embed aan. Op Default product: geen Compare-block als je de inject onder de prijs wilt — zet in Settings comparison placement de opt-in aan. Of wél het Compare-block naast de prijs als je de plek zelf wilt.

5. Op de collectie-template: Compare-block op de kaarten, zodat Add to compare daar al kan.

6. Test: Mini + Pro in de tray, modal opent, kolommen kloppen, locale DE toont vertaalde labels. Specs van Mini blijven een apart Specs-block — die tabel injecteert niet naast Add to cart.

Wat je nodig hebt om te starten

1. Installeer OO - Advanced Table Builder (Free).

2. Comparison-tabel: Structure (Shopify-modules + metafields) → Design → Enable en visibility.

3. App embed aan. Compare-block waar je de knop wilt, of inject onder de prijs als het block ontbreekt.

4. Tray/modal op de storefront testen met twee producten. Tab open is geen issue hier — dit is geen CSV-job.

5. Size charts en Specs als eigen types laten staan. Specs: theme block, geen ATC-auto-inject.

Geen andere OO-app in deze post. Geen concurrent-listings.

Tot slot

Een Shopify product comparison table is geen screenshot in het menu. Het is Add to compare, een tray, een modal, rijen die aan productdata hangen. Native Shopify stopt bij kaarten. OO - Advanced Table Builder zet het vergelijkingstype live — met embed voor de tray, en een Compare-block of een inject onder de prijs.

Zet Mini en Pro naast elkaar vóór de shopper vijf tabs opent.