Größentabelle zu Produktseiten hinzufügen

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Theme-Support.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

Wenn du Kleidungsartikel verkaufst und Kunden ihre Größe kennen müssen, bevor sie einen Kauf tätigen, kannst du deiner Produktseite eine benutzerdefinierte Größentabelle hinzufügen.

Alle Produkte, die einen Verweis auf die Größentabelle erfordern, müssen über die Option Größe verfügen:

Achtung

Dieses Tutorial funktioniert beim Express-Theme nur mit zusätzlichem Code.

Möglicherweise musst du den CSS-Code für die Tabelle abhängig vom Theme anpassen.

Darüber hinaus verfügen Größentabellen nicht auf allen Geräten über ein responsives Design. Wenn zu viele Spalten mit Informationen hinzugefügt werden, werden Tabellen auf Mobilgeräten unter Umständen nur teilweise angezeigt.

Größentabellenseite erstellen

Desktop

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.
2. Klicke auf Seite hinzufügen.

3. Gib einen Seitentitel ein.

   • Wenn du eine Größentabelle erstellen möchtest, die auf der ganzen Seite angezeigt wird, gib Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau* sollte die URL der Seite mit /size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten angezeigt wird, auf denen Produkte eines bestimmten Anbieters angeboten werden, dann gib den Namen des Anbieters, gefolgt von Size Chart ein.
     Wenn der Anbieter z. B. "Great Owls" heißt, gib Great Owls Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /great-owls-size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten mit bestimmten Produkttypen angezeigt wird, dann gib den Produkttyp, gefolgt von Size Chart ein.
     Wenn du z. B. eine Größentabelle für Schuhe anzeigen möchtest, gib Shoes Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /shoes-size-chart enden.

4. Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:

   

5. Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.

6. Klicke auf Speichern.

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Seiten.
4. Klicke auf Seite hinzufügen.

5. Gib einen Seitentitel ein.

   • Wenn du eine Größentabelle erstellen möchtest, die auf der ganzen Seite angezeigt wird, gib Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau* sollte die URL der Seite mit /size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten angezeigt wird, auf denen Produkte eines bestimmten Anbieters angeboten werden, dann gib den Namen des Anbieters, gefolgt von Size Chart ein.
     Wenn der Anbieter z. B. "Great Owls" heißt, gib Great Owls Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /great-owls-size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten mit bestimmten Produkttypen angezeigt wird, dann gib den Produkttyp, gefolgt von Size Chart ein.
     Wenn du z. B. eine Größentabelle für Schuhe anzeigen möchtest, gib Shoes Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /shoes-size-chart enden.

6. Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:

   

7. Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.

8. Klicke auf Speichern.

Android

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Seiten.
4. Klicke auf Seite hinzufügen.

5. Gib einen Seitentitel ein.

   • Wenn du eine Größentabelle erstellen möchtest, die auf der ganzen Seite angezeigt wird, gib Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau* sollte die URL der Seite mit /size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten angezeigt wird, auf denen Produkte eines bestimmten Anbieters angeboten werden, dann gib den Namen des Anbieters, gefolgt von Size Chart ein.
     Wenn der Anbieter z. B. "Great Owls" heißt, gib Great Owls Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /great-owls-size-chart enden.
   • Wenn du eine Tabelle erstellen möchtest, die nur auf Seiten mit bestimmten Produkttypen angezeigt wird, dann gib den Produkttyp, gefolgt von Size Chart ein.
     Wenn du z. B. eine Größentabelle für Schuhe anzeigen möchtest, gib Shoes Size Chart als Seitentitel ein. Im Abschnitt Suchmaschinen-Vorschau sollte die URL der Seite mit /shoes-size-chart enden.

6. Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:

   

7. Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.

8. Klicke auf Speichern.

Zum Code-Editor navigieren

Desktop

1. Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify-App auf die Schaltfläche ....
2. Klicke im Bereich Vertriebskanäle auf Onlineshop.
3. Tippe auf Themes verwalten.
4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Eine der folgenden Optionen auswählen und ein Größentabellen-Snippet erstellen

Site-wide

Hinweis

Bei der Auswahl von "Seitenübergreifend" wird die Größentabelle auf allen Produktseiten angezeigt, die die Option Größe verwenden.

Größentabellen-Snippet erstellen

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

2. Benenne dein Snippet size-chart und klicke auf Snippet erstellen:

3. Kopiere den folgenden Code in das Snippet size-chart:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

{% block "note" %} Es müssen einige Änderungen an der CSS-Formatierung für die Themes Simple und Minimal vorgenommen werden. {% endblock %}

Wenn du das Theme Simple verwendest, verwende diesen Code:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 8px;
    width: 50%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
    .trigger-pop-up {
      width: 100%;
    }
  }
  </style>

Wenn du das Theme Minimal verwendest, verwende den folgenden Code:

<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages.size-chart.content }}</span>
  </div>
</div>

<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
  @media only screen and (min-width: 750px) {
    .trigger-pop-up {
      width: 50%;
    }
  }
</style>

Größentabellen-Snippet zu theme.liquid hinzufügen

1. Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
2. Suche nach dem abschließenden Tag </body>. Füge direkt über dem abschließenden Tag </body> den folgenden Code ein:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Schaltfläche Größentabelle hinzufügen

1. Klicke im Verzeichnis Abschnitte auf die Datei product-template.liquid, um sie zu öffnen, oder klicke auf die Datei product.liquid, wenn du nicht über die Datei product-template.liquid verfügst.
2. Füge den folgenden Code über der Schaltfläche In den Warenkorb hinzu:

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

Die Schaltfläche "In den Warenkorb" beginnt normalerweise mit Code wie <button type="submit" name="add". Wenn die Betriebssprache deines Shops nicht Englisch ist, ersetze See Size Chart mit dem gewünschten Text.

Hinweis

Im Theme Narrative musst du den obigen Code in die Datei product-form.liquid einfügen. Die Datei befindet sich im Verzeichnis Snippets.

Type

Hinweis

Bei der Auswahl von "Produkttyp" wird die Größentabelle auf allen Produktseiten angezeigt, die die Option Größe und den angegebenen Produkttyp verwenden.

Größentabellen-Snippet erstellen

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

2. Benenne dein Snippet size-chart und klicke auf Snippet erstellen:

3. Kopiere den folgenden Code in das Snippet size-chart:

{% assign chart = product.type | handleize | append: "-size-chart" %} {% unless
pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Hinweis

Es müssen einige Änderungen an der CSS-Formatierung für die Themes Simple und Minimal vorgenommen werden.

Wenn du das Theme Simple verwendest, ersetze alles von .trigger-pop-up bis direkt über </style> mit diesem Code:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Wenn du das Theme Minimal verwendest, füge den folgenden Code über dem abschließenden Tag </style> ein:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Größentabellen-Snippet zu theme.liquid hinzufügen

1. Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
2. Suche nach dem abschließenden Tag </body>. Füge direkt über dem abschließenden Tag </body> den folgenden Code ein:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Schaltfläche Größentabelle hinzufügen

1. Klicke im Verzeichnis Abschnitte auf die Datei product-template.liquid, um sie zu öffnen, oder klicke auf die Datei product.liquid, wenn du nicht über die Datei product-template.liquid verfügst.
2. Füge den folgenden Code über der Schaltfläche In den Warenkorb hinzu:

{% if product.options contains 'Size' %}
      {% assign chart = product.type | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

Die Schaltfläche "In den Warenkorb" beginnt normalerweise mit Code wie <button type="submit" name="add". Wenn die Betriebssprache deines Shops nicht Englisch ist, ersetze See Size Chart mit dem gewünschten Text.

Hinweis

Im Theme Narrative musst du den obigen Code in die Datei product-form.liquid einfügen. Die Datei befindet sich im Verzeichnis Snippets.

Vendor

Hinweis

Bei der Auswahl von "Produktanbieter" wird die Größentabelle auf allen Produktseiten angezeigt, die die Option Größe und den angegebenen Produktanbieter verwenden.

Größentabellen-Snippet erstellen

1. Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.

2. Benenne dein Snippet size-chart und klicke auf Snippet erstellen:

3. Kopiere den folgenden Code in das Snippet size-chart:

{% assign chart = product.vendor | handleize | append: "-size-chart" %} {%
unless pages[chart].empty? or pages[chart].content == blank %}
<div class="pop-up-modal">
  <div class="pop-up-content">
    <span class="close-button">&times;</span>
    <span class="size-chart-content">{{ pages[chart].content }}</span>
  </div>
</div>
{% endunless %}
<script>
  const modal = document.querySelector('.pop-up-modal');
  const trigger = document.querySelector('.trigger-pop-up');
  const closeButton = document.querySelector('.close-button');

  function toggleModal() {
    modal.classList.toggle('show-pop-up');
  }

  function windowOnClick(event) {
    if (event.target === modal) {
      toggleModal();
    }
  }

  trigger.addEventListener('click', toggleModal);
  closeButton.addEventListener('click', toggleModal);
  window.addEventListener('click', windowOnClick);
</script>

<style>
  .pop-up-modal {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    display: none;
    transform: scale(1.1);
    transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
    overflow:auto;
  }
  .pop-up-content {
    position: absolute;
    top: 8%;
    left: 50%;
    transform: translate(-50%, 0);
    background-color: white;
    padding: 1rem 1.5rem;
    width: auto;
    border-radius: 0.5rem;
  }
  .pop-up-content table {
    table-layout: auto;
  }
  .close-button {
    float: right;
    width: 1.5rem;
    line-height: 1.5rem;
    text-align: center;
    cursor: pointer;
    border-radius: 0.25rem;
    background-color: lightgray;
  }
  .close-button:hover {
    background-color: darkgray;
  }
  .show-pop-up {
    z-index: 12;
    opacity: 1;
    display: block;
    transform: scale(1);
    transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
  }
  .trigger-pop-up {
    margin: 10px 0 10px 0;
    width: 100%;
  }
  @media only screen and (max-width: 749px) {
    .pop-up-content,
    .size-chart-content table {
      width: 100%;
    }
    .size-chart-content th,
    .size-chart-content td {
      padding: 10px;
    }
  }
</style>

Hinweis

Es müssen einige Änderungen an der CSS-Formatierung für die Themes Simple und Minimal vorgenommen werden.

Wenn du das Theme Simple verwendest, ersetze alles von .trigger-pop-up bis direkt über </style> mit diesem Code:

.trigger-pop-up {
  margin: 10px 0 10px 8px;
  width: 50%;
}
@media only screen and (max-width: 749px) {
  .pop-up-content,
  .size-chart-content table {
    width: 100%;
  }
  .size-chart-content th,
  .size-chart-content td {
    padding: 10px;
  }
  .trigger-pop-up {
    width: 100%;
  }
}

Wenn du das Theme Minimal verwendest, füge den folgenden Code über dem abschließenden Tag </style> ein:

@media only screen and (min-width: 750px) {
  .trigger-pop-up {
    width: 50%;
  }
}

Größentabellen-Snippet zu theme.liquid hinzufügen

1. Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
2. Suche nach dem abschließenden Tag </body>. Füge direkt über dem abschließenden Tag </body> den folgenden Code ein:

{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        {% render 'size-chart' %}
      {% endunless %}
    {% endif %}
  {% endif %}

Schaltfläche Größentabelle hinzufügen

1. Klicke im Verzeichnis Abschnitte auf die Datei product-template.liquid, um sie zu öffnen, oder klicke auf die Datei product.liquid, wenn du nicht über die Datei product-template.liquid verfügst.
2. Füge den folgenden Code über der Schaltfläche In den Warenkorb hinzu:

{% if product.options contains 'Size' %}
      {% assign chart = product.vendor | handleize | append: "-size-chart" %}
      {% unless pages[chart].empty? or pages[chart].content == blank %}
        <a class="trigger-pop-up btn">See Size Chart</a>
      {% endunless %}
    {% endif %}

Die Schaltfläche "In den Warenkorb" beginnt normalerweise mit Code wie <button type="submit" name="add". Wenn die Betriebssprache deines Shops nicht Englisch ist, ersetze See Size Chart mit dem gewünschten Text.

Hinweis

Im Theme Narrative musst du den obigen Code in die Datei product-form.liquid einfügen. Die Datei befindet sich im Verzeichnis Snippets.