Lägg till en storlekstabell på produktsidor

Varning

Vintage-teman är inte tillgängliga i temabutiken. Dessa teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis Vintage-teman får inte uppdateringar utöver säkerhetsfixar.

Observera

Om du använder ett gratis tema från Shopify kan du kanske kontakta Shopify-support för att få hjälp med denna handledning. Det tar 15 minuter i designtid. För mer information, se Support för teman.

Observera

Denna anpassning är för Shopifys vintageteman och gäller inte teman för webbutik 2.0.

• Hitta temats arkitekturversion
• Utforska temaanpassningar för Online Store 2.0

Om du säljer klädartiklar som kräver att kunderna känner till sin storlek innan de gör ett köp kan du lägga till en anpassad storlekstabell på din produktsida.

Alla produkter som kräver hänvisning till storlekstabellen måste ha ett alternativ för storlek:

Varning! Den här handledningen fungerar inte för Express-temat utan ytterligare kod.

Du kan behöva justera CSS för tabellen beroende på tema.

Dessutom är storlekstabellerna inte mottagliga för alla enheter. De kanske inte ryms på sidan på mobila enheter om för många kolumner med information läggs till.

Skapa en sida för storlekstabell

Dator

1. Från din Shopify admin går du till Webbshop > sidor.

iPhone

1. Från Shopify appen, klicka på Butik.
2. Tryck på Online-butik i avsnittet Försäljningskanaler.
3. Klicka på Sidor.

Android

1. Från Shopify appen, klicka på Butik.
2. Tryck på Online-butik i avsnittet Försäljningskanaler.
3. Klicka på Sidor.

1. Klicka på Lägg till sida.

2. Ange en sidotitel.

• Om du vill skapa en storlekstabell som visas över hela webbplatsen anger du Size Chart för sidotiteln. I avsnittet Förhandsgranskning av sökmotorlistning ska sidans URL sluta med /size-chart.
• Om du vill skapa en tabell som endast visas för produkter från en viss säljare anger du namnet på den säljaren följt av Size Chart.
  Till exempel, om din säljare heter Great Owls anger du Great Owls Size Chart för sidotiteln. I avsnittet Förhandsgranskning av sökmotorlistning ska sidans URL sluta med /great-owls-size-chart.
• Om du vill skapa en tabell som endast visas för en viss typ av produkt anger du produkttypen följt av Size Chart.
  Om du till exempel vill visa en storlekstabell som är specifik för skor anger du Shoes Size Chart för sidotiteln. I avsnittet Förhandsgranskning av sökmotorlistning ska sidans URL sluta med /shoes-size-chart.

1. I rutan Innehåll skapar du en tabell som innehåller information för din storlekstabell. Anpassa tabellen enligt dina önskemål:

2. Se till att sidan är inställd till Synlig i avsnittet Synlighet.

3. Klicka på Spara.

Navigera till kodredigeraren

Dator

1. Från din Shopify-admin går du till Webbshop > Teman.

2. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

iPhone

1. Från Shopify-appen klickar du på Butik.

2. Tryck på Webbshop i avsnittet Försäljningskanaler.

3. Tryck på Hantera teman.

4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

Android

1. Från Shopify-appen klickar du på Butik.

2. Tryck på Webbshop i avsnittet Försäljningskanaler.

3. Tryck på Hantera teman.

4. Hitta det tema du vill redigera, klicka på knappen ... för att öppna åtgärdsmenyn och klicka sedan på Redigera kod.

Välj något av följande och skapa ett fragment för storlekstabell

Site wide

OBS! Om du väljer Över hela sidan visas storlekstabellen på alla produktsidor som har ett alternativ för Storlek.

Skapa ett fragment för storlekstabell

1. Klicka på Lägg till en ny snippet i katalogen Snippets.

2. Döp ditt fragment till size-chart och klicka på Skapa fragment:

3. Kopiera följande till ditt 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>

Obs! Det finns vissa ändringar som måste göras i CSS-stylingen för temat Simple och temat Minimal.

Använd den här koden om du använder temat Simple:

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

Använd följande kod om du använder temat Minimal:

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

Lägg till fragmentet för storlekstabell i din theme.liquid

1. I katalogen Layout klickar du för att öppna din theme.liquid-fil.

2. Leta efter den avslutande </body>-taggen. Precis ovanför den avslutande </body>-taggen klistrar du in följande kod:

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

Lägg till en knapp för Storlekstabell

1. I katalogen Avsnitt klickar du för att öppna din product-template.liquid-fil eller product.liquid-fil om du inte har en product-template.liquid-fil.

2. Klistra in följande kod ovanför knappen Lägg till i varukorgen:

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

Knappen Lägg till i varukorgen börjar vanligtvis med något som <button type="submit" name="add". Om butikens verksamhetsspråk inte är engelska ersätter du See Size Chart med den text som du föredrar att använda.

OBS! I temat Narrative måste du infoga ovanstående kod i product-form.liquid-filen som finns i katalogen Fragment

Product type

OBS! Om du väljer Produkttyp visas storlekstabellen på alla produktsidor som har ett alternativ för Storlek och den angivna produkttypen.

Skapa ett fragment för storlekstabell

1. Klicka på Lägg till en ny snippet i katalogen Snippets.

2. Döp ditt fragment till size-chart och klicka på Skapa fragment:

3. Kopiera följande till ditt 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>

Obs! Det finns vissa ändringar som måste göras i CSS-stylingen för temat Simple och temat Minimal.

Om du använder temat Simple ska du byta från .trigger-pop-up till höger ovanför </style> med den här koden:

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

Om du använder temat Minimal lägger du till följande kod ovanför sluttaggen </style>:

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

Lägg till fragmentet för storlekstabell i din theme.liquid

1. I katalogen Layout klickar du för att öppna din theme.liquid-fil.

2. Leta efter den avslutande </body>-taggen. Precis ovanför den avslutande </body>-taggen klistrar du in följande 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 %}

Lägg till en knapp för Storlekstabell

1. I katalogen Avsnitt klickar du för att öppna din product-template.liquid-fil eller product.liquid-fil om du inte har en product-template.liquid-fil.

2. Klistra in följande kod ovanför knappen Lägg till i varukorgen:

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

Knappen Lägg till i varukorgen börjar vanligtvis med något som <button type="submit" name="add". Om butikens verksamhetsspråk inte är engelska ersätter du See Size Chart med den text som du föredrar att använda.

OBS! I temat Narrative måste du infoga koden ovan inom product-form.liquid-filen som finns i katalogen Fragment.

Product vendor

OBS! Om du väljer Produktsäljare visas Storlekstabellen på alla produktsidor som har ett alternativ för Storlek och specifik produktsäljare.

Skapa ett fragment för storlekstabell

1. Klicka på Lägg till en ny snippet i katalogen Snippets.

2. Döp ditt fragment till size-chart och klicka på Skapa fragment:

3. Kopiera följande till ditt 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>

Obs! Det finns vissa ändringar som måste göras i CSS-stylingen för temat Simple och temat Minimal.

Om du använder temat Simple ska du byta från .trigger-pop-up till höger ovanför </style> med den här koden:

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

Om du använder temat Minimal lägger du till följande kod ovanför sluttaggen </style>:

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

Lägg till fragmentet för storlekstabell i din theme.liquid

1. I katalogen Layout klickar du för att öppna din theme.liquid-fil.

2. Leta efter den avslutande </body>-taggen. Precis ovanför den avslutande </body>-taggen klistrar du in följande 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 %}

Lägg till en knapp för Storlekstabell

1. I katalogen Avsnitt klickar du för att öppna din product-template.liquid-fil eller product.liquid-fil om du inte har en product-template.liquid-fil.

2. Klistra in följande kod ovanför knappen Lägg till i varukorgen:

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

Knappen Lägg till i varukorgen börjar vanligtvis med något som <button type="submit" name="add". Om butikens verksamhetsspråk inte är engelska ersätter du See Size Chart med den text som du föredrar att använda.

OBS! I temat Narrative måste du infoga koden ovan inom product-form.liquid-filen som finns i katalogen Fragment.