Legg til et størrelseskart på produktsider

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer–.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

Hvis du selger klesvarer der kundene må finne sin størrelse før de gjør et kjøp, kan du legge til et tilpasset størrelseskart på produktsiden.

Alle produkter som krever en referanse til størrelseskartet må ha et Størrelse-alternativ:

Merk

Denne opplæringen fungerer ikke for Express-temaet uten tilleggskode.

Det kan hende du må justere CSS-koden for kartet, avhengig av tema.

Tabellene med størrelseskart er dessuten ikke responsive på alle enheter. De kan bli kuttet av langs siden på mobile enheter hvis det legges til for mange kolonner med informasjon.

Opprette en side med størrelseskart

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

iPhone

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Sider.

Android

1. Fra Shopify-appen trykker du på Butikk.
2. I Salgskanal-seksjonen trykker du på Nettbutikk.
3. Trykk på Sider.

1. Trykk på Legg til side.

2. Angi en sidetittel.

• Hvis du vil opprette et størrelseskart som vises på hele nettstedet, angir du /size-chart som sidetittel. I seksjonen Forhåndsvisning av søkemotoroppføring skal URL-adressen til siden slutte med Size Chart.
• Hvis du vil opprette et kart som bare vises på produkter fra en bestemt leverandør, angir du navnet på leverandøren etterfulgt av Size Chart.
  Hvis leverandøren din for eksempel heter Great Owls, angir du Great Owls Size Chart som sidetittel. I seksjonen Forhåndsvisning av søkemotoroppføring skal URL-adressen til siden slutte med /great-owls-size-chart.
• Hvis du vil opprette et kart som bare vises på bestemte produkttyper, angir du produkttypen etterfulgt av Size Chart.
  Hvis du for eksempel vil vise et størrelseskart som er spesifikt for sko, angir du Shoes Size Chart som sidetittel. I seksjonen Forhåndsvisning av søkemotoroppføring skal URL-adressen til siden slutte med /shoes-size-chart.

1. I Innhold-boksen oppretter du en tabell som inneholder informasjonen til størrelseskartet. Tilpass tabellen slik at den får det utseendet du ønsker.

2. I Synlighet-seksjonen må du sjekke at siden er satt til Synlig.

3. Klikk på Lagre.

Gå til koderedigeringsprogrammet

Datamaskin

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.

2. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

iPhone

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Android

1. Fra Shopify-appen trykker du på Butikk.

2. I Salgskanal-seksjonen trykker du på Nettbutikk.

3. Trykk på Redigere temaer.

4. Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.

Velg en av følgende, og opprett en kodebit for størrelseskart

Site wide

Merk

Ved å velge hele nettstedet vises størrelseskartet på alle produktsider som har et Størrelse-alternativ.

Opprette en kodebit for størrelseskart

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

2. Gi kodebiten navnet size-chart, og klikk på Opprett kodebit:

3. Kopier følgende inn i size-chart-kodebiten:

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

Merk

Det er noen endringer som må gjøres i CSS-stilsettet for temaene Simple og Minimal.

Hvis du bruker temaet Simple bruker du 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 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 bruker temaet Minimal bruker du 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>

Legg til kodebiten for størrelseskartet i theme.liquid-filen

1. I Layout-katalogen klikker du for å åpne theme.liquid-filen.

2. Finn den avsluttende </body>-taggen. Rett over den avsluttende </body>-taggen limer du inn følgende kode:

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

Legg til en knapp for Størrelseskart

1. I Seksjoner-katalogen klikker du for å åpne product-template.liquid-filen, eller product.liquid-filen hvis du ikke har en product-template.liquid-fil.

2. Lim inn følgende kode over Legg i handlekurv-knappen:

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

Legg i handlekurv-knappen begynner vanligvis med noe sånt som <button type="submit" name="add". Hvis butikkens driftsspråk ikke er engelsk, erstatter du See Size Chart med teksten du ønsker å bruke.

Merk

I temaet Narrative må du sette inn koden ovenfor inne i product-form.liquid-filen som er plassert i Kodebiter-katalogen

Product type

Merk

Hvis Produkttype velges, vil Størrelseskart vises på alle produktsider som har et Størrelse-alternativ og den angitte produkttypen.

Opprette en kodebit for størrelseskart

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

2. Gi kodebiten navnet size-chart, og klikk på Opprett kodebit:

3. Kopier følgende inn i size-chart-kodebiten:

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

Merk

Det er noen endringer som må gjøres i CSS-stilsettet for temaene Simple og Minimal.

Hvis du bruker temaet Simple, skift ut fra .trigger-pop-up til høyre over </style> med denne 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%;
  }
}

Hvis du bruker temaet Minimal legger du til følgende kode over den avsluttende </style>-taggen:

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

Legg til kodebiten for størrelseskartet i theme.liquid-filen

1. I Layout-katalogen klikker du for å åpne theme.liquid-filen.

2. Finn den avsluttende </body>-taggen. Rett over den avsluttende </body>-taggen limer du inn følgende kode:

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

Legg til en knapp for Størrelseskart

1. I Seksjoner-katalogen klikker du for å åpne product-template.liquid-filen, eller product.liquid-filen hvis du ikke har en product-template.liquid-fil.

2. Lim inn følgende kode over Legg i handlekurv-knappen:

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

Legg i handlekurv-knappen begynner vanligvis med noe sånt som <button type="submit" name="add". Hvis butikkens driftsspråk ikke er engelsk, erstatter du See Size Chart med teksten du ønsker å bruke.

Merk

I temaet Narrative må du sette inn koden over i product-form.liquid-filen som er plassert i Kodebiter-katalogen.

Product vendor

Merk

Ved å velge Produktleverandør vises Størrelseskart på alle produktsider med et Størrelse-alternativ og den angitte produktleverandøren.

Opprette en kodebit for størrelseskart

1. I Utdrag-katalogen klikker du på Legg til et nytt utdrag.

2. Gi kodebiten navnet size-chart, og klikk på Opprett kodebit:

3. Kopier følgende inn i size-chart-kodebiten:

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

Merk

Det er noen endringer som må gjøres i CSS-stilsettet for temaene Simple og Minimal.

Hvis du bruker temaet Simple, skift ut fra .trigger-pop-up til høyre over </style> med denne 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%;
  }
}

Hvis du bruker temaet Minimal legger du til følgende kode over den avsluttende </style>-taggen:

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

Legg til kodebiten for størrelseskartet i theme.liquid-filen

1. I Layout-katalogen klikker du for å åpne theme.liquid-filen.

2. Finn den avsluttende </body>-taggen. Rett over den avsluttende </body>-taggen limer du inn følgende kode:

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

Legg til en knapp for Størrelseskart

1. I Seksjoner-katalogen klikker du for å åpne product-template.liquid-filen, eller product.liquid-filen hvis du ikke har en product-template.liquid-fil.

2. Lim inn følgende kode over Legg i handlekurv-knappen:

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

Legg i handlekurv-knappen begynner vanligvis med noe sånt som <button type="submit" name="add". Hvis butikkens driftsspråk ikke er engelsk, erstatter du See Size Chart med teksten du ønsker å bruke.

Merk

I temaet Narrative må du sette inn koden over i product-form.liquid-filen som er plassert i Kodebiter-katalogen.