コピペでできる！Shopifyでサイズ表をつくる方法を丁寧に解説
この記事の所要時間：7分
アパレルショップや家具ショップにおいて、商品のサイズはユーザーが知りたいとても重要な情報です。
商品のサイズが分かりづらいとユーザーは商品の購入を躊躇し、また商品を購入した後にサイズの不一致が判明すると返品にも繋がります。
このようなことを考え、アパレルなどのネットショップでは商品選択をサポートするために、サイズ表を設置する必要があります。
そこで今回は、Shopifyで商品ページにサイズ表を設置する方法(コード編集)について、非エンジニアの方でもできるようにわかりやすく丁寧に解説します。
本記事を読めば、見やすいサイズ表をあなたのショップに表示することができ、購入率の向上と返品率の減少が期待できます。
※今回ご紹介するカスタマイズ方法は、Online Store 2.0テーマ(Dawnなど)では適用されません。
※テーマによってCSSを調整する必要があるので注意してください。
商品ページにサイズ表を追加する
Shopifyは、商品ページの詳細欄にサイズ表を追加することができます。
そのためShopifyで構築されたネットショップのうち、アパレルショップのほとんどは商品ページでサイズ表を活用しています。
では、商品ページにサイズ表を追加する方法を5つのステップで説明します。
1. 商品にバリエーションを設定
今回ご紹介するカスタマイズを行うと、サイズのバリエーション(種類)がある商品の商品ページに「サイズ表を確認する」というボタンが表示され、クリックすると以下の画像のようにサイズ表のポップアップが表示されます。
こちらのサイズ確認ボタンは、サイズのバリエーションがある商品にのみ表示されるので、まずは対象の商品にバリエーションを設定します。
Shopifyの管理画面から「商品管理 > すべての商品 > 商品を追加する」をクリックし、商品登録を行います。
ここで必ず「サイズ」のオプションを設定してください。
今回は、オプション名に「サイズ」と入力しており、このオプションがある商品にのみサイズ表を設置します。
商品のステータスが「アクティブ」であることを確認し、「保存する」をクリックして完了です。
2. サイズ表のページを作成
Shopifyの管理画面から「オンラインストア > ページ > ページを追加」をクリックします。
ページタイトルを入力し、コンテンツ欄では表を追加してサイズ表を作成します。
テーマテンプレートは「デフォルトのページ」を選択します。
検索結果のプレビューの欄で「ウェブサイトのSEOを編集する」をクリックし、URLとハンドルの欄に「size-chart」と入力します。
最後に「保存する」をクリックします。
3. サイズ表のスニペットを作成
次に、作成したサイズ表を商品ページに追加するため、スニペットを作成します。
Shopifyの管理画面から「オンラインストア > テーマ > アクション > コードを編集」をクリックします。
今回は、テーマ「Debut」のコードで編集方法を説明します。テーマによってコード内容が多少異なるので注意してください。
「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>最後に「保存する」をクリックして完了です。
※テーマの「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%;
}
}コードの変更をした後は必ず「保存する」をクリックしてください。これでスニペットの作成は完了です。
4. テーマにサイズ表のスニペットを追加
次は、作成したスニペットをテーマに追加します。
「Layout」にある「theme.liquid」をクリックします。
※ここからコードを編集するので、最初に必ず「theme.liquid」を他のファイルに保存してください。
保存ができたら</body>の直前に以下のコードをコピペします。
{% if request.page_type == 'product' %}
{% if product.options contains 'サイズ' %}
{% render 'size-chart' %}
{% endif %}
{% endif %}上記のコード中にある「サイズ」は、商品登録の際に設定したオプション名です。他のオプション名を設定した方は、上記コードのオプション名を書き換えてください。
最後に「保存する」をクリックして完了です。
5. サイズ表ボタンを追加
最後に、作成したサイズ表を商品ページに表示するボタンを設置します。
「Sections」にある「product-template.liquid」をクリックします。「product-template.liquid」のファイルがない場合は、「Templates」にある「product.liquid」をクリックします。
テーマの「Narrative」を使用するの場合は「Snippets」にある「product-form.liquid」で以下と同様のコード編集を行います。
※コードを編集するので、最初に必ず「product-template.liquid」を他のファイルに保存してください。
保存ができたら、ファイル内でカート追加ボタン(以下のコードで始まる)を探します。
<button type=”submit” name=”add”
テーマによって異なりますが、おそらく220行目あたりにあると思います。
そして、カート追加ボタンの直前に以下のコードをコピペします。
{% if product.options contains 'サイズ' %}
<a class="trigger-pop-up btn">サイズ表を確認する</a>
{% endif %}上記のコード中にある「サイズ」は、商品登録の際に設定したオプション名です。他のオプション名を設定した方は、上記コードのオプション名を書き換えてください。
また、コード内の「サイズ表を確認する」はボタンに表示する文字なので、好みの文字に書き換えてください。
最後に「保存する」をクリックして、これですべて完了です。
【最後に】Shopifyアプリでも作成可能
今回はShopifyで商品ページにサイズ表を設置する方法をご紹介しました。
ショップを公開する前に、Shopifyの管理画面からオンラインストアの横にある「目のマーク」をクリックして、プレビューを確認してください。
また他にも「Kiwi Size Chart & Recommender」などのShopifyアプリを活用すると、よりデザイン性が高いサイズ表を作成することができます。
アパレルショップなどではサイズ表がとても重要になります。ぜひShopifyアプリの活用も検討してみてください。
