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

注意

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

メモ

Shopifyの無料のテーマ を使用している場合、Shopify サポートにこのチュートリアルのサポートを依頼できる可能性があります。設計には15分かかります。詳細については、「テーマのサポート」を参照してください。

メモ

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

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

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

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

注意

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

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

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

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

デスクトップ

1. 管理画面からオンラインストア > ページに移動します。

iPhone

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

Android

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

1. ページの追加をクリック

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

• サイト全体に表示されるサイズ表を作成する場合、ページタイトルを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で終わる必要があります。

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

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

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

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

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。

2. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

iPhone

1. Shopifyアプリから [Store] をタップします。

2. [販売チャネル] セクションで、[オンラインストア] をタップします。

3. [テーマを管理する] をタップします。

4. 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集] をクリックします。

Android

1. Shopifyアプリから [Store] をタップします。

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」を使用している場合、.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ファイルに上記のコードを挿入する必要があります。

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」を使用している場合、.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ファイルに上記のコードを挿入する必要があります。