Shopify producten vergelijken op collectie: Add to compare op kaarten

De shopper staat op `/collections/espresso` met twaalf kaarten. Mini, Pro, Max. Drie tabs openen, drie productpagina’s, niks naast elkaar. Shopify producten vergelijken op collectie hoort te beginnen op die kaart — Add to compare, tray, daarna de modal — niet pas nádat iemand vijf PDP’s heeft gelezen.

Dit artikel gaat over *waar* de knop landt: op collectie-/productkaarten, of als inject onder de prijs wanneer het Compare-block ontbreekt. Het vergelijkingstype zelf (rijen, metafields, tray) staat in Shopify product comparison table. Hier is de collectie het onderwerp. CTA blijft OO - Advanced Table Builder (docs zeggen soms nog Tables, Specs & Comparisons).

Pitch geen andere Online Origins-app. Specs injecteren niet naast Add to cart. Concurrenten bij naam afkraken hoort nergens.

Het Shopify-probleem: collecties zijn grids, geen vergelijking

Shopify Help Collections is hoe je producten groepeert. Kaarten tonen beeld, titel, prijs. Filters en search smalden de set. Wat ontbreekt: de shopper vinkt Mini en Pro aan *in het grid* en opent één tabel.

Wat shops wél zetten:

• een page “Vergelijk onze lijn” met een screenshot van vorig seizoen;

• “zie specificaties” die drie PDP’s opent;

• een HTML-tabel in de collectiebeschrijving die stilstaat als wattage wijzigt.

Theme app blocks lossen de *plek* op: je kunt een app-block op een collection-template zetten. Iemand moet nog het Comparison-type bouwen, visibility zetten, en de tray laten draaien. Zonder knop op de kaart blijft vergelijken een PDP-taak.

Wat merchants nu proberen

Alleen op de productpagina een knop, collectie laten zoals hij is. De shopper heeft Mini al verlaten voordat Pro in beeld is. Vergelijken begint te laat.

Liquid op de collection-card dat twee `all_products` naast elkaar print. Breekt bij theme-update. Geen tray, geen vertalingen per locale.

Us vs Them op de collectie “wij versus de markt”. Ander type: feature-rijen yes/no/text, gekozen in het block via table-ID. Geen live multi-product picker vanaf kaarten.

Specs-block op de collectie verwachten als Add to compare. Auto-placement rules: Specs gebruiken alleen het Product specs-block. Geen ATC-auto-inject. Claim dat niet.

Geen van die routes is: Comparison enabled, app embed aan, Show on product cards en/of een Compare-block op de collectie-template.

Hoe Add to compare op kaarten werkt

OO - Advanced Table Builder is Free. Listing: 5.0 (1 review). Gelanceerd 17 september 2026. UI Engels. Works with: AI, Excel, Google Sheets. Listing noemt comparison tables, multi-product, highlight differences, place tables on products, pages, or anywhere else.

Dit is het Comparison-pad. Size charts kunnen boven Add to cart als het Size chart-block ontbreekt. Tabbed en Us vs Them altijd via hun block (specifiek table-ID) of shortcode.

Bouw eerst de tabel (Quick start): Create table → type Comparison (of Generate with AI, screenshot max 4 MB). Structure: rijen die van Shopify-modules en metafields komen. Na AI: Weight/Price/opties als Shopify-modules, geen vastgetypte custom attributes. Settings: Enable. Visibility: All products of Selected products only — selected-product rules gelden op product pages; op non-product templates volgt gedrag de block/visibility-helpers in het theme (Enable, visibility, and products). Disabled tables renderen nergens, ook niet op kaarten.

Twee knoppen, twee plekken

Comparison placement options in Settings:

• Auto-inject under price — als je het Compare button-theme block niet gebruikt, plaats Add to compare onder de prijs via de app embed.

• Show on product cards — toon Add to compare ook op collection-/product-card grids where supported.

Altijd de app embed aan zodat tray en comparison-modal werken. Zonder embed geen runtime, ook niet als de knop visueel op de kaart lijkt te staan.

Place tables with theme blocks: blocks op product-, collection-, page- en andere templates. Compare button = “optional manual Compare placement”. Pad: Customize → template (Collections → Default collection, of je card-section) → Add block → Apps → Compare button → Save. Dat is de handmatige knop op de kaart als je de exacte plek wilt, in plaats van (of naast) de Settings-optie Show on product cards.

Auto-placement rules voor Comparison: ontbreekt het Compare-block, dan kan elke comparison table opt-in om Add to compare onder de prijs te injecteren (Settings → comparison placement). Tray/modal blijven van de embed. Dat is de PDP-fallback — niet hetzelfde als kaarten. Kaarten = Show on product cards en/of het Compare-block op de collection-template.

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

Shortcodes `[oo-table id=YOUR_TABLE_ID]` zijn optioneel (embed aan, tabel enabled). Voor een collectiegrid is een card-knop onderhoudsvriendelijker dan een shortcode in de collectiebeschrijving.

“Where supported” betekent: niet elk thema hangt dezelfde card-markup. Test de live collection. Werkt Show on product cards niet op jouw theme, zet het Compare-block op de card-section in de theme editor.

Voorbeeld: collectie Espresso, twaalf kaarten

SKU’s Mini, Pro, Max plus negen accessoires. Shopper wil Mini vs Pro vanaf het grid, niet vanaf drie PDP’s.

1. Installeer vanaf de listing. Comparison-tabel: reservoir, boiler, gewicht, prijs. Shopify-modules voor price/weight; metafields voor de rest. Enable. Visibility: de drie machines (of All products als accessories geen rijen hebben die storen).

2. Embed aan.

3. Settings → comparison placement: Show on product cards aan. Auto-inject under price aan *alleen* als Default product geen Compare-block heeft — anders wint het block op de PDP.

4. Collection-template: als de knop op kaarten ontbreekt, Compare-block in de card-section. Accessoires zonder visibility vallen buiten de vergelijking; de knop hoort daar niet te liegen.

5. Test: Mini + Pro vanaf `/collections/espresso` in de tray, modal opent, kolommen kloppen. Specs van Mini blijven een apart Specs-block op de PDP — die tabel komt niet op de kaart.

Wat je nodig hebt om te starten

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

2. Comparison-tabel: Structure → Design → Enable + visibility.

3. App embed aan. Settings: Show on product cards; Auto-inject under price alleen zonder Compare-block op de PDP.

4. Zo nodig Compare-block op de collection-template / card-section.

5. Storefront: twee producten vanaf de collectie in de tray. Specs en size charts als eigen types laten staan.

Tot slot

Shopify producten vergelijken op collectie is Add to compare op de kaart, met tray en modal uit de embed — niet een screenshot in het menu. Native Shopify stopt bij grids. Zet de knop waar de keuze begint, en laat inject onder de prijs de PDP vullen als het block daar ontbreekt.

Zet Mini en Pro naast elkaar vóór de shopper drie tabs opent, via de Advanced Table Builder-listing.