Shopify vergelijken op collectiekaarten: knop op de kaart, niet alleen op de PDP

Op `/collections/laptops` staan zestien kaarten. De shopper wil Mini naast Pro. Add to compare zit alleen op de productpagina, onder de prijs. Eerst twaalf PDP’s openen, dan pas de tray. Shopify vergelijken op collectiekaarten begint in het grid: dezelfde knop op de kaart, dezelfde tray, dezelfde live rijen.

Auto-placement injecteert Compare onder de prijs als het Compare-block ontbreekt. Dat is een productpagina-vangnet, geen magie op collection-cards. Kaarten zitten in een ander template. Daar zet je het Compare button-block zelf.

We schreven producten vergelijken op collectie al, en de auto-placement-matrix. Hier alleen de kaart: waarom inject onder de prijs de collectie niet redt, en hoe je het block op de collection-template zet. CTA blijft OO - Advanced Table Builder.

Collectiekaarten hebben geen “onder de prijs”

Shopify Help Collections groepeert producten. Een kaart is beeld, titel, prijs, soms een quick-add. De prijs op die kaart is niet dezelfde node als de prijs op Default product. Auto-inject “under the price” mikte op de PDP. Claim niet dat dezelfde schakelaar knoppen op elke collectiekaart zet.

Theme app blocks mogen op collection-templates. Docs: blocks op product, collection, page en andere templates. Compare button = optionele handmatige plaatsing. Zonder dat block op de kaart-sectie blijft vergelijken een PDP-klus.

De tray en modal komen niet uit het block alleen. App embed is verplicht voor tray/modal, Compare auto-inject, size-chart auto-placement en shortcodes. Block zonder embed: knop zonder runtime.

Wat shops doen tot het grid stom blijft

Alleen Settings → comparison placement aan

Op de hoodie verschijnt Add to compare onder de prijs. Op `/collections/hoodies` niets. Geen bug. Verkeerde template.

Liquid in `card-product.liquid`

Een extra knop die twee handles in sessionStorage gooit. Theme-update veegt het. Geen vertalingen per locale, geen Design-stap voor de knop.

Specs-block op de collectie verwachten als Compare

Auto-placement rules: Specs gebruiken het Product specs-block. Geen ATC-auto-inject. Tabbed en Us vs Them altijd een specifiek block of shortcode. Alleen Compare mag onder de prijs, en alleen als het Compare-block ontbreekt — op de plek waar die prijs staat.

Hard-coded cellen “Mini 1,2 kg / Pro 1,4 kg”

Comparison table: geen vaste waarden per product in live rijen. De storefront vult cellen uit elk gekozen product. Placeholder Product 1 / Product 2 is admin-preview.

Kaart = block. PDP = block of inject. Tray = embed.

OO - Advanced Table Builder is Free. 5.0, 1 review. Listing: size charts, specs, compare, tabbed, Us vs Them; AI-draft; metafields; vertalingen; plaatsing op products, pages, anywhere. Docs noemen soms nog Tables, Specs & Comparisons. CTA blijft deze listing.

Stappen voor het grid:

1. Comparison-tabel: attribuutmodules (Weight, Price, options, custom attributes). Groepeer onder koppen als het helpt. Geen per-SKU cellen hardzetten.

2. Visibility: welke producten in de vergelijking mogen.

3. Theme editor → template Collections → Default collection (of de template van díe collectie).

4. In de product-card-sectie: Add block → Apps → Compare button.

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

6. Storefront: twee kaarten aanklikken. Tray moet openen. Modal toont live rijen.

Op Default product mag je hetzelfde block zetten, of auto-inject onder de prijs als vangnet. Tray en modal is de runtime. Design: knop-uiterlijk, modal, tray — Refine with AI op Design mag van beschrijving, screenshot of merk-URL; structure blijft locked.

Meerdere collection-templates (B2B vs D2C)? Block op elke template die kaarten toont. Een block op Default collection raakt een custom “Lookbook”-template niet.

Shortcode `[oo-table id=YOUR_TABLE_ID]` is voor een pagina of sectie, niet als vervanging van een knop op elke kaart. Embed moet aan, tabel Enabled.

Praktijk: drie laptops in één grid

Collectie “Werkstations”. Kaarten: 13", 14", 16". Shopper wil gewicht, wattage, prijs naast elkaar, niet drie tabs.

Bouw één Comparison-tabel. Rijen uit Shopify-modules (Price, Weight) plus een metafield voor wattage — zodat de 14" niet op een screenshot van vorig jaar blijft staan. Zet het Compare-block op de collection-card, onder de prijs op de kaart als het thema dat toelaat. Embed aan.

Test:

• Uitgelogd op de collectie: knop zichtbaar, twee producten in de tray, modal met drie kolommen.

• Zelfde twee producten vanaf de PDP: als inject aan staat en er géén Compare-block op Default product is, zit de knop onder de prijs. Dubbele knoppen? Zet inject uit als het block er al staat, of haal het block van de PDP.

• Specs-tabel op dezelfde producten: verschijnt niet op de kaart. Die wil een Product specs-block, ergens anders.

Thema wisselen: embed en blocks opnieuw. Config in de app blijft. Een tweede collectie-template (sale, B2B) krijgt hetzelfde block — anders blijft díe grid zonder knop, terwijl Default collection wél werkt.

Aan de slag op één collectie

1. Installeer OO - Advanced Table Builder. Maak of hergebruik een Comparison-tabel. Geen hard-coded cellen.

2. Embed aan.

3. Customize → Collections → Default collection → Compare button in de kaartsectie.

4. Twee producten in de tray. Check live Price/Weight, niet de admin-placeholders.

5. PDP: kies block óf inject, niet allebei als je dubbele knoppen ziet.

6. Locale: customer-facing strings in Settings → translations (triggertekst, empty-state).

Tot slot

Shopify vergelijken op collectiekaarten is een Compare-block op de collection-template. Auto-inject onder de prijs redt de PDP, niet het grid. Embed houdt tray en modal in de lucht. Specs, Tabbed en Us vs Them komen niet vanzelf op een kaart.

Zet die knop in OO - Advanced Table Builder, klik twee kaarten, en laat de shopper Mini naast Pro zien zonder twaalf tabs.