Dodaj tabelę rozmiarów do stron produktów

Uwaga

Klasyczne szablony nie są dostępne w Sklepie z szablonami. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane oprócz poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu Shopify, możesz skontaktować się z pomocą techniczną Shopify, aby uzyskać pomoc w zakresie tego tutoriala. Wymaga to 15 minut czasu projektowania. Aby dowiedzieć się więcej, zapoznaj się z tematem Pomoc techniczna w zakresie szablonów.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

Jeśli sprzedajesz artykuły odzieżowe, które wymagają, aby klienci znali swój rozmiar przed dokonaniem zakupu, możesz dodać niestandardową tabelę rozmiarów do strony produktu.

Wszystkie produkty, które wymagają odwołania do tabeli rozmiarów, muszą mieć opcję Rozmiar:

Uwaga

Ten tutorial nie działa dla szablonu Express bez dodatkowego kodu.

Konieczne może się okazać dostosowanie CSS dla tabeli w zależności od szablonu.

Ponadto projekt tabel rozmiarów nie jest kompatybilny z wszystkimi urządzeniami. W przypadku dodania zbyt wielu kolumn informacji, tabele mogą nie wyświetlać się w całości na urządzeniach mobilnych.

Tworzenie strony tabeli rozmiarów

Pulpit

1. Z poziomu panelu administracyjnego Shopify przejdź do opcji Sklep online > Strony.

iPhone

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Strony.

Android

1. W aplikacji Shopify naciśnij Sklep.
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Strony.

1. Kliknij Dodaj stronę.

2. Wprowadź tytuł strony.

• Jeśli chcesz utworzyć tabelę rozmiarów, która pojawia się w całej witrynie, wprowadź Size Chart dla tytułu strony. W sekcji Podgląd wpisu w wyszukiwarce adres URL strony powinien mieć końcówkę /size-chart.
• Jeśli chcesz utworzyć tabelę, która pojawia się tylko na produktach od określonego dostawcy, wprowadź nazwę dostawcy, a następnie Size Chart.
  Na przykład, jeśli nazwa Twojego dostawcy to Great Owls, wprowadź Great Owls Size Chart jako tytuł strony. W sekcji Podgląd wpisu w wyszukiwarce adres URL strony powinien mieć końcówkę /great-owls-size-chart.
• Jeśli chcesz utworzyć tabelę, która pojawia się tylko dla określonego typu produktu, wprowadź typ produktu, a następnie Size Chart.
  Na przykład, jeśli chcesz wyświetlić tabelę rozmiarów specyficzną dla butów, wprowadź Shoes Size Chart jako tytuł strony. W sekcji Podgląd wpisu w wyszukiwarce adres URL strony powinien mieć końcówkę /shoes-size-chart.

1. W polu Zawartość utwórz tabelę zawierającą informacje dotyczące tabeli rozmiarów. Dostosuj wygląd tabeli do swoich potrzeb:

2. Sprawdź, czy w sekcji Widoczność strona jest ustawiona jako Widoczna.

3. Kliknij opcję Zapisz.

Przejdź do edytora kodu

Pulpit

1. Z panelu administracyjnego Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

iPhone

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Android

1. W aplikacji Shopify naciśnij Sklep.

2. W sekcji Kanały sprzedaży naciśnij Sklep online.

3. Naciśnij opcję Zarządzaj szablonami.

4. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

Wybierz jedną z poniższych opcji i utwórz fragment kodu tabeli rozmiarów

Site wide

Uwaga

Wybór opcji „W całej witrynie” powoduje wyświetlenie tabeli rozmiarów na wszystkich stronach produktów, które mają opcję Rozmiar.

Tworzenie fragmentu kodu tabeli rozmiarów

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Nazwij swój fragmentu kodu size-chart i kliknij opcję Utwórz fragment kodu:

3. Skopiuj następujący kod do swojego fragmentu kodu 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>

Uwaga

konieczne jest wprowadzenie kilku zmian w stylach CSS dla szablonów Simple i Minimal.

Jeśli używasz szablonu Simple, użyj tego kodu:

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

Jeśli używasz szablonu Minimal, użyj następującego kodu:

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

Dodaj fragment kodu tabeli rozmiarów do pliku theme.liquid

1. W katalogu Układ kliknij, aby otworzyć plik theme.liquid.

2. Znajdź tag zamykający </body>. Bezpośrednio nad tagiem zamykającym </body> wklej następujący kod:

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

Dodaj przycisk Tabela rozmiarów

1. W katalogu Sekcje kliknij, aby otworzyć plik product-template.liquid lub plik product.liquid, jeśli nie masz pliku product-template.liquid.

2. Wklej następujący kod nad przyciskiem Dodaj do koszyka:

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

Przycisk Dodaj do koszyka zazwyczaj zaczyna się od kodu, takiego jak <button type="submit" name="add". Jeśli językiem operacyjnym Twojego sklepu nie jest angielski, zastąp See Size Chart tekstem, który wolisz używać.

Uwaga

W szablonie Narrative musisz wstawić powyższy kod w pliku product-form.liquid znajdującym się w katalogu Fragmenty kodu

Product type

Uwaga

W przypadku wybrania Typu produktu tabela rozmiarów wyświetla się na wszystkich stronach produktów, które mają opcję Rozmiar i określony typ produktu.

Tworzenie fragmentu kodu tabeli rozmiarów

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Nazwij swój fragmentu kodu size-chart i kliknij opcję Utwórz fragment kodu:

3. Skopiuj następujący kod do swojego fragmentu kodu 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>

Uwaga

konieczne jest wprowadzenie kilku zmian w stylach CSS dla szablonów Simple i Minimal.

Jeśli używasz szablonu Simple zastąp fragment od .trigger-pop-up aż do miejsca tuż nad </style> poniższym kodem:

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

Jeśli używasz szablonu Minimal, dodaj następujący kod nad tagiem zamykającym </style>:

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

Dodaj fragment kodu tabeli rozmiarów do pliku theme.liquid

1. W katalogu Układ kliknij, aby otworzyć plik theme.liquid.

2. Znajdź tag zamykający </body>. Bezpośrednio nad tagiem zamykającym </body> wklej następujący kod:

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

Dodaj przycisk Tabela rozmiarów

1. W katalogu Sekcje kliknij, aby otworzyć plik product-template.liquid lub plik product.liquid, jeśli nie masz pliku product-template.liquid.

2. Wklej następujący kod nad przyciskiem Dodaj do koszyka:

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

Przycisk Dodaj do koszyka zazwyczaj zaczyna się od kodu, takiego jak <button type="submit" name="add". Jeśli językiem operacyjnym Twojego sklepu nie jest angielski, zastąp See Size Chart tekstem, który wolisz używać.

Uwaga

W szablonie Narrative musisz wstawić powyższy kod w pliku product-form.liquid znajdującym się w katalogu Fragmenty kodu.

Product vendor

Uwaga

Wybranie dostawcy produktu powoduje wyświetlenie tabeli rozmiarów na wszystkich stronach produktu z opcją Rozmiar i określonym dostawcą produktu.

Tworzenie fragmentu kodu tabeli rozmiarów

1. W katalogu Fragmenty kodu kliknij opcję Dodaj nowy fragment kodu.

2. Nazwij swój fragmentu kodu size-chart i kliknij opcję Utwórz fragment kodu:

3. Skopiuj następujący kod do swojego fragmentu kodu 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>

Uwaga

konieczne jest wprowadzenie kilku zmian w stylach CSS dla szablonów Simple i Minimal.

Jeśli używasz szablonu Simple zastąp fragment od .trigger-pop-up aż do miejsca tuż nad </style> poniższym kodem:

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

Jeśli używasz szablonu Minimal, dodaj następujący kod nad tagiem zamykającym </style>:

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

Dodaj fragment kodu tabeli rozmiarów do pliku theme.liquid

1. W katalogu Układ kliknij, aby otworzyć plik theme.liquid.

2. Znajdź tag zamykający </body>. Bezpośrednio nad tagiem zamykającym </body> wklej następujący kod:

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

Dodaj przycisk Tabela rozmiarów

1. W katalogu Sekcje kliknij, aby otworzyć plik product-template.liquid lub plik product.liquid, jeśli nie masz pliku product-template.liquid.

2. Wklej następujący kod nad przyciskiem Dodaj do koszyka:

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

Przycisk Dodaj do koszyka zazwyczaj zaczyna się od kodu, takiego jak <button type="submit" name="add". Jeśli językiem operacyjnym Twojego sklepu nie jest angielski, zastąp See Size Chart tekstem, który wolisz używać.

Uwaga

W szablonie Narrative musisz wstawić powyższy kod w pliku product-form.liquid znajdującym się w katalogu Fragmenty kodu.