Größentabelle zu Produktseiten hinzufügen

Diese Seite wurde gedruckt um Mar 28, 2023. Die neueste Version findest du unter https://help.shopify.com/de/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart.

Wenn du Kleidungsartikel verkaufst und Kunden ihre Größe angeben 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:

Größentabellenseite erstellen

Gehe in deinem Shopify-Adminbereich zu Onlineshop > Seiten.

Tippe in der Shopify App auf Store.
Klicke im Bereich Vertriebskanäle auf Onlineshop.
Tippe auf Seiten.

Tippe in der Shopify App auf Store.
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 seitenübergreifend 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

Gehe in deinem Shopify-Adminbereich auf 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.

Tippe in der Shopify App auf Shop.
Tippe unter 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.

Tippe in der Shopify App auf Shop.
Tippe unter 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

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;
  }
  .pop-up-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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, 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;
  }
  .pop-up-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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;
  }
  .pop-up-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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.

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;
  }
  .pop-up-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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 %}

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;
  }
  .pop-up-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    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 %}

Größentabelle zu Produktseiten hinzufügen

Größentabellenseite erstellen

Zum Code-Editor navigieren

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

Größentabellen-Snippet erstellen

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

Schaltfläche Größentabelle hinzufügen

Größentabellen-Snippet erstellen

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

Schaltfläche Größentabelle hinzufügen

Größentabellen-Snippet erstellen

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

Schaltfläche Größentabelle hinzufügen

Bereit, mit Shopify zu verkaufen?