【Shopifyで使用できるテンプレート有り】メタフィールドを使用して変動値の表を作成する方法
はじめに
皆様のストアはコンバージョン率を上げるために必要な対策ができていますでしょうか？
顧客が求める情報を的確に提示することは、ECサイトの売上を大きく左右します。
特に、商品の詳細な仕様や特性を分かりやすく伝えることは、購入の後押しにも繋がります。
そこで、サイズやスペックなど、商品によって変動する情報は、表形式で整理することで格段に見やすくなります。
今回の記事では、ストアの売上を上げるための施策として、Shopifyのメタフィールドを活用し、変動値を効率的に表で表示する方法をテンプレート付きでご紹介します！
メタフィールドとは？
Shopifyのメタフィールドは、商品やコレクション、顧客などに“独自の追加情報”を保存できるカスタムフィールド機能です。
メタフィールドについてもっと詳しく知りたい方は、詳しく紹介している記事も合わせてご確認ください！
|
【該当記事】 |
メタフィールドを使って表を表示する
では早速、表の作成方法についての手順をご紹介いたします。
↑こちらが今回作成する表の完成イメージです。
画面キャプチャを見ながらご一緒に作成してみてください！
手順①メタフィールドの定義
まずは表に表示させたい項目に対する、メタフィールドを設定します。
今回はアパレル商品の商品詳細を記載する表と仮定して以下の項目を追加します。
・サイズ
・素材
・原産国
・色
・注意事項
・その他
例としてサイズのメタフィールドを定義する場合のキャプチャを添付します。
Shopifyの管理画面の「設定」から「カスタムデータ」にページ遷移
>メタフィールドの定義の「商品」ページへ遷移
右上の「定義を追加する」ボタンから商品のメタフィールド定義を追加
遷移先ページにて、以下の項目を設定
名前：メタフィールドの表示名として、Shopify管理画面内でスタッフがこのメタフィールドを識別するために使用するわかりやすい名前を入力
ネームスペースとキー：メタフィールドの一意な識別子として、システムがこのメタフィールドをプログラム的に識別するために使用する文字列を入力
説明：メタフィールドの目的や使い方に関する補足情報を入力
タイプを選択：「1行テキスト」を選択（短いテキストを入力できます。商品名、著者名、簡単な説明などに使用される項目）
メタフィールドは、必要な項目分全て作成してください。
手順②テーマにカスタムliquidのセクヨンを追加
今回作成する表は、カスタムliquidにコードを入力する必要がございます。
その準備として、まずはテーマの好きな箇所に、liquidを入力できるセクションを配置します。
手順③カスタムLiquidにコードを入力
実際に使用するコードは以下です。
テンプレートとしてご利用いただくことも可能です。
※画面キャプチャではDawnを使用しておりますが、他のテーマでは同じ表示とならない可能性もございます。あらかじめご了承ください。
【Liquidコード】
| <table class="specs-table"> <tbody> <tr> <th>サイズ</th> <td>{{ product.metafields.custom.product_size}}</td> <th>素材</th> <td>{{ product.metafields.custom.product_materials}</td> </tr> <tr> <th>原産国</th> <td>{{ product.metafields.custom.product_country_of_origin}</td> <th>色</th> <td>{{ product.metafields.custom.product_color}}</td> </tr> <tr> <th>注意事項</th> <td>{{ product.metafields.custom.product_attentions}</td> <th>その他</th> <td>{{ product.metafields.custom.product_other}</td> </tr> </tbody> </table> |
コードの詳細は以下の通りです。
<table> タグ:
-
<table class="specs-table">: これはHTMLのテーブル要素の開始タグです。class="specs-table"は、このテーブルに適用するCSSスタイルを指定するためのクラス名です。
このクラス名を使用して表のデザイン（罫線、フォント、配置など）をCSSで調整できます。
<tbody> タグ:
-
<tbody>: これはHTMLの表のボディ（内容）部分を定義するタグです。
実際のデータ行（商品の仕様情報）はこの中に記述します。
<tr> タグ:
-
<tr>: これはHTMLの表の行（table row）を表すタグです。
テーブル内の情報を横方向にグループ化します。<tr>開始タグと</tr>終了タグの中にある情報は横に配置されます。
<th> タグ:
-
<th>: これはHTMLの表の見出しを表すタグです。
このコードでは、表示する仕様の項目名（例：「サイズ」「素材」「原産国」「色」「注意事項」「その他」）として使用されます。
<td> タグ:
-
<td>: これはHTMLの表の商品の仕様の値が記述されます。
このコードでは、各<th>の直後の<td>と、各行の4番目の<td>に、Liquidの構文{{ product.metafields.custom.属性名 }}を用いて、Shopifyのメタフィールドから取得した商品の属性値が表示されます。
Liquidの構文 {{ product.metafields.custom.属性名 }}:
-
{{ ... }}: これはShopifyのテンプレート言語であるLiquidの出力タグです。
このタグで囲まれた内容は、Shopifyのデータに基づいて動的に出力されます。 -
product: これはShopifyのProductオブジェクトを表します。
現在の表示している商品の情報にアクセスするために使用されます。 -
metafields: これはProductオブジェクトのプロパティで、商品に紐付けられたメタフィールドのコレクションを含んでいます。 -
custom: これはメタフィールドのネームスペースです。 -
.属性名: これは、特定のメタフィールドのキー（key）を表します。
例）.product_size:customネームスペース内のproduct_sizeというキーを持つメタフィールドの値（商品のサイズ）を取得します。
上記のコードを、手順②で配置したカスタムliquidで入力してください。
この時点ではまだ表の形をしていないため、CSSの入力が必要です。
手順④カスタムCSSを入力
表のデザインはストアよって変わってくるかと思います。
そのため、以下のCSSは参考となります。
【カスタムCSS】
| .specs-table { width: 90%; border-collapse: collapse; border: 2px solid #ccc; font-size: 14px; color: #191919; margin-top: 1em; margin: 0 auto; } .specs-table th, .specs-table td { border: 1px solid #ccc; padding: 14px 14px; text-align: left; vertical-align: top; font-weight: bold; } .specs-table th { background-color: #f7f7f7; font-weight: normal; white-space: nowrap; width: 20%; } |
.specs-table :
-
border: 2px solid #ccc;: テーブル全体に、太さ2ピクセル、実線（solid）、色#ccc（薄いグレー）の境界線を設定します。
.specs-table th, .specs-table td :
このCSSは、.specs-table クラスを持つテーブル内の <th> 要素と <td> 要素の両方に適用されます。
-
border: 1px solid #ccc;: セル（見出しとデータ）の周囲に、太さ1ピクセル、実線（solid）、色#ccc（薄いグレー）の境界線を設定します。
.specs-table th :
このCSSは、.specs-table クラスを持つテーブル内の <th> 要素（テーブルの見出しセル） のみ に適用されます。
-
background-color: #f7f7f7;: 見出しの背景色を#f7f7f7（薄いグレー）に設定します。これにより、見出し行がデータ行と区別しやすくなります。
CSSまで入力したら、これで商品ページに変動値の表を作成できました！
まとめ
最後までお読みいただきありがとうございます！
今回は、メタフィールドを使用して、商品ページに変動値の表を配置する方法についてご紹介しました。
ちょっと工夫をするだけで、ストアは改善され、コンバージョン率の向上が期待できます！
今後もすぐに活用できるようなTipsを更新してまいりますので、ぜひチェックしてください。
Popular articles
