Ürün sayfalarına beden çizelgesi ekleme

Bu sayfanın yazdırılma zamanı: Apr 02, 2023. Geçerli sürüm için https://help.shopify.com/tr/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/add-size-chart adresini ziyaret edin.

Müşterilerin satın almadan önce bedenlerini bilmelerini gerektiren giyim ürünleri satıyorsanız, ürün sayfanıza özel bir beden çizelgesi ekleyebilirsiniz.

Beden çizelgesine referans gerektiren tüm ürünlerin bir Beden seçeneğine sahip olması gerekir:

Beden çizelgesi sayfası oluşturma

Shopify yöneticinizden Online Mağaza > Sayfalar'a gidin.

Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Sayfalar'a dokunun.

Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Sayfalar'a dokunun.

Sayfa ekle'ye tıklayın.
Sayfa başlığı girin.

Site çapında görünen bir beden çizelgesi oluşturmak için sayfa başlığına Size Chart girin. Arama motoru liste kaydı önizlemesi bölümünde, sayfanın URL'si /size-chart ile bitmelidir.
Yalnızca belirli bir satıcının ürünlerinde görünen bir çizelge oluşturmak istiyorsanız satıcı ismini ve ardından Size Chart girin.
Örneğin satıcınız Büyük Owls ise sayfa başlığına Great Owls Size Chart girin. Arama motoru liste kaydı önizlemesi bölümünde, sayfanın URL'si /great-owls-size-chart ile bitmelidir.
Yalnızca belirli bir ürün türünde görünen bir çizelge oluşturmak istiyorsanız ürün türünü ve ardından Size Chart girin.
Örneğin, ayakkabılara özgü bir beden çizelgesi göstermek istiyorsanız sayfa başlığına Shoes Size Chart girin. Arama motoru liste kaydı önizlemesi bölümünde, sayfanın URL'si /shoes-size-chart ile bitmelidir.

İçerik kutusunda, beden çizelgesi bilginizi içeren bir tablo oluşturun. Tabloyu, istediğiniz gibi olacak şekilde özelleştirin:
Görünürlük bölümünde, sayfanın Görünür olarak ayarlandığından emin olun.
Kayıtyap ' a tıklayın.

Kod Düzenleyicisi'ne gidin

Shopify yöneticinizden Online Mağaza > Temalar'a gidin.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.

Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.

Shopify uygulamasındanMağaza'ya dokunun.
Satış kanalları bölümünde Online Mağaza'ya dokunun.
Temaları yönet'e dokunun.
Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için ... düğmesine ve ardından Kodu düzenle'ye tıklayın.

Aşağıdakilerden birini seçin ve bir beden çizelgesi parçacığı oluşturun

Not: Site çapında seçeneğini seçmek, Boyut seçeneği bulunan tüm ürün sayfalarında Beden Çizelgesini gösterir.

Beden çizelgesi parçacığı oluşturma

Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:
Aşağıdaki kodu size-chart parçacığınıza kopyalayın:

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

Not: Simple ve Minimal temaları için CSS stilinde bazı değişikliklerin yapılması gerekir.

Simple temasını kullanıyorsanız şu kodu kullanın:

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

Minimal temasını kullanıyorsanız aşağıdaki kodu kullanın:

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

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Düzen dizininde, theme.liquid dosyasını açın.
Kapatma </body> etiketini bulun. Kapatma </body> etiketinin hemen üzerine aşağıdaki kodu yapıştırın:

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

Beden çizelgesi düğmesi ekleme

Bölümler dizininde, product-template.liquid dosyanızı açın; eğer product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
Sepete ekle düğmesinin üstüne aşağıdaki kodu yapıştırın:

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

Sepete ekle düğmesi genellikle aşağıdakine benzer bir <button type="submit" name="add" kod ile başlamaktadır. Mağazanızın dili İngilizce değilse See Size Chart kodunu istediğiniz metin ile değiştirin.

Not: Narrative temasında, Parçacıklar dizininde bulunan product-form.liquid dosyasının içine yukarıdaki kodu eklemeniz gerekir

Not: Ürün türünü seçmek, Beden seçeneğine ve belirtilen ürün türüne sahip tüm ürün sayfalarında Beden Çizelgesini görüntüler.

Beden çizelgesi parçacığı oluşturma

Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:
Aşağıdaki kodu, size-chart parçacığınıza kopyalayın:

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

Not: Simple ve Minimal temaları için CSS stilinde bazı değişikliklerin yapılması gerekir.

Simple temasını kullanıyorsanız .trigger-pop-up yerine </style> öğesinin üstündeki kodu şunla değiştirin:

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

Minimal temasını kullanıyorsanız, kapatma </style> etiketinin üzerine aşağıdaki kodu yapıştırın:

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

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Düzen dizininde, theme.liquid dosyasını açın.
Kapatma </body> etiketini bulun. Kapatma </body> etiketinin hemen üzerine aşağıdaki kodu yapıştırın:

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

Beden çizelgesi düğmesi ekleme

Bölümler dizininde, product-template.liquid dosyanızı açın; eğer product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
Sepete ekle düğmesinin üstüne aşağıdaki kodu yapıştırın:

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

Not: Narrative temasında, yukarıdaki kodu Parçacıklar dizininde bulunan product-form.liquid dosyası içerisine yapıştırmanız gerekmektedir.

Not: Ürün Satıcısını seçmek, Beden seçeneğine ve belirtilen ürün satıcısına sahip tüm ürün sayfalarında Beden Çizelgesini görüntüler.

Beden çizelgesi parçacığı oluşturma

Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.
Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:
Aşağıdaki kodu, size-chart parçacığınıza kopyalayın:

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

Not: Simple ve Minimal temaları için CSS stilinde bazı değişikliklerin yapılması gerekir.

Simple temasını kullanıyorsanız .trigger-pop-up yerine </style> öğesinin üstündeki kodu şunla değiştirin:

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

Minimal temasını kullanıyorsanız, kapatma </style> etiketinin üzerine aşağıdaki kodu yapıştırın:

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

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Düzen dizininde, theme.liquid dosyasını açın.
Kapatma </body> etiketini bulun. Kapatma </body> etiketinin hemen üzerine aşağıdaki kodu yapıştırın:

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

Beden çizelgesi düğmesi ekleme

Bölümler dizininde, product-template.liquid dosyanızı açın; eğer product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
Sepete ekle düğmesinin üstüne aşağıdaki kodu yapıştırın:

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

Not: Narrative temasında, yukarıdaki kodu Parçacıklar dizininde bulunan product-form.liquid dosyası içerisine yapıştırmanız gerekmektedir.

Ürün sayfalarına beden çizelgesi ekleme

Beden çizelgesi sayfası oluşturma

Kod Düzenleyicisi'ne gidin

Aşağıdakilerden birini seçin ve bir beden çizelgesi parçacığı oluşturun

Beden çizelgesi parçacığı oluşturma

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Beden çizelgesi düğmesi ekleme

Beden çizelgesi parçacığı oluşturma

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Beden çizelgesi düğmesi ekleme

Beden çizelgesi parçacığı oluşturma

Beden çizelgesi parçacığını theme.liquid temanıza ekleme

Beden çizelgesi düğmesi ekleme

Shopify ile satış yapmaya hazır mısınız?