將尺寸表新增至產品頁面

注意

Shopify 佈景主題商店不提供舊版佈景主題。這些主題不含 Shopify Online Store 2.0 佈景主題的功能，只能接收安全性修復的相關更新。

備註

若您使用的是 Shopify 提供的免費佈景主題，您或許就能聯絡 Shopify 支援服務，取得有關本教學課程的協助。需耗時 15 分鐘的設計時間。如要深入瞭解，請參閱 佈景主題支援服務.

備註

此自訂內容僅適用於舊版 Shopify 佈景主題，且不適用於 Online Store 2.0 佈景主題。

• 瞭解您佈景主題的架構版本
• 探索 Online Store 2.0 佈景主題的自訂內容

如果您銷售的服飾品項需要顧客在購買前先瞭解他們自己的尺寸，則可以在產品頁面新增自訂尺寸表。

所有需要參考尺寸表的商品都必須有尺寸選項：

注意

如果沒有額外的程式碼，此教學課程無法用於 Express 佈景主題。

您可能會發現您需要根據佈景主題調整圖表的 CSS。

此外，尺寸表表格無法在所有裝置皆有回應。如果新增的資訊欄過多，則可能在行動裝置上的頁面側邊被裁剪掉。

建立尺寸表頁面

電腦版

1. 從 Shopify 管理介面中，前往「線上商店 > 頁面」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「頁面」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。
2. 在銷售管道畫面上，點一下「線上商店」。
3. 點一下「頁面」。

1. 按一下「新增頁面」。

2. 輸入頁面標題。

• 如果要建立顯示於全網站範圍的尺寸表，請將頁面標題輸入為 Size Chart。在「搜尋引擎產品資訊預覽」區段，頁面的網址結尾應為 /size-chart。
• 如果要建立僅會顯示於特定廠商產品上的圖表，請輸入廠商名稱，然後輸入 Size Chart。
  舉例而言，如果您的廠商名稱為 Great Owls，則請將頁面標題輸入為 Great Owls Size Chart。在「搜尋引擎產品資訊預覽」區段，頁面的網址結尾應為 /great-owls-size-chart。
• 如果要建立僅會顯示於特定產品類型的圖表，請輸入產品類型，然後輸入 Size Chart。
  舉例而言，如果您想要顯示鞋類專用尺寸表，則請將頁面標題輸入為 Shoes Size Chart。在「搜尋引擎產品資訊預覽」區段，頁面的網址結尾應為 /shoes-size-chart。

1. 在「內容」方塊中，建立一個包含尺寸表資訊的表格。自訂表格以按照您想要的方式顯示：

2. 在「可見性」區段，請確認頁面已設為「公開」。

3. 點擊「儲存」。

導覽至程式碼編輯器

電腦版

1. 在 Shopify 管理介面，前往「線上商店」>「佈景主題」。

2. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

iPhone

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

Android

1. 在 Shopify 應用程式中，點一下「商店」。

2. 在銷售管道畫面上，點一下「線上商店」。

3. 點一下「管理佈景主題」。

4. 找到要編輯的佈景主題，按一下「...」按鈕以開啟動作選單，然後點擊「編輯程式碼」。

選擇下列其中一項，然後建立尺寸表程式碼片段

Site wide

備註

選擇「全網站」，系統將在所有有尺寸選項的產品頁面顯示尺寸表

建立尺寸表程式碼片段

1. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。

2. 將程式碼片段命名為 size-chart，然後點擊「建立程式碼片段」：

3. 將下列內容複製到您的 size-chart 程式碼片段中：

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

備註

需要對 Simple 和 Minimal 佈景主題的 CSS 樣式進行一些變更。

如果您使用的是 Simple 佈景主題，請使用此程式碼：

<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 佈景主題，請使用下列程式碼：

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

將尺寸表程式碼片段新增至 theme.liquid

1. 在「版面配置」目錄中，點擊以開啟 theme.liquid 檔案。

2. 找到結束標籤 </body>。在結束標籤 </body> 正上方，貼上下列程式碼：

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

新增「尺寸表」按鈕

1. 在「區段」目錄中，點擊以開啟 product-template.liquid 檔案，或者如果沒有 product-template.liquid 檔案，則開啟 product.liquid 檔案。

2. 在「加入購物車」按鈕上方貼上下列程式碼：

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

「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"」。如果您商店的營運語言並非英文，請將 See Size Chart 取代為您偏好使用的文字。

備註

在 Narrative 佈景主題中，您必須將上述程式碼插入至位於「程式碼片段」目錄的 product-form.liquid 檔案中。

Product type

備註

選擇產品類型會在所有具有尺寸選項的產品頁面，顯示尺寸表和指定的產品類型。

建立尺寸表程式碼片段

1. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。

2. 將程式碼片段命名為 size-chart，然後點擊「建立程式碼片段」：

3. 將下列內容複製到您的 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;
  }
  .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>

備註

需要對 Simple 和 Minimal 佈景主題的 CSS 樣式進行一些變更。

如果您使用 Simple 佈景主題，請將 </style> 右上方的 .trigger-pop-up 取代為此程式碼：

.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 佈景主題，請將下列程式碼新增至結束標籤 </style> 上方：

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

將尺寸表程式碼片段新增至 theme.liquid

1. 在「版面配置」目錄中，點擊以開啟 theme.liquid 檔案。

2. 找到結束標籤 </body>。在結束標籤 </body> 正上方，貼上下列程式碼：

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

新增「尺寸表」按鈕

1. 在「區段」目錄中，點擊以開啟 product-template.liquid 檔案，或者如果沒有 product-template.liquid 檔案，則開啟 product.liquid 檔案。

2. 在「加入購物車」按鈕上方貼上下列程式碼：

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

「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"」。如果您商店的營運語言並非英文，請將 See Size Chart 取代為您偏好使用的文字。

備註

在 Narrative 佈景主題中，您必須將上述程式碼插入至位於「程式碼片段」目錄的 product-form.liquid 檔案中。

Product vendor

備註

選擇產品廠商會在所有具有尺寸選項的產品頁面，顯示尺寸表和指定的產品廠商。

建立尺寸表程式碼片段

1. 在「程式碼片段」目錄中，按一下「新增程式碼片段」。

2. 將程式碼片段命名為 size-chart，然後點擊「建立程式碼片段」：

3. 將下列內容複製到您的 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;
  }
  .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>

備註

需要對 Simple 和 Minimal 佈景主題的 CSS 樣式進行一些變更。

如果您使用 Simple 佈景主題，請將 </style> 右上方的 .trigger-pop-up 取代為此程式碼：

.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 佈景主題，請將下列程式碼新增至結束標籤 </style> 上方：

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

將尺寸表程式碼片段新增至 theme.liquid

1. 在「版面配置」目錄中，點擊以開啟 theme.liquid 檔案。

2. 找到結束標籤 </body>。在結束標籤 </body> 正上方，貼上下列程式碼：

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

新增「尺寸表」按鈕

1. 在「區段」目錄中，點擊以開啟 product-template.liquid 檔案，或者如果沒有 product-template.liquid 檔案，則開啟 product.liquid 檔案。

2. 在「加入購物車」按鈕上方貼上下列程式碼：

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

「加入購物車」按鈕開頭通常類似「<button type="submit" name="add"」。如果您商店的營運語言並非英文，請將 See Size Chart 取代為您偏好使用的文字。

備註

在 Narrative 佈景主題中，您必須將上述程式碼插入至位於「程式碼片段」目錄的 product-form.liquid 檔案中。