商品ページにサイズ表を追加する

注意

現在、以前のテーマはテーマストアでは提供されていません。以前のテーマには、ShopifyのOnline Store 2.0テーマに含まれている機能が盛り込まれておらず、セキュリティ修正以外のアップデートは行われません。

メモ

Shopifyの無料テーマを使用している場合は、Shopify サポートに連絡すると、このチュートリアルのサポートを受けることができます。設計には15分かかります。Shopifyデザインポリシーについて詳しくはこちらをご覧ください。

メモ

このカスタマイズは以前のShopifyテーマ向けで、Online Store 2.0のテーマには適用されません。

• 使用しているテーマのアーキテクチャバージョンを確認する
• Online Store 2.0のテーマのカスタマイズについて確認する

お客様が購入前にサイズを知る必要があるアパレルアイテムを販売する場合、商品ページにカスタムサイズ表を追加できます。

サイズ表の参照が必要なすべての商品には、次のような [サイズ] オプションが必要です。

注意

このチュートリアルは、追加のコードがないとExpressテーマでは機能しません。

テーマによっては、表のCSSを調整する必要が生じます。

さらに、サイズ表はすべてのデバイスに対応するわけではありません。サイズ表に情報の多い列があると、モバイルデバイス上でページの端が表示されない可能性があります。

サイズ表のページを作成する

デスクトップ

1. 管理画面からオンラインストア > ページに移動します。
2. ページの追加をクリック

3. ページタイトルを入力します。

   • サイト全体に表示されるサイズ表を作成する場合、ページタイトルをSize Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/size-chartで終わる必要があります。
   • 特定の販売元からの商品にのみ表示される表を作成する場合、販売元の名前の後にSize Chartを入力します。
     たとえば、販売元がGreat Owlsの場合、ページタイトルをGreat Owls Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/great-owls-size-chartで終わる必要があります。
   • 特定のタイプの商品にのみ表示される表を作成する場合、商品タイプの後にSize Chartを入力します
     たとえば、靴専用のサイズ表を表示する場合、ページタイトルをShoes Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/shoes-size-chartで終わる必要があります。

4. [コンテンツ] ボックスでは、サイズ表の情報が記載された表を作成します。表をカスタマイズし、希望する表示となるようにします。

   

5. [公開 / 非公開] セクションでは、ページが [公開] に設定されていることを確認します。

6. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。
4. ページの追加をクリック

5. ページタイトルを入力します。

   • サイト全体に表示されるサイズ表を作成する場合、ページタイトルをSize Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/size-chartで終わる必要があります。
   • 特定の販売元からの商品にのみ表示される表を作成する場合、販売元の名前の後にSize Chartを入力します。
     たとえば、販売元がGreat Owlsの場合、ページタイトルをGreat Owls Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/great-owls-size-chartで終わる必要があります。
   • 特定のタイプの商品にのみ表示される表を作成する場合、商品タイプの後にSize Chartを入力します
     たとえば、靴専用のサイズ表を表示する場合、ページタイトルをShoes Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/shoes-size-chartで終わる必要があります。

6. [コンテンツ] ボックスでは、サイズ表の情報が記載された表を作成します。表をカスタマイズし、希望する表示となるようにします。

   

7. [公開 / 非公開] セクションでは、ページが [公開] に設定されていることを確認します。

8. [保存] をクリックします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。
4. ページの追加をクリック

5. ページタイトルを入力します。

   • サイト全体に表示されるサイズ表を作成する場合、ページタイトルをSize Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/size-chartで終わる必要があります。
   • 特定の販売元からの商品にのみ表示される表を作成する場合、販売元の名前の後にSize Chartを入力します。
     たとえば、販売元がGreat Owlsの場合、ページタイトルをGreat Owls Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/great-owls-size-chartで終わる必要があります。
   • 特定のタイプの商品にのみ表示される表を作成する場合、商品タイプの後にSize Chartを入力します
     たとえば、靴専用のサイズ表を表示する場合、ページタイトルをShoes Size Chartと入力します。[検索結果のプレビュー] セクションでは、ページのURLが/shoes-size-chartで終わる必要があります。

6. [コンテンツ] ボックスでは、サイズ表の情報が記載された表を作成します。表をカスタマイズし、希望する表示となるようにします。

   

7. [公開 / 非公開] セクションでは、ページが [公開] に設定されていることを確認します。

8. [保存] をクリックします。

コードエディタに移動する

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
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;
    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」と「Minimal」のCSSスタイルを変更する必要があります。{% endblock %}

テーマ「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;
    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」を使用している場合は、次のコードを使用します。

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

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ファイルに上記のコードを挿入する必要があります。

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

メモ

テーマ「Simple」と「Minimal」のCSSスタイルを変更する必要があります。

テーマ「Simple」を使用している場合、.trigger-pop-upから</style>の真上までを次のコードに置き換えてください。

.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ファイルに上記のコードを挿入する必要があります。

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

メモ

テーマ「Simple」と「Minimal」のCSSスタイルを変更する必要があります。

テーマ「Simple」を使用している場合、.trigger-pop-upから</style>の真上までを次のコードに置き換えてください。

.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ファイルに上記のコードを挿入する必要があります。