Kokotaulukon lisääminen tuotesivuille

Tämä sivu on tulostettu Apr 24, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart.

Jos myyt vaatteita, jotka edellyttävät, että asiakas tietää oman kokonsa ennen ostamista, voit lisätä tuotesivullesi mukautetun kokotaulukon.

Kaikissa tuotteissa, jotka edellyttävät viittausta kokotaulukkoon, on oltava Koko-vaihtoehto:

size option example

Tällä sivulla

Kokotaulukkosivun luominen

  1. Siirry Shopify Administa kohtaan Verkkokauppa > Sivut.
  2. Klikkaa Lisää sivu.

  3. Syötä sivun otsikko.

    • Jos haluat luoda koko sivuston laajuisesti näkyvän kokotaulukon, kirjoita sivun otsikoksi Size Chart. Hakukoneiden luettelon esikatselu* -osiossa sivun URL-osoitteen loppuosan tulisi olla /size-chart.
    • Jos haluat luoda taulukon, joka näkyy vain tietyn myyjän tuotteissa, syötä myyjän nimi ja sen perään Size Chart.
      Jos esimerkiksi myyjäsi nimi on Great Owls, syötä sivun otsikoksi Great Owls Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /great-owls-size-chart.
    • Jos haluat luoda kaavion, joka näkyy vain tietyssä tuotetyypissä, syötä tuotetyyppi ja sen perään Size Chart.
      Jos esimerkiksi haluat näyttää kenkien kokotaulukon, syötä sivun otsikoksi Shoes Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /shoes-size-chart.

  4. Luo taulukko Sisältö-ruutuun, joka sisältää kokotaulukkosi tiedot. Mukauta taulukkoa niin, että se näyttää halutunlaiselta:

    Customizing the size chart table

  5. Varmista Näkyvyys-osiossa, että sivu on asetettu näkyväksi.

  6. Klikkaa Tallenna.

  1. Napauta Shopify-sovelluksessa …-painiketta.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Sivut.
  4. Klikkaa Lisää sivu.

  5. Syötä sivun otsikko.

    • Jos haluat luoda koko sivuston laajuisesti näkyvän kokotaulukon, kirjoita sivun otsikoksi Size Chart. Hakukoneiden luettelon esikatselu* -osiossa sivun URL-osoitteen loppuosan tulisi olla /size-chart.
    • Jos haluat luoda taulukon, joka näkyy vain tietyn myyjän tuotteissa, syötä myyjän nimi ja sen perään Size Chart.
      Jos esimerkiksi myyjäsi nimi on Great Owls, syötä sivun otsikoksi Great Owls Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /great-owls-size-chart.
    • Jos haluat luoda kaavion, joka näkyy vain tietyssä tuotetyypissä, syötä tuotetyyppi ja sen perään Size Chart.
      Jos esimerkiksi haluat näyttää kenkien kokotaulukon, syötä sivun otsikoksi Shoes Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /shoes-size-chart.

  6. Luo taulukko Sisältö-ruutuun, joka sisältää kokotaulukkosi tiedot. Mukauta taulukkoa niin, että se näyttää halutunlaiselta:

    Customizing the size chart table

  7. Varmista Näkyvyys-osiossa, että sivu on asetettu näkyväksi.

  8. Klikkaa Tallenna.

  1. Napauta Shopify-sovelluksessa …-painiketta.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Sivut.
  4. Klikkaa Lisää sivu.

  5. Syötä sivun otsikko.

    • Jos haluat luoda koko sivuston laajuisesti näkyvän kokotaulukon, kirjoita sivun otsikoksi Size Chart. Hakukoneiden luettelon esikatselu* -osiossa sivun URL-osoitteen loppuosan tulisi olla /size-chart.
    • Jos haluat luoda taulukon, joka näkyy vain tietyn myyjän tuotteissa, syötä myyjän nimi ja sen perään Size Chart.
      Jos esimerkiksi myyjäsi nimi on Great Owls, syötä sivun otsikoksi Great Owls Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /great-owls-size-chart.
    • Jos haluat luoda kaavion, joka näkyy vain tietyssä tuotetyypissä, syötä tuotetyyppi ja sen perään Size Chart.
      Jos esimerkiksi haluat näyttää kenkien kokotaulukon, syötä sivun otsikoksi Shoes Size Chart. Hakukoneiden luettelon esikatselu ‑osiossa sivun URL-osoitteen loppuosan tulisi olla /shoes-size-chart.

  6. Luo taulukko Sisältö-ruutuun, joka sisältää kokotaulukkosi tiedot. Mukauta taulukkoa niin, että se näyttää halutunlaiselta:

    Customizing the size chart table

  7. Varmista Näkyvyys-osiossa, että sivu on asetettu näkyväksi.

  8. Klikkaa Tallenna.

Siirry koodieditoriin

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  1. Napauta Shopify-sovelluksessa …-painiketta.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallitse teemoja.
  4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  1. Napauta Shopify-sovelluksessa …-painiketta.
  2. Napauta myyntikanavat -osiossa Verkkokauppa.
  3. Napauta Hallitse teemoja.
  4. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.

Valitse jokin seuraavista ja luo kokotaulukon koodinpätkä

Kokotaulukon koodinpätkän luominen

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Anna koodinpätkällesi nimeksi size-chart ja valitse Luo koodinpätkä:

  3. Kopioi seuraava size-chart koodinpätkääsi 

<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" %} Simple- ja Minimal-teemojen CSS-muotoiluun on tehtävä muutamia muutoksia. {% endblock %}

Jos käytät Simple-teemaa, käytä tätä koodia:

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

Jos käytät Minimal-teemaa, käytä seuraavaa koodia:

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

Kokotaulukon koodinpätkän lisääminen theme.liquid-tiedostoosi

  1. Klikkaa Asettelu-hakemistossa theme.liquid-tiedostoa avataksesi sen.
  2. Etsi elementin </body> lopputunniste. Liitä seuraava koodi lopputunnisteen </body> yläpuolelle: 
{% if request.page_type == 'product' %}
    {% if product.options contains 'Size' %}
        {% render 'size-chart' %}
    {% endif %}
{% endif %}

Kokotaulukko-painikkeen lisääminen

  1. Avaa Osiot-hakemistossa klikkaamalla product-template.liquid- tai product.liquid-tiedosto, jos sinulla ei ole product-template.liquid-tiedostoa.
  2. Liitä seuraava koodi Lisää ostoskoriin ‑painikkeen yläpuolelle: 
{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">See Size Chart</a>
{% endif %}

Lisää ostoskoriin ‑painike alkaa tavallisesti muodossa <button type="submit" name="add" tai vastaavaan tapaan. Jos kauppasi toimintakieli ei ole englanti, korvaa silloin See Size Chart tekstillä, jota haluat käyttää.

Kokotaulukon koodinpätkän luominen

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Anna koodinpätkällesi nimeksi size-chart ja valitse Luo koodinpätkä:

  3. Kopioi seuraava koodinpätkääsi 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>

Jos käytät Simple-teemaa, korvaa kohdan .trigger-pop-up ja kohdan </style> välinen sisältö seuraavalla koodilla: 

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

Jos käytät Minimal-teemaa, lisää seuraava koodi lopputunnisteen </style> yläpuolelle: 

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

Kokotaulukon koodinpätkän lisääminen theme.liquid-tiedostoosi

  1. Klikkaa Asettelu-hakemistossa theme.liquid-tiedostoa avataksesi sen.
  2. Etsi elementin </body> lopputunniste. Liitä seuraava koodi lopputunnisteen </body> yläpuolelle: 
{% 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 %}

Kokotaulukko-painikkeen lisääminen

  1. Avaa Osiot-hakemistossa klikkaamalla product-template.liquid- tai product.liquid-tiedosto, jos sinulla ei ole product-template.liquid-tiedostoa.
  2. Liitä seuraava koodi Lisää ostoskoriin ‑painikkeen yläpuolelle: 
{% 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 %}

Lisää ostoskoriin ‑painike alkaa tavallisesti muodossa <button type="submit" name="add" tai vastaavaan tapaan. Jos kauppasi toimintakieli ei ole englanti, korvaa silloin See Size Chart tekstillä, jota haluat käyttää.

Kokotaulukon koodinpätkän luominen

  1. klikkaa Koodinpätkät-hakemistossa Lisää uusi koodinpätkä.

  2. Anna koodinpätkällesi nimeksi size-chart ja valitse Luo koodinpätkä:

  3. Kopioi seuraava koodinpätkääsi 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>

Jos käytät Simple-teemaa, korvaa kohdan .trigger-pop-up ja kohdan </style> välinen sisältö seuraavalla koodilla: 

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

Jos käytät Minimal-teemaa, lisää seuraava koodi lopputunnisteen </style> yläpuolelle: 

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

Kokotaulukon koodinpätkän lisääminen theme.liquid-tiedostoosi

  1. Klikkaa Asettelu-hakemistossa theme.liquid-tiedostoa avataksesi sen.
  2. Etsi elementin </body> lopputunniste. Liitä seuraava koodi lopputunnisteen </body> yläpuolelle: 
{% 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 %}

Kokotaulukko-painikkeen lisääminen

  1. Avaa Osiot-hakemistossa klikkaamalla product-template.liquid- tai product.liquid-tiedosto, jos sinulla ei ole product-template.liquid-tiedostoa.
  2. Liitä seuraava koodi Lisää ostoskoriin ‑painikkeen yläpuolelle: 
{% 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 %}

Lisää ostoskoriin ‑painike alkaa tavallisesti muodossa <button type="submit" name="add" tai vastaavaan tapaan. Jos kauppasi toimintakieli ei ole englanti, korvaa silloin See Size Chart tekstillä, jota haluat käyttää.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi