コピペでできる!Shopifyでサイズ表をつくる方法を丁寧に解説

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る
サムネイル84

この記事の所要時間:5分

アパレルショップや家具ショップにおいて、商品のサイズはユーザーが知りたいとても重要な情報です。

商品のサイズが分かりづらいとユーザーは商品の購入を躊躇し、また商品を購入した後にサイズの不一致が判明すると商品の返品にも繋がります。

このようなことを考え、ネットショップでは商品選択をサポートするためにサイズ表を設置する必要があります。

そこで今回は、Shopifyで商品ページにサイズ表を設置する方法(コード編集)について、非エンジニアでもできるようにわかりやすく丁寧に解説します。

本記事を読めば、見やすいサイズ表をあなたのショップに表示することができ、購入率の向上と返品率の減少が期待できます。

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

Shopifyは、商品ページの詳細欄にサイズ表を追加することができます。

そのためShopifyで構築されたネットショップのうち、アパレルショップのほとんどは商品ページでサイズ表を活用しています。

では、商品ページにサイズ表を追加する方法を4つのステップで説明します。

1. サイズ表のページを作成

Shopifyの管理画面から「オンラインストア > ページ > ページを追加」をクリックします。

Shopifyの管理画面から「オンラインストア > ページ > ページを追加」をクリックします。

ページタイトルを入力し、コンテンツ欄では表を追加してサイズ表を作成します。

ページタイトルを入力し、コンテンツ欄では表を追加してサイズ表を作成します。

テーマテンプレートは「デフォルトページ」を選択します。

検索結果のプレビューでは「ウェブサイトのSEOを編集する」をクリックし、「URLとハンドル」にパーマリンク(わかりやすい英数字)を入力してください。

最後に「保存する」をクリックします。

2. サイズ表のスニペットを作成

次に、作成したサイズ表を商品ページに追加するため、スニペットを作成します。

Shopifyの管理画面から「オンラインストア > テーマ > アクション > コードを編集する」をクリックします。

Shopifyの管理画面から「オンラインストア > テーマ > アクション > コードを編集する」をクリックします。

「Snippets」にある「新しいスニペットを追加する」をクリックします。

ポップアップが表示されるので、名前に「size-chart」と入力して「スニペットを作成する」をクリックします。

そうすると「size-chart.liquid」という空のファイルが作成されるので、以下のコードをそのままコピペします。

<div class="pop-up-modal">
   <div class="pop-up-content">
      <span class="close-button">×</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.0);
  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>

最後に「保存する」をクリックして完了です。

そうすると「size-chart.liquid」という空のファイルが作成されるので、以下のコードをコピペします。最後に「保存する」をクリックして完了です。

※テーマの「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%;
    }
}

コードの変更をした後は必ず「保存する」をクリックしてください。これでスニペットの作成は完了です。

3. テーマにサイズ表のスニペットを追加

次は、作成したスニペットをテーマに追加します。

「Layout」にある「theme.liquid」をクリックします。

※ここからコードを編集するので、最初に必ず「theme.liquid」を他のファイルに保存してください。

保存ができたら</body>の直前に以下のコードをコピペします。

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

最後に「保存する」をクリックして完了です。

「Layout」にある「theme.liquid」をクリックします。最後に「保存する」をクリックして完了です。

4. サイズ表ボタンを追加

最後に、作成したサイズ表を商品ページに表示するボタンを設置します。

「Sections」にある「product-template.liquid」または「product.liquid」をクリックします。

テーマの「Narrative」を使用するの場合は「Snippets」にある「product-form.liquid」で以下と同様のコード編集を行います。

※ここからコードを編集するので、最初に必ず「product-template.liquid」を他のファイルに保存してください。

保存ができたら、カート追加ボタンの直前に以下のコードをコピペします。

{% if product.options contains 'Size' %}
    <a class="trigger-pop-up btn">サイズ表を確認する</a>
{% endif %}

カート追加ボタンのコードは通常

<button type=”submit” name=”add”

や、上記に似たコードで始まります。

また、コード内の「サイズ表を確認する」はボタンに表示する文字なので、好みの文字に書き換えてください。

カート追加ボタンのコードは通常<button type="submit" name="add"や、上記に似たコードで始まります。また、コード内の「サイズ表を確認する」は任意のタイトルに書き換えてください。
(上記の画像は「Debut」のコードです)

最後に「保存する」をクリックして完了です。

【最後に】Shopifyアプリでも作成可能

今回はShopifyで商品ページにサイズ表を設置する方法をご紹介しました。

ショップを公開する前に、Shopifyの管理画面からオンラインストアの横にある「目のマーク」をクリックして、プレビューを確認してください。

今回説明したコード編集は「サイズ選択がある商品」の商品ページで、以下のようにサイズ表を表示することができます。

今回説明したコード編集は「サイズ選択がある商品」のページで、以下のようにサイズ表を表示することができます。

また他にも「Kiwi Size Chart & Recommender」などのShopifyアプリを活用すると、よりデザイン性が高いサイズ表を作成することができます。

アパレルショップなどではサイズ表がとても重要になります。ぜひShopifyアプリの活用も検討してみてください。

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。