Ürün sayfalarına beden çizelgesi ekleme

Dikkat

Vintage temalar Shopify Tema Mağazası'nda bulunmaz.Bu temalar, Shopify'ın Online Store 2.0 temalarında yer alan özellikleri içermez ve güvenlik düzeltmelerinin dışında güncelleme almaz.

Not

Shopify'ın ücretsiz bir temasını kullanıyorsanız bu eğitimle ilgili yardım almak için Shopify Destek ekibi ile iletişime geçebilirsiniz. 15 dakikalık tasarım süresi gerekir. Daha fazla bilgi edinmek için Temalar için destek bölümüne bakın.

Not

Bu özelleştirme, vintage Shopify temaları içindir ve Online Store 2.0 temalarına uygulanmaz.

• Temanızın mimari sürümünü öğrenin
• Online Store 2.0 tema özelleştirmelerini keşfedin

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:

Dikkat

Bu eğitim, ek kod olmadan Express teması için çalışmaz.

Temaya bağlı olarak çizelge için CSS dosyasını ayarlamanız gerekebilir.

Ayrıca beden tabloları tüm cihazlara duyarlı değildir. Çok fazla bilgi sütunu eklenmesi durumunda mobil cihazlarda sayfanın kenarından kesilebilirler.

Beden çizelgesi sayfası oluşturma

Masaüstü

1. Shopify yöneticinizden Online Mağaza > Sayfalar'a gidin.
2. Sayfa ekle'ye tıklayın.

3. Sayfa başlığı girin.

   • Site çapında görünen bir beden çizelgesi oluşturmak istiyorsanız sayfa başlığı için 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.

4. İçerik kutusunda, beden çizelgesi bilgilerinizi içeren bir tablo oluşturun. Tabloyu, görünmesini istediğiniz şekilde özelleştirin:

   

5. Görünürlük bölümünde, sayfanın Görünür olarak ayarlandığından emin olun.

6. Kayıtyap ' a tıklayın.

iPhone

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Sayfalar'a dokunun.
4. Sayfa ekle'ye tıklayın.

5. Sayfa başlığı girin.

   • Site çapında görünen bir beden çizelgesi oluşturmak istiyorsanız sayfa başlığı için 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.

6. İçerik kutusunda, beden çizelgesi bilgilerinizi içeren bir tablo oluşturun. Tabloyu, görünmesini istediğiniz şekilde özelleştirin:

   

7. Görünürlük bölümünde, sayfanın Görünür olarak ayarlandığından emin olun.

8. Kayıtyap ' a tıklayın.

Android

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Sayfalar'a dokunun.
4. Sayfa ekle'ye tıklayın.

5. Sayfa başlığı girin.

   • Site çapında görünen bir beden çizelgesi oluşturmak istiyorsanız sayfa başlığı için 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.

6. İçerik kutusunda, beden çizelgesi bilgilerinizi içeren bir tablo oluşturun. Tabloyu, görünmesini istediğiniz şekilde özelleştirin:

   

7. Görünürlük bölümünde, sayfanın Görünür olarak ayarlandığından emin olun.

8. Kayıtyap ' a tıklayın.

Kod Düzenleyicisi'ne gidin

Masaüstü

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

iPhone

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Temaları Yönet' e dokunun.
4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.

Android

1. Shopify uygulamasında, … düğmesine dokunun.
2. Satış Kanalları bölümünde online mağaza' ya dokunun.
3. Temaları Yönet' e dokunun.
4. Düzenlemek istediğiniz temayı bulun, işlemler menüsünü açmak için … düğmesine, ardından Kodu düzenle'ye tıklayın.

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

Site-wide

Not

Site çapında seçeneğini belirlendiğinde Beden Çizelgesi, Beden seçeneğinin bulunduğu tüm ürün sayfalarında görüntülenir.

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

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:

3. 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;
    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 ve Minimal temaları için CSS stilinde bazı değişikliklerin yapılması gerekir. {% endblock %}

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

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

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

1. Düzen dizininde, theme.liquid dosyasını açın.
2. 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

1. Bölümler dizininde, product-template.liquid dosyanızı açın; product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
2. 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 <button type="submit" name="add" gibi bir ifadeyle başlar. Mağazanızın dili İngilizce değilse See Size Chart ifadesini, kullanmak istediğiniz metinle değiştirin.

product-form.liquid Narrative temasında, yukarıdaki kodu Parçacıklar dizininde bulunan

Not

dosyasının içine yapıştırmanız gerekir.

Type

Not

Ürün türü seçildiğinde Beden Çizelgesi, Beden seçeneğinin ve belirtilen ürün türünün bulunduğu tüm ürün sayfalarında görüntülenir.

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

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:

3. 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;
    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>

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 şununla 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 şu 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

1. Düzen dizininde, theme.liquid dosyasını açın.
2. 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

1. Bölümler dizininde, product-template.liquid dosyanızı açın; product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
2. 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 %}

Sepete ekle düğmesi genellikle <button type="submit" name="add" gibi bir ifadeyle başlar. Mağazanızın dili İngilizce değilse See Size Chart ifadesini, kullanmak istediğiniz metinle değiştirin.

product-form.liquid Narrative temasında, yukarıdaki kodu Parçacıklar dizininde bulunan

Not

dosyasının içine yapıştırmanız gerekir.

Vendor

Not

Ürün Satıcısı seçildiğinde Beden Çizelgesi, Beden seçeneğinin ve belirtilen ürün satıcısının bulunduğu tüm ürün sayfalarında görüntülenir.

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

1. Snippets (Parçacıklar) dizininde Yeni bir parçacık ekle'ye tıklayın.

2. Parçacığınızı size-chart olarak adlandırın ve Parçacık oluştur'a tıklayın:

3. 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;
    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>

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 şununla 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 şu 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

1. Düzen dizininde, theme.liquid dosyasını açın.
2. 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

1. Bölümler dizininde, product-template.liquid dosyanızı açın; product-template.liquid dosyanız yoksa product.liquid dosyasını açın.
2. 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 %}

Sepete ekle düğmesi genellikle <button type="submit" name="add" gibi bir ifadeyle başlar. Mağazanızın dili İngilizce değilse See Size Chart ifadesini, kullanmak istediğiniz metinle değiştirin.

product-form.liquid Narrative temasında, yukarıdaki kodu Parçacıklar dizininde bulunan

Not

dosyasının içine yapıştırmanız gerekir.