Voeg een maattabel toe aan productpagina's

Als je kledingartikelen verkoopt waarvoor klanten hun maat nodig hebben om een aankoop te doen, kun je een aangepaste maattabel toevoegen aan de productpagina.

Alle producten die verwijzen naar de maattabel moeten de optie Maat hebben:

size option example

Een pagina met een maattabel aanmaken

Desktop
  1. Ga in het Shopify-beheercentrum naar webshop > Pagina's.

  2. Klik op Pagina toevoegen.

  3. Voer een paginatitel in.

    • Als je een maattabel wilt aanmaken die je voor je hele site kunt gebruiken, voer je Size Chart als paginatitel in. In de sectie Voorbeeld van een zoekmachine-vermelding* eindigt de URL van de pagina op /size-chart.
    • Als je een grafiek wilt maken die alleen wordt weergegeven voor producten van een specifieke leverancier, voer je de naam van de leverancier in gevolgd door een Size Chart.
      Als je leverancier bijvoorbeeld Great Homepages wordt genoemd, voer je Great Owls Size Chart voor de paginatitel in. In de sectie voorbeeld van een zoekmachineoverzicht moet de URL van de pagina eindigen op /great-owls-size-chart.
    • Als je een grafiek wilt maken die alleen voor een specifiek producttype wordt weergegeven, voer je het producttype in, gevolgd door een Size Chart.
      Als je bijvoorbeeld een maattabel specifiek voor schoenen wilt weergeven, voer je een Shoes Size Chart in voor de paginatitel. In de sectie voorbeeld van een zoekmachineoverzicht, moet de URL van de pagina eindigen op /shoes-size-chart.
  4. Maak een tabel aan met de maattabelgegevens in het vak Content. Pas de tabel naar wens aan:

    Customizing the size chart table

  5. Zorg dat in de sectie Zichtbaarheid de pagina is ingesteld op Zichtbaar.

  6. Klik op Opslaan.

iPhone
  1. Tik in de Shopify-app op de knop .

  2. Tik in de sectie Verkoopkanalen op webshop.

  3. Tik op Pagina's.

  4. Klik op Pagina toevoegen.

  5. Voer een paginatitel in.

    • Als je een maattabel wilt aanmaken die je voor je hele site kunt gebruiken, voer je Size Chart als paginatitel in. In de sectie Voorbeeld van een zoekmachine-vermelding* eindigt de URL van de pagina op /size-chart.
    • Als je een grafiek wilt maken die alleen wordt weergegeven voor producten van een specifieke leverancier, voer je de naam van de leverancier in gevolgd door een Size Chart.
      Als je leverancier bijvoorbeeld Great Homepages wordt genoemd, voer je Great Owls Size Chart voor de paginatitel in. In de sectie voorbeeld van een zoekmachineoverzicht moet de URL van de pagina eindigen op /great-owls-size-chart.
    • Als je een grafiek wilt maken die alleen voor een specifiek producttype wordt weergegeven, voer je het producttype in, gevolgd door een Size Chart.
      Als je bijvoorbeeld een maattabel specifiek voor schoenen wilt weergeven, voer je een Shoes Size Chart in voor de paginatitel. In de sectie voorbeeld van een zoekmachineoverzicht, moet de URL van de pagina eindigen op /shoes-size-chart.
  6. Maak een tabel aan met de maattabelgegevens in het vak Content. Pas de tabel naar wens aan:

    Customizing the size chart table

  7. Zorg dat in de sectie Zichtbaarheid de pagina is ingesteld op Zichtbaar.

  8. Klik op Opslaan.

Android
  1. Tik in de Shopify-app op de knop .

  2. Tik in de sectie Verkoopkanalen op webshop.

  3. Tik op Pagina's.

  4. Klik op Pagina toevoegen.

  5. Voer een paginatitel in.

    • Als je een maattabel wilt aanmaken die je voor je hele site kunt gebruiken, voer je Size Chart als paginatitel in. In de sectie Voorbeeld van een zoekmachine-vermelding* eindigt de URL van de pagina op /size-chart.
    • Als je een grafiek wilt maken die alleen wordt weergegeven voor producten van een specifieke leverancier, voer je de naam van de leverancier in gevolgd door een Size Chart.
      Als je leverancier bijvoorbeeld Great Homepages wordt genoemd, voer je Great Owls Size Chart voor de paginatitel in. In de sectie voorbeeld van een zoekmachineoverzicht moet de URL van de pagina eindigen op /great-owls-size-chart.
    • Als je een grafiek wilt maken die alleen voor een specifiek producttype wordt weergegeven, voer je het producttype in, gevolgd door een Size Chart.
      Als je bijvoorbeeld een maattabel specifiek voor schoenen wilt weergeven, voer je een Shoes Size Chart in voor de paginatitel. In de sectie voorbeeld van een zoekmachineoverzicht, moet de URL van de pagina eindigen op /shoes-size-chart.
  6. Maak een tabel aan met de maattabelgegevens in het vak Content. Pas de tabel naar wens aan:

    Customizing the size chart table

  7. Zorg dat in de sectie Zichtbaarheid de pagina is ingesteld op Zichtbaar.

  8. Klik op Opslaan.

Navigeer naar de code-editor

Desktop
  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
iPhone
  1. Tik in de Shopify-app op de knop .
  2. Tik in de sectie Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.
Android
  1. Tik in de Shopify-app op de knop .
  2. Tik in de sectie Verkoopkanalen op webshop.
  3. Tik op Thema's beheren.
  4. Zoek het thema dat je wilt bewerken, klik op de knop om het actiemenu te openen en klik vervolgens op Code bewerken.

Kies een van de volgende en maak een maattabelfragment

Site-wide

Een maattabelfragment maken

  1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

  2. Noem je fragment size-chart en klik op Fragment aanmaken:

  3. Kopieer het volgende in je size-chart-fragment:

<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" %} Er zijn enkele wijzigingen aan te brengen in de CSS-styling voor de thema's Simple en Minimal. {% endblock %}

Gebruik deze code als je het thema Simple gebruikt:

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

Gebruik de volgende code als je het thema Minimal gebruikt:

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

Voeg het maattabelfragment toe aan je theme.liquid

  1. In het menu Opmaak, klik om je theme.liquid-bestand te openen.
  2. Zoek de sluitende tag </body>. Plak de volgende code vlak boven de sluitende tag </body>:
{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Voeg de knop Maattabel toe

  1. Klik in de map Secties om het product-template.liquid- of product.liquid-bestand te openen als je geen product-template.liquid-bestand hebt.
  2. Plak de volgende code boven de knop Aan winkelwagen toevoegen:
{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

De knop Toevoegen aan winkelwagen begint meestal met iets als <button type="submit" name="add". Als de werktaal van je winkel niet Engels is, vervang dan See Size Chart door een tekst die je liever gebruikt.

Type

Een maattabelfragment maken

  1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

  2. Noem je fragment size-chart en klik op Fragment aanmaken:

  3. Kopieer het volgende in je size-chart-fragment:

{% 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>

Als je het thema Simple gebruikt, vervang je vanaf .trigger-pop-up tot direct boven </style> door deze 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%;
  }
}

Voeg de volgende code toe boven de sluitende tag </style> als je het thema Minimal gebruikt:

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

Voeg het maattabelfragment toe aan je theme.liquid

  1. In het menu Opmaak, klik om je theme.liquid-bestand te openen.
  2. Zoek de sluitende tag </body>. Plak de volgende code vlak boven de sluitende tag </body>:
{% 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 %}

Voeg de knop Maattabel toe

  1. Klik in de map Secties om het product-template.liquid- of product.liquid-bestand te openen als je geen product-template.liquid-bestand hebt.
  2. Plak de volgende code boven de knop Aan winkelwagen toevoegen:
{% 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 %}

De knop Toevoegen aan winkelwagen begint meestal met iets als <button type="submit" name="add". Als de werktaal van je winkel niet Engels is, vervang dan See Size Chart door een tekst die je liever gebruikt.

Vendor

Een maattabelfragment maken

  1. Klik in de directory Fragmenten op Een nieuw fragment toevoegen.

  2. Noem je fragment size-chart en klik op Fragment aanmaken:

  3. Kopieer het volgende in je size-chart-fragment:

{% 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>

Als je het thema Simple gebruikt, vervang je vanaf .trigger-pop-up tot direct boven </style> door deze 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%;
  }
}

Voeg de volgende code toe boven de sluitende tag </style> als je het thema Minimal gebruikt:

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

Voeg het maattabelfragment toe aan je theme.liquid

  1. In het menu Opmaak, klik om je theme.liquid-bestand te openen.
  2. Zoek de sluitende tag </body>. Plak de volgende code vlak boven de sluitende tag </body>:
{% 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 %}

Voeg de knop Maattabel toe

  1. Klik in de map Secties om het product-template.liquid- of product.liquid-bestand te openen als je geen product-template.liquid-bestand hebt.
  2. Plak de volgende code boven de knop Aan winkelwagen toevoegen:
{% 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 %}

De knop Toevoegen aan winkelwagen begint meestal met iets als <button type="submit" name="add". Als de werktaal van je winkel niet Engels is, vervang dan See Size Chart door een tekst die je liever gebruikt.

Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.