Shopify Größentabelle hinzufügen: Produktspezifische Tabellen ohne separate App

Die wichtigsten Erkenntnisse

• Dawn kann eine Größentabelle ohne App anzeigen. Der Pop-up-Block öffnet jede Shop-Seite in einem Dialog, sodass eine Seite plus ein Block für eine shopweite Tabelle ausreicht.¹
• Unterschiedliche Tabellen pro Produkt erfordern ein Metafeld. Shopifys eigenes Tutorial nutzt ein Produkt-Metafeld vom Typ „Seite“ (Page), das als dynamische Quelle mit dem Pop-up-Block verbunden wird.²
• Meta-Objekte lohnen sich, sobald du viele Tabellen hast. Sie speichern Maße als strukturierte Daten, die du als Tabelle ausgeben, zwischen Zoll und cm umschalten und übersetzen kannst.
• Veröffentliche die Tabelle als HTML-Tabelle, nicht nur als Bild. Screenreader und Übersetzungstools können keine Maße auf einem Bild lesen.

Eine Shopify Größentabelle (Size Chart) braucht keine eigene App: Eine Seite, ein Metafeld und ein Block, der bei Dawn standardmäßig dabei ist, reichen für die meisten Bekleidungs-, Schuh- und Schmuck-Shops völlig aus. Dieser Guide zeigt, wie du auf drei native Arten eine Größentabelle in Shopify hinzufügst, und behandelt dann, was grundlegende Tutorials oft auslassen: verschiedene Tabellen für verschiedene Produkte, barrierefreies Tabellen-Markup, Mobile-Layout und ein Schalter für Zoll/cm.

Egal ob du es Size Chart, Größentabelle oder Size Guide nennst, das Setup ist dasselbe.

Warum du uns vertrauen kannst

Wir sind seit über vier Jahren im Shopify-Bereich tätig und haben mit hunderten Shopify-Marken an ihren Storefronts gearbeitet. Jacques hat über 15 Jahre Entwicklungserfahrung. Wir bauen Fudge, einen AI-Storefront-Editor mit einer Bewertung von 4.9 im Shopify App Store und „Built for Shopify“-Status, und Produktseiten-Elemente wie ein Size Guide sind genau die Art von Theme-Code, die er schreibt.

Welche Möglichkeiten gibt es, eine Größentabelle in Shopify hinzuzufügen?

Es gibt vier native Wege und einen über eine App. Wähle je nachdem, wie viele verschiedene Tabellen du brauchst.

Die folgenden Schritte nutzen Dawn. Andere Themes benennen den Block anders: Horizons Popup link-Block (blocks/popup-link.liquid) wird anstelle einer Seite mit verschachtelten Blöcken gefüllt und kann sich als Drawer öffnen.

Methode 1: Eine Shopify Größentabelle für den ganzen Shop

1. Gehe zu Onlineshop → Seiten → Seite hinzufügen. Nenne sie „Size Chart“ (oder „Größentabelle“), erstelle die Tabelle mit dem Button Tabelle einfügen im Editor, setze die Sichtbarkeit auf Sichtbar und speichere.
2. Gehe zu Onlineshop → Themes → Anpassen (Theme-Editor) und öffne dein Produkt-Template aus dem Dropdown-Menü.
3. Klicke unter Produktinformationen auf Block hinzufügen und wähle Pop-up.
4. Setze die Link-Bezeichnung auf „Größentabelle“, wähle deine Seite in der Seite-Einstellung und speichere.

Das sind die einzigen beiden Einstellungen des Blocks.¹ Der Link öffnet einen Dialog, der den Seitentitel und Inhalt zeigt. Ziehe den Block direkt unter die Varianten-Auswahl (Variant picker), damit er bei den Größenoptionen steht.

Methode 2: Wie zeigt man pro Produkt eine andere Größentabelle an?

Die dokumentierte Antwort von Shopify ist ein Produkt-Metafeld vom Typ Seite (Page), das als dynamische Quelle mit dem Pop-up-Block verbunden wird.² Die page-Einstellung des Blocks akzeptiert genau diesen Metafeld-Typ.³

1. Gehe zu Einstellungen → Metafelder und Meta-Objekte → Produkte → Definition hinzufügen. Nenne es „Size Chart“, klicke auf Typ auswählen, wähle Seite und speichere. Der Storefront-Zugriff ist standardmäßig aktiviert.
2. Erstelle eine Seite pro Tabelle: Oberteile, Hosen, Schuhe, Ringgrößen.
3. Wähle im Theme-Editor den Pop-up-Block aus, klicke auf das Icon für dynamische Quellen neben Seite und wähle dein Size Chart-Metafeld.
4. Öffne bei jedem Produkt die Produkt-Metafelder, klicke auf Size Chart und wähle die richtige Seite aus. Ein Produkt kann auf eine Seite verlinken.

Neu bei Metafeldern? Siehe Wie man Metafelder zu Shopify-Produkten hinzufügt.

Das Problem mit dem leeren Link

Shopifys Tutorial platziert den Block auf einem separaten Produkt-Template, das nur Produkten mit einer Tabelle zugewiesen wird. Der Quellcode von Dawn zeigt, warum: Der Pop-up-Button wird gerendert, ohne zu prüfen, ob eine Seite hinterlegt ist. Ein Produkt mit einem leeren Metafeld erhält also trotzdem den Link, der einen leeren Dialog öffnet.¹

Um stattdessen bei einem Template zu bleiben, dupliziere zuerst dein Theme und verpacke dann das bestehende Opener-Markup in sections/main-product.liquid in eine Prüfung auf leere Inhalte:

{%- when 'popup' -%}
  {%- if block.settings.page != blank -%}
    <modal-opener ...>
      ...
    </modal-opener>
  {%- endif -%}

Alternative Templates für 2-4 Tabellenarten

Bei nur wenigen Kategorien kannst du das Metafeld überspringen. Erstelle ein Produkt-Template pro Kategorie, jedes mit einem Pop-up-Block, der auf eine feste Seite verweist. Weise es dann unter Theme-Template beim Produkt oder über die Template-Spalte des Bulk-Editors zu. Ein Theme kann insgesamt 1.000 Templates fassen.⁴ Siehe Hinzufügen eines Custom Templates in Shopify für die einzelnen Schritte.

Shopifys Kategorie-Metafelder sind etwas anderes: Sie beschreiben Produktattribute wie Kleidergröße, nicht aber eine Tabelle mit Maßen.

Methode 3: Strukturierte Größentabellen mit Meta-Objekten

Eine Seite speichert eine Tabelle als formatierten Text. Ein Meta-Objekt speichert sie als Daten mit benannten Feldern, was Einheiten-Umschaltung, konsistentes Markup und Übersetzungen in der Praxis erst möglich macht.

Der zusätzliche Setup-Aufwand lohnt sich, wenn du viele Tabellen hast oder sie über verschiedene Märkte hinweg wiederverwendest. Eine Definition kann bis zu 40 Felder und 1.000.000 Einträge haben.⁵

Definition und Referenz einrichten

1. Gehe zu Inhalt → Meta-Objekte → Definition hinzufügen und nenne sie „Size Chart“.
2. Füge Felder hinzu: Title (Einzeiliger Text), Measurements (JSON) und Fit notes (Mehrzeiliger Text). Lass Storefronts ausgewählt und aktiviere Übersetzungen, falls du in mehr als einer Sprache verkaufst.
3. Füge einen Eintrag pro Tabelle hinzu und lass ihn auf Aktiv. Ein Entwurf (Draft) gibt in Liquid nichts zurück.⁵
4. Gehe zu Einstellungen → Metafelder und Meta-Objekte → Produkte → Definition hinzufügen, wähle den Typ Meta-Objekt, wähle deine Size Chart-Definition aus und speichere.
5. Wähle bei jedem Produkt den Eintrag im Abschnitt Metafelder aus.

Speichere beide Einheiten im Measurements-Feld:

{
    "columns": ["Size", "Chest", "Waist"],
    "rows": [
        {"size": "S", "inches": ["34-36", "28-30"], "cm": ["86-91", "71-76"]},
        {"size": "M", "inches": ["38-40", "32-34"], "cm": ["97-102", "81-86"]}
    ]
}

Als Tabelle rendern

Dawn hat keinen Block, der ein Meta-Objekt in eine Tabelle verwandelt, also erfordert dieser Weg Liquid. Dupliziere zuerst dein Theme, füge dann einen Custom Liquid-Block unter der Varianten-Auswahl hinzu und füge dies ein:

{%- assign chart = product.metafields.custom.size_chart.value -%}
{%- if chart != blank -%}
  {%- assign data = chart.measurements.value -%}
  <details class="size-chart" data-unit="in">
    <summary>Size guide</summary>
    <div class="size-chart__scroll" role="region" aria-labelledby="SizeChartCaption" tabindex="0">
      <table>
        <caption id="SizeChartCaption">{{ chart.title.value | escape }}</caption>
        <thead>
          <tr>
            {%- for column in data.columns -%}
              <th scope="col">{{ column | escape }}</th>
            {%- endfor -%}
          </tr>
        </thead>
        <tbody>
          {%- for row in data.rows -%}
            <tr>
              <th scope="row">{{ row.size | escape }}</th>
              {%- for inches in row.inches -%}
                <td>
                  <span class="u-in">{{ inches | escape }} in</span>
                  <span class="u-cm">{{ row.cm[forloop.index0] | escape }} cm</span>
                </td>
              {%- endfor -%}
            </tr>
          {%- endfor -%}
        </tbody>
      </table>
    </div>
    {%- if chart.fit_notes.value != blank -%}
      <p>{{ chart.fit_notes.value | escape | newline_to_br }}</p>
    {%- endif -%}
  </details>
{%- endif -%}

Passe custom.size_chart an den Namensraum (Namespace) und Schlüssel (Key) deines Metafeldes an. Das details-Element ist ein aufklappbarer Bereich, der ohne JavaScript funktioniert; ein Drawer oder Modal erfordert mehr Code. Die Custom Liquid-Einstellung akzeptiert HTML und Liquid bis zu 50 kb, sodass CSS und Skripte weiter unten im selben Block leben können.

Der Weg mit Fudge. Fudge liest das Meta-Objekt und schreibt die Darstellungsebene. Sag Fudge:

“Füge neben der Größenauswahl auf Produktseiten einen ‘Size Guide’-Link hinzu, der einen Drawer öffnet. Zeige die Größentabelle aus dem Size Chart-Metaobjekt des Produkts als barrierefreie Tabelle, mit einem Schalter für Zoll/cm, der sich die Auswahl merkt.”

Du erhältst nativen Theme-Code als Entwurf, den du vor der Veröffentlichung prüfen kannst. Die Maße kommen weiterhin von dir und bleiben in den Meta-Objekten im Shopify-Adminbereich; KI und Shopify Metafelder erklärt diese Aufteilung.

Wie weist man Größentabellen massenhaft zu?

Der Bulk-Editor. Wähle Produkte in der Produktliste aus, öffne den Bulk-Editor (Massenbearbeitung), klicke auf Spalten und füge dein Metafeld aus dem Bereich Metafelder hinzu. Shopifys Hilfeseite listet nicht auf, welche Metafeld-Typen das Raster bearbeiten kann, also probiere deine Size Chart-Spalte zuerst an ein paar Produkten aus.⁶

CSV-Import. Die Produkt-CSV akzeptiert Metafeld-Spalten für eine feste Liste von Typen. list.metaobject_reference ist darauf zu finden; der Seiten-Typ (Page) und die einfache Meta-Objekt-Referenz jedoch nicht.⁶ Um Tabellen per Tabellenkalkulation zuzuweisen, definiere das Metafeld als Werteliste und lies den ersten Eintrag in Liquid aus.

Nach Produkttyp in Liquid. Wenn deine Produkttypen konsistent sind, kannst du dir die Zuweisung pro Produkt sparen. Benenne jeden Eintrag so, dass sein Handle mit einem Produkttyp übereinstimmt, und ersetze dann die erste Zeile des Snippets aus Methode 3 durch:

{%- assign chart = product.metafields.custom.size_chart.value -%}
{%- if chart == blank -%}
  {%- assign type_handle = product.type | handleize -%}
  {%- assign chart = metaobjects.size_chart[type_handle] -%}
{%- endif -%}

Hier ist size_chart der Typ der Meta-Objekt-Definition. Ein Produkt vom Typ „Tops“ greift den Eintrag mit dem Handle tops ab, und ein produktspezifisches Metafeld hat weiterhin Vorrang. Dasselbe Muster funktioniert mit Seiten via pages[handle] oder mit einer Tag-Prüfung wie product.tags contains 'chart-tops'.

Der Weg mit Fudge. Beschreibe die Regel und Fudge schreibt das Liquid dafür. Sag Fudge:

“Verwende basierend auf dem Produkttyp eine andere Größentabelle für Oberteile, Hosen und Schuhe, und blende den Size-Guide-Link bei Produkten aus, die keine Tabelle haben.”

Fudge schreibt die Regel als Entwurf in dein Theme. Du erstellst die drei Tabellen weiterhin im Adminbereich.

Was macht eine Shopify-Größentabelle barrierefrei?

Nutze eine echte HTML-Tabelle. Ein Screenreader oder eine Übersetzungs-App kann keine Zahlen in einem Bild lesen. Eine reine Bild-Tabelle fällt beim Kriterium WCAG 1.1.1 Nicht-Text-Inhalt durch, es sei denn, dieselbe Information wird nochmal als Text wiederholt.⁷

Auch die Beziehungen zwischen Größen und Maßen müssen im Markup stehen (WCAG 1.3.1 Info und Beziehungen).⁷ In der Praxis:

• Ein caption, das die Tabelle benennt, z. B. „Damen-Oberteile - Körpermaße“.
• Spaltenüberschriften als th-Zellen mit scope="col", und die Größe in jeder Zeile als th mit scope="row".
• Ein Scroll-Container mit tabindex="0", role="region" und einem barrierefreien Namen, damit Tastaturnutzer eine breite Tabelle scrollen können.
• Ein Textkontrast von mindestens 4,5:1 (WCAG 1.4.3), auch bei hellen Zebra-Streifen.

<div class="size-chart__scroll" role="region" aria-labelledby="chart-caption" tabindex="0">
    <table>
        <caption id="chart-caption">
            Damen-Oberteile - Körpermaße
        </caption>
        <thead>
            <tr>
                <th scope="col">Size</th>
                <th scope="col">Chest</th>
                <th scope="col">Waist</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">S</th>
                <td>34-36 in</td>
                <td>28-30 in</td>
            </tr>
        </tbody>
    </table>
</div>

Shopifys Hilfeseite für das Tabellentool im Editor behandelt Zeilen und Spalten, jedoch keine Captions oder Kopfzellen. Klicke im Seiten-Editor auf HTML anzeigen, um das Markup zu überprüfen und von Hand anzupassen.

Auch für das Pop-up gelten Regeln. Ein Dialog sollte den Fokus einfangen, sich mit Escape schließen und den Fokus an den Link zurückgeben, der ihn geöffnet hat. Dawns Pop-up-Block macht alle drei Dinge: Sein Quellcode setzt role="dialog" und aria-modal="true", hält Tabulator-Sprünge innerhalb des Dialogs (Focus Trap), schließt bei Escape oder Klick auf den Hintergrund und gibt den Fokus an den Opener zurück.⁸ Ein kleiner Haken: Er rendert den Seitentitel als zweites h1 auf der Produktseite.

Unsere WCAG 2.2 AA Checkliste für Shopify deckt den Rest der Produktseite ab.

Wie sollte eine Größentabelle mobil funktionieren?

Eine sechsspaltige Tabelle passt nicht auf einen Handy-Bildschirm, und das ist okay: WCAG 1.4.10 Umbruch (Reflow) nimmt Datentabellen aus, weil Zeilen und Spalten nur in zwei Dimensionen Sinn ergeben.

Horizontal scrollen, mit einem Hinweis. Dawn macht das bereits in seinem Pop-up: Unter 750px setzt das Stylesheet Tabellen auf overflow-x: auto.¹ Lass die letzte sichtbare Spalte etwas abgeschnitten erscheinen oder füge eine Zeile wie „Für mehr Größen scrollen“ hinzu, damit Käufer wissen, dass da noch mehr kommt.

Fixiere die erste Spalte. Sobald die Größenangaben weggescrollt sind, verlieren die Zahlen ihre Bedeutung. Mit Sticky-Zeilenüberschriften (Sticky Row Headers) lässt sich das beheben, und sie lassen sich besser vergleichen als ein gestapeltes Layout mit einer Karte pro Größe:

.size-chart__scroll {
    overflow-x: auto;
}
.size-chart__scroll th[scope='row'] {
    position: sticky;
    left: 0;
    background: #fff;
}

Achte auf Klickflächen (Tap Targets). WCAG 2.5.8 setzt ein Minimum von 24 mal 24 CSS-Pixeln. Dawn gibt seinem Pop-up-Link eine min-height von 4.4rem; gib den Einheiten-Buttons ähnlich viel Platz.

Drawer oder Modal? Auf Handys hält ein Bottom-Drawer das Produkt dahinter sichtbar; ein zentriertes Modal gibt einer breiten Tabelle auf dem Desktop mehr Raum. Beide brauchen das gleiche Tastatur-Verhalten.

Der Weg mit Fudge. Fudge übernimmt die Layout-Anpassung im CSS und Markup deines Themes. Sag Fudge:

“Lass die Größentabelle auf mobilen Geräten horizontal scrollen und fixiere die erste Spalte.”

Die Änderung kommt als Entwurf, den du vor der Veröffentlichung auf einem Smartphone testen kannst.

Wie fügt man einen Umschalter für Zoll/cm hinzu?

Speichere beide Einheiten, anstatt sie dynamisch umzurechnen. Ein umgerechneter Wert wie 87,63 cm muss gerundet werden, und gerundete Umrechnungen stimmen nicht immer mit den metrischen Vorgaben deines Herstellers überein. Deshalb enthält das Measurements-Feld oben inches und cm.

Das Liquid aus Methode 3 gibt bereits beide Werte in jeder Zelle aus. Füge zwei Buttons innerhalb des size-chart-Elements über der Tabelle hinzu:

<div role="group" aria-label="Measurement units">
    <button type="button" data-set-unit="in" aria-pressed="true">Inches</button>
    <button type="button" data-set-unit="cm" aria-pressed="false">Centimetres</button>
</div>

.size-chart[data-unit='in'] .u-cm,
.size-chart[data-unit='cm'] .u-in {
    display: none;
}

document.querySelectorAll('.size-chart').forEach(function (chart) {
    var buttons = chart.querySelectorAll('[data-set-unit]')

    function setUnit(unit) {
        chart.dataset.unit = unit
        buttons.forEach(function (button) {
            button.setAttribute('aria-pressed', String(button.dataset.setUnit === unit))
        })
        try {
            localStorage.setItem('sizeChartUnit', unit)
        } catch (e) {}
    }

    var saved = null
    try {
        saved = localStorage.getItem('sizeChartUnit')
    } catch (e) {}
    if (saved === 'in' || saved === 'cm') setUnit(saved)

    buttons.forEach(function (button) {
        button.addEventListener('click', function () {
            setUnit(button.dataset.setUnit)
        })
    })
})

aria-pressed teilt assistiven Technologien mit, welche Einheit aktiv ist. Die Beschriftungen bleiben in beiden Zuständen gleich, wie es das Toggle-Button-Pattern des W3C vorschreibt. Die Auswahl wird im localStorage gespeichert und somit auf das nächste Produkt übertragen.

Internationale Größen sind eine ähnliche Anforderung. US-, UK- und EU-Größen sind bloße Labels, keine Umrechnungen – füge sie also aus den Herstellerspezifikationen als zusätzliche Spalten hinzu.

Wohin gehört der Link zum Size Guide, und was gehört noch dazu (außer der Tabelle)?

Platziere den Link neben der Größenauswahl, denn dort taucht die Frage auf. Zum umfassenderen Layout siehe Wie man eine Shopify-Produktseite anpasst.

Eine Zahlentabelle ist nur ein Teil eines nützlichen Guides. Füge hinzu:

• Richtig messen. Eine Zeile pro Maß, die erklärt, wo das Maßband angelegt wird.
• Körper- oder Kleidungsmaße. Gib an, was die Tabelle zeigt.
• Körpergröße des Models und getragene Größe, in der Nähe der Produktbilder.
• Passform-Hinweise (Fit notes) pro Produkt: fällt klein aus, lässiger Schnitt, eine Nummer größer für den Layering-Look.

Fashion-Stores finden weitere Layout-Ideen im Guide Shopify Store Design für Fashion.

Wann ist eine Size Chart App die richtige Wahl?

Native Methoden decken die Anzeige einer Tabelle ab. Eine App ist dann sinnvoll, wenn du mehr als nur die reine Anzeige brauchst:

• Passform-Empfehlungen. Ein Quiz, das nach Größe, Gewicht und Passform-Vorliebe fragt und dann eine Größe vorschlägt, erfordert Logik und Daten, die ein Theme-Snippet nicht hat.
• Sehr große Kataloge mit gelieferten Tabellen von Drittanbietern. Wenn hunderte Marken jeweils ihre eigene Tabelle mitschicken, spart ein Tool, das diese importiert und zuordnet, viel Zeit in der Verwaltung.

Prüfe die aktuellen Preise direkt im App Store. Wenn es nur um die Anzeige geht, reicht eine native Tabelle in deinem Theme – ob handgeschrieben oder mit dem Shopify Store Editor – völlig aus.

FAQ