【解説つき】Shopifyの商品ページにサイズ表をノーコードで作成する方法

Shopifyの商品ページにサイズ表をノーコードで作成する方法

Shopifyの商品ページに、商品ごとにそれぞれ固有のサイズ表を作成・表示させたくありませんか?

この記事では、Shopifyでアプリを使用せずにメタフィールドを活用することで、ノーコードでサイズ表を自由に作成して商品ページに表示させる方法を紹介します。

※当記事の内容を利用する場合は、利用規約が適用されます。

CONTENTS

完成形はこちら

まず、結論としてのアウトプットをスクショでご覧ください。

サイズ表の例1

Shopify商品管理画面のメタフィールドでサイズ表の内容を指定して…
(こちらの例はシャツを想定しています。)

このように、商品ページにはHTMLのTableタグによってサイズ表が出力されます。

サイズ表の例2

先ほどと同様に、別のShopify商品管理画面のメタフィールドで異なる内容を指定します。
(こちらの例はパンツを想定しています。)

今後は、商品ページに同じくHTMLのTableタグによってパンツのサイズ表が出力されます。

実現するための方法

上記のサイズ表生成機能を実現するための方法を紹介します。

必要なもの

今後のストア運用でノーコードでサイズ表を更新するために、初回だけは下記の①メタフィールドの設定 ②HTML・Liquidによるコーディングが必要です。
Liquidは、Shopify独自のプログラミング言語です。

①メタフィールドの設定

次に紹介するコードを使用する場合は、メタフィールドのネームスペース・キーは下記画像と同様に設定してください。
また、メタフィールドの形式は「単一行のテキスト(リスト)」を指定してください。

②HTML・Liquidによるコーディング

こちらが、上記のメタフィールドの入力によって動的にHTMLのTableタグでサイズ表を生成するコードです。
上記と同様のメタフィールド設定であれば、そのまま使用できます。

※HTMLとLiquidが混在してインデントに違和感がありますが、ご容赦ください…
※表のレイアウトは、CSSで調整してください。

<table>
{% assign sizeloop = 0 %} 
{% for size_title in product.metafields.custom.size_title.value %}
    {% if  forloop.index == 1 %}
    <thead>
        <tr>
            <th>size</th>
            {% for size_size in product.metafields.custom.size_size.value %}
            <th>{{ size_size }}</th>
            {% endfor %}
        </tr>
    </thead>
    {% endif %}
    {% if  forloop.index == 1 %}
    <tbody>
    {% endif %}
        <tr>
            <th>{{ size_title }}</th>
            {% for size_contents in product.metafields.custom.size_contents.value offset: sizeloop limit:1 %}
            {% assign size_content = size_contents | split: ',' %}
                {% for size_num in size_content %}
                 <td>{{ size_num }}</td>
                {% endfor %}
            {% assign sizeloop = sizeloop | plus : 1 %} 
        </tr>
            {% endfor %}
{% endfor %}
    </tbody>
</table>

詳しい解説

ここからは、上記で紹介した「必要なもの」を詳しく解説します。

メタフィールドの解説

product.metafields.custom.size_title

サイズの大きさ(区分)です。

product.metafields.custom.size_size

サイズの計測箇所です。

product.metafields.custom.size_contents

サイズの数値です。
ポイントは、サイズの計測箇所に応じて1つのリスト・サイズの大きさに応じてコンマ区切りで数値を入力することです。

HTML・Liquidによるコードの解説

上記で紹介したコードを2分割して解説します。

前半
<table>
{% assign sizeloop = 0 %} 
{% for size_title in product.metafields.custom.size_title.value %}
    {% if  forloop.index == 1 %}
    <thead>
        <tr>
            <th>size</th>
            {% for size_size in product.metafields.custom.size_size.value %}
            <th>{{ size_size }}</th>
            {% endfor %}
        </tr>
    </thead>
    {% endif %}
{% assign sizeloop = 0 %} 

sizeloopは、後にサイズの数値を一行ずつ出力するためのカウンタです。

{% for size_title in product.metafields.custom.size_title.value %}

このfor文で、サイズの計測箇所の数に応じた行数の表を生成します。

{% if  forloop.index == 1 %}
    <thead>
        <tr>
            <th>size</th>
            {% for size_size in product.metafields.custom.size_size.value %}
            <th>{{ size_size }}</th>
            {% endfor %}
        </tr>
    </thead>
    {% endif %}

最初のループだけ<thead>タグを出力し、サイズの大きさ(S,M,L…)のヘッダ行を作成します。

後半
{% if  forloop.index == 1 %}
    <tbody>
{% endif %}
        <tr>
            <th>{{ size_title }}</th>
            {% for size_contents in product.metafields.custom.size_contents.value offset: sizeloop limit:1 %}
            {% assign size_content = size_contents | split: ',' %}
                {% for size_num in size_content %}
                 <td>{{ size_num }}</td>
                {% endfor %}
            {% assign sizeloop = sizeloop | plus : 1 %} 
        </tr>
            {% endfor %}
{% endfor %}
    </tbody>
</table>
{% if  forloop.index == 1 %}
    <tbody>
{% endif %}

混乱しそうですが、以降の内容を<tbody>タグに収めたいので最初のループだけ実行します。

{% for size_contents in product.metafields.custom.size_contents.value offset: sizeloop limit:1 %}

ここがポイントです!
limit:1によって、for文は1回のみ実行されます。つまり、サイズの数値を1行分だけ取り出す処理となります。

{% assign size_content = size_contents | split: ',' %}
    {% for size_num in size_content %}
       <td>{{ size_num }}</td>
       {% endfor %}

ここもポイントです!
上記で1行だけ取り出したsize_contentsには、”66,68,70,72″といった形式で数値が格納されているので、| split: ','によってカンマ区切りで配列を生成しています。
そして、<td>{{ size_num }}</td> によって配列に格納された数値を順番に出力しています。

{% assign sizeloop = sizeloop | plus : 1 %} 

上記で1行分のサイズ表を出力したら、sizeloop のカウンタに1を加算します。

【参考】アプリを使用した実現方法

Shopifyはアプリで手軽に機能を拡張できる点が嬉しいですが、その分ランニングコストが発生してしまいます。
商品ページにサイズ表を生成できるアプリは複数存在し、Shopify App Storeで「size chart」と検索すると見つけることができます。
無料で利用できると記載があるアプリも存在しますが、実際にはサイズ表の種類・数などに制限があり、将来的には有料プランを利用する必要が出てくる可能性があります。

当記事で紹介した内容であれば、初回の作業のみで永久的にランニングコストをかけずに商品ページにサイズ表を自由に表示ができるようになります。

まとめ

この記事では、Shopifyの商品管理ページからノーコードで情報を入力することで、アプリを使用せずにサイズ表を自由に作成して商品ページに表示させる方法を紹介しました。

Liquidでストアをカスタマイズすることで、ランニングコストを削減しながら機能を拡張することが可能となります。

紹介内容について、ご不明な点がありましたらお気軽にご連絡ください。

SOUKLについて
運用を見据えた使いやすいEC

Shopify構築・カスタマイズ承ります。

SOUKLでは、Shopify専門のエンジニアが
お客様に直接対応させていただきます。
中間マージンが発生しない、コストを抑えた構築が強みです。

Buy Me a Coffee

CONTENTS