Shopify-maattabel: kleuren en trigger instellen

De centimeters kloppen. Chest 92–96 staat in de cel. Op de productpagina is de trigger een grijze link die in de witte achtergrond verdwijnt, of de overlay opent in een kleurenpalet dat niks met het thema te maken heeft. Shoppers meten niet. Jij past Structure aan. Verkeerde tab.

Shopify maattabel kleuren en trigger zit in Design, niet in de meetrijen. Size charts: display mode is popup-trigger of plain content; daarnaast trigger-label, kleuren, fonts, table surface. Design settings overview zegt het kort: size charts — popup vs plain, trigger, table colors.

App Store: OO - Advanced Table Builder, gratis, 5.0 uit 1 review. Docs zeggen soms Tables, Specs & Comparisons. CTA blijft https://apps.shopify.com/tables-specs-comparisons.

Op 25 september: popup versus plain — wanneer overlay, wanneer de grid in de pagina. Hier de rest van Design: label, kleur, oppervlak, en waarom je Structure met rust laat.

Structure is de grid. Design is de chrome.

Structure: tekstblokken, tabelblokken, optioneel een meetdiagram als image. Sizes in de eerste kolom of de eerste rij. Mannen/vrouwen als aparte tabelblokken, niet één mega-grid. Dat was groepen en modules in een andere tabelsoort; bij size charts zijn het blocks.

Design raakt die cellen niet. Je verandert of de shopper een knop ziet of de tabel al open, hoe die knop heet, en of de overlay bij het thema past. Verkeerde kleur in Design “fix” je niet door Chest te hernoemen.

Shopify-varianten blijven S/M/L of nummers als option values. Adding variants: drie options, 2048 variants. De maattabel is uitleg naast die kiezer, geen extra option.

Wat shops nu in de verkeerde tab zetten

Triggertekst in een tabelcel. “Klik hier voor maten” als eerste rij. Dat is content, geen trigger. Display mode popup verwacht het label in Design.

Thema-kleur in Custom CSS gokken zonder Design. Listing noemt Custom CSS. Eerst de Design-velden: table surface, fonts, trigger colors. CSS is rest. Refine with AI op Design mag: beschrijving, screenshot, of een website-URL voor merkkleuren/fonts — structure blijft locked tot jij bevestigt.

Popup omdat “dat doen size charts”. Op mobiel duwt een twaalf-koloms plain-tabel Add to cart weg. Een onzichtbare trigger opent nooit. Kies display mode bewust; kleur de trigger daarna zodat hij naast Add to cart bestaat.

Specs-kleuren verwachten op de size chart. Design is per type. Specs hebben layout-templates. Comparison heeft tray/modal. Dit artikel is size charts.

Wat je in Design zet

Volgens size-chart-docs:

• Display mode — popup trigger of plain content.

• Trigger label — de tekst op de knop of link. Vertaalbaar per locale in Settings; we schreven maattabel vertalen.

• Colors, fonts, table surface — overlay en raster in huisstijl, niet in default-grijs.

Placement daarna, niet in Design:

• Size chart theme app block, of

• App embed zodat matching size charts boven Add to cart kunnen (auto-placement). Embed uitzetten = geen auto-inject, geen shortcode, geen compare-tray. Alleen een block op de template blijft dan over.

Tabel enabled in Settings. Uit = niks op de storefront, hoe mooi Design ook is. Selected products only is een ander topic; claim hier geen extra zichtbaarheidsregels die je niet nodig hebt.

Tip uit de size-chart-docs: meetdiagram als image-block boven de tabel, zodat Chest / Waist / Length een plaatje hebben. Dat is Structure. De trigger ernaast blijft Design.

Praktijk: oversized hoodie, mint-op-navy thema

De grid is klaar. Mannen en vrouwen zijn twee blocks. Op desktop is plain te lang; op mobiel al helemaal.

1. Design → display mode popup.

2. Trigger label in de taal van de shop, bijvoorbeeld “Maattabel” — geen Engelse SEO-string op een NL-storefront.

3. Trigger-kleur die naast Add to cart contrasteert. Tabeloppervlak licht, kopregel in de merkkleur. Geen extra app.

4. Theme: block bij de knop, of embed aan voor auto-placement.

5. Storefront, telefoonbreedte: knop zichtbaar, overlay leesbaar, centimeters ongewijzigd.

Refine with AI: “donkergroene accenten, crème achtergrond” of de merk-URL. Check daarna of de trigger nog contrast heeft. AI is draft; jij bevestigt.

Aan de slag

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

2. Size chart: Structure eerst, Design daarna.

3. Popup of plain. Label. Kleuren. Fonts.

4. Enable. Block of embed. Save theme.

5. Locale-strings in Settings als je meerdere talen verkoopt — dat is vertaling van chrome, niet van centimeters, tenzij je die cellen ook vertaalt.

Geen Specs auto-inject bij Add to cart beloven. Size charts wél via embed boven ATC als je dat aanzet. Houd die zin scherp.

Listing noemt ook import/export en Works with Excel, Google Sheets en AI. Dat vult Structure (cellen plakken of een AI-draft), niet Design. Kleuren die in een spreadsheet-header stonden, komen niet vanzelf als trigger-kleur mee. Na een import: Design opnieuw nalopen, vooral display mode en contrast op mobiel.

Fonts in Design zijn de tabelchrome, geen theme-font voor de hele shop. Wijkt de overlay af van je koppen, dan is dat deze setting — geen tweede app. Custom icons op de listing horen bij Design-achtige chrome; claim geen icon-set die de docs niet uitschrijven. Blijf bij wat size-chart Design wél noemt: modus, label, kleuren, fonts, table surface.

Op een collectiepagina hoort een size chart zelden als plain-grid. Productpagina naast Add to cart is de default uit de docs (block of auto-placement). Zet je hem toch op een size-guide-page, kies plain: een trigger zonder context opent niemand. Kleur blijft relevant: een crème tabel op een crème page-template is even onzichtbaar als een grijze link.

Tot slot

Shopify maattabel kleuren en trigger is Design: popup of plain, label, kleuren, table surface. Structure blijft de meetgrid. Verwissel de tabs niet.

Een grijze trigger is geen foute chest-maat. Zet chrome in Design, plaats de chart, check mobiel. Listing: OO - Advanced Table Builder.