Größentabelle zu Produktseiten hinzufügen

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:

Auf dieser Seite

Größentabellenseite erstellen

Größentabellenseite erstellen

Desktop

Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.
Klicke auf Seite hinzufügen.
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.
Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:
Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.
Klicke auf Speichern.

iPhone

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Seiten.
Klicke auf Seite hinzufügen.
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.
Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:
Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.
Klicke auf Speichern.

Android

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Seiten.
Klicke auf Seite hinzufügen.
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.
Erstelle eine Tabelle im Feld Inhalt, die die Informationen der Größentabelle enthält. Passe das Erscheinungsbild der Tabelle an deine Vorstellungen an:
Stelle im Abschnitt Sichtbarkeit sicher, dass für die Seite Sichtbar festgelegt ist.
Klicke auf Speichern.

Zum Code-Editor navigieren

Desktop

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
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

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
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

Tippe in der Shopify-App auf die Schaltfläche ....
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Themes verwalten.
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

Größentabellen-Snippet erstellen

Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet size-chart und klicke auf Snippet erstellen:
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

Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
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

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.
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.

Type

Größentabellen-Snippet erstellen

Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet size-chart und klicke auf Snippet erstellen:
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>

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

Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
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

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.
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 %}

Vendor

Größentabellen-Snippet erstellen

Klicke in der Übersicht Snippets auf Neues Snippet hinzufügen.
Benenne dein Snippet size-chart und klicke auf Snippet erstellen:
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>

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

Klicke im Verzeichnis Layout auf die Datei theme.liquid, um sie zu öffnen.
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

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.
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 %}