Dodaj tabelę rozmiarów do stron produktów

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz kontaktować się z pomocą techniczną Shopify i uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce Shopify w zakresie projektowania.

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 tabele rozmiarów nie są kompatybilne 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.
2. Kliknij Dodaj stronę.

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

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

   

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

6. Kliknij opcję Zapisz.

iPhone

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Strony.
4. Kliknij Dodaj stronę.

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

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

   

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

8. Kliknij opcję Zapisz.

Android

1. W aplikacji Shopify naciśnij przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij Strony.
4. Kliknij Dodaj stronę.

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

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

   

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

8. Kliknij opcję Zapisz.

Przejdź do edytora kodu

Pulpit

1. W panelu administracyjnym 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 przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij 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 przycisk ….
2. W sekcji Kanały sprzedaży naciśnij Sklep online.
3. Naciśnij 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;
    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" %} Konieczne jest wprowadzenie kilku zmian w stylach CSS dla szablonów Simple i Minimal. {% endblock %}

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

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

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órego wolisz używać.

Uwaga

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

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

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órego wolisz używać.

Uwaga

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

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

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órego wolisz używać.

Uwaga

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