Føj en størrelsesguide til produktsiderne

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Disse temaer har ikke de funktioner, der er inkluderet i Shopifys Webshop 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer ud over sikkerhedsrettelser.

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

Hvis du sælger tøj, som kræver, at kunderne kender deres størrelse, før de foretager et køb, kan du tilføje en tilpasset størrelsesguide på dine produktsider.

Alle produkter, der skal henvise til størrelsesguiden, skal have en valgmulighed for Størrelse:

Advarsel

Denne vejledning virker ikke med Express-temaet uden yderligere kode.

Du skal muligvis justere din CSS efter guide, men dette afhænger af dit tema.

Tabeller med størrelsesguides er ikke dynamiske på alle enheder. De kan beskære siden på mobilenheder, hvis der tilføjes for mange kolonner med informationer.

Sådan opretter du en side med en størrelsesguide

Desktop

1. Gå til Webshop > Sider i din Shopify-administrator.

iPhone

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Sider.

Android

1. Tryk på Butik i Shopify-appen.
2. Tryk på Webshop i afsnittet Salgskanaler.
3. Tryk på Sider.

1. Klik på Tilføj side.

2. Angiv en sidetitel.

• Hvis du vil oprette en størrelsesguide, der vises på tværs af dit website, skal du angive Size Chart som sidetitlen. Sidens webadresse bør slutte med /size-chart i afsnittet Eksempel på søgemaskinefortegnelse.
• Hvis du vil oprette en størrelsesguide, der kun vises på produkter fra en specifik forhandler, kan du angive forhandlerens navn efterfulgt af Size Chart.
  Hvis din forhandler f.eks. hedder Great Owls, skal du angive Great Owls Size Chart som sidetitlen. Sidens webadresse bør slutte med /great-owls-size-chart i afsnittet Eksempel på søgemaskinefortegnelse.
• Hvis du vil oprette en størrelsesguide, der kun vises på en bestemt type produkt, skal du angive produkttypen efterfulgt af Size Chart.
  Hvis du f.eks. vil vise en størrelsesguide for sko, skal du angive Shoes Size Chart som sidetitlen. Sidens webadresse bør slutte med /shoes-size-chart i afsnittet Eksempel på søgemaskinefortegnelse.

1. Opret en tabel i feltet Indhold, som indeholder dine oplysninger til størrelsesguiden. Tilpas tabellen, som du ønsker:

2. Sørg for, at du angiver siden som Synlig i afsnittet Synlighed.

3. Klik på Gem.

Naviger til kodeeditoren

Desktop

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

iPhone

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Android

1. Tryk på Butik i Shopify-appen.

2. Tryk på Webshop i afsnittet Salgskanaler.

3. Tryk på Administrer temaer.

4. Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.

Vælg et af følgende, og opret et kodestykke med en størrelsesguide

Site wide

Bemærk: Hvis du vælger På tværs af websitet, vises størrelsesguiden på alle produktsider med valgmuligheden Størrelse.

Sådan opretter du et kodestykke med en størrelsesguide

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Navngiv dit kodestykke size-chart, og klik på Opret kodestykke:

3. Kopiér følgende til dit size-chart-kodestykke:

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

Bemærk: Der er ændringer, der skal foretages i CSS-formateringen for temaerne Simple og Minimal.

Hvis du bruger temaet Simple, skal du bruge denne kode:

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

Hvis du bruger temaet Minimal, skal du bruge følgende kode:

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

Føj kodestykket for størrelsesguiden til theme.liquid

1. Klik for at åbne din theme.liquid-fil i mappen Layout.

2. Find det afsluttende </body>-tag. Indsæt følgende kode over det afsluttende </body>-tag:

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

Tilføj knappen Størrelsesguide

1. Klik for at åbne din product-template.liquid-fil eller product.liquid-fil (hvis du ikke har en product-template.liquid-fil) i mappen Afsnit.

2. Indsæt følgende kode over knappen Læg i indkøbskurv:

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

Knappen “Læg i indkøbskurv” starter normalt med noget som <button type="submit" name="add". Hvis din butiks driftssprog ikke er engelsk, skal du erstatte See Size Chart med den tekst, du vil foretrække at bruge.

Bemærk: I temaet Narrative skal du indsætte ovenstående kode i product-form.liquid-filen, som findes i mappen Kodestykker

Product type

Bemærk: Hvis du vælger Produkttype, vises størrelsesguiden på alle produktsider med valgmuligheden Størrelse og den angivne produkttype.

Sådan opretter du et kodestykke med en størrelsesguide

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Navngiv dit kodestykke size-chart, og klik på Opret kodestykke:

3. Kopiér følgende til dit size-chart-kodestykke:

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

Bemærk: Der er ændringer, der skal foretages i CSS-formateringen for temaerne Simple og Minimal.

Hvis du bruger temaet Simple, skal du erstatte .trigger-pop-up til højre over </style> med denne kode:

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

Hvis du bruger temaet Minimal, skal du tilføje følgende kode over det afsluttende </style>-tag:

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

Føj kodestykket for størrelsesguiden til theme.liquid

1. Klik for at åbne din theme.liquid-fil i mappen Layout.

2. Find det afsluttende </body>-tag. Indsæt følgende kode over det afsluttende </body>-tag:

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

Tilføj knappen Størrelsesguide

1. Klik for at åbne din product-template.liquid-fil eller product.liquid-fil (hvis du ikke har en product-template.liquid-fil) i mappen Afsnit.

2. Indsæt følgende kode over knappen Læg i indkøbskurv:

{% 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æg i indkøbskurv” starter normalt med noget som <button type="submit" name="add". Hvis din butiks driftssprog ikke er engelsk, skal du erstatte See Size Chart med den tekst, du vil foretrække at bruge.

Bemærk: I temaet Narrative skal du indsætte ovenstående kode i product-form.liquid-filen, som findes i mappen Kodestykker.

Product vendor

Bemærk: Hvis du vælger Produktforhandler, vises Størrelsesdiagram på alle produktsider, der indeholder valgmuligheden valgmuligheden Størrelse og den angivne produktforhandler.

Sådan opretter du et kodestykke med en størrelsesguide

1. Klik på Opret et nyt kodestykke i mappen Kodestykker.

2. Navngiv dit kodestykke size-chart, og klik på Opret kodestykke:

3. Kopiér følgende til dit size-chart-kodestykke:

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

Bemærk: Der er ændringer, der skal foretages i CSS-formateringen for temaerne Simple og Minimal.

Hvis du bruger temaet Simple, skal du erstatte .trigger-pop-up til højre over </style> med denne kode:

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

Hvis du bruger temaet Minimal, skal du tilføje følgende kode over det afsluttende </style>-tag:

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

Føj kodestykket for størrelsesguiden til theme.liquid

1. Klik for at åbne din theme.liquid-fil i mappen Layout.

2. Find det afsluttende </body>-tag. Indsæt følgende kode over det afsluttende </body>-tag:

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

Tilføj knappen Størrelsesguide

1. Klik for at åbne din product-template.liquid-fil eller product.liquid-fil (hvis du ikke har en product-template.liquid-fil) i mappen Afsnit.

2. Indsæt følgende kode over knappen Læg i indkøbskurv:

{% 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æg i indkøbskurv” starter normalt med noget som <button type="submit" name="add". Hvis din butiks driftssprog ikke er engelsk, skal du erstatte See Size Chart med den tekst, du vil foretrække at bruge.

Bemærk: I temaet Narrative skal du indsætte ovenstående kode i product-form.liquid-filen, som findes i mappen Kodestykker.