商品情報の管理をスマートに！魅力的な商品の表現を増やすShopifyメタフィールド活用ガイド
Shopifyで商品ページに商品の説明を記載するときに、すべて説明欄に記載していませんか？
説明欄は自由に記載できる反面、いろいろな商品情報を記載する際の入力忘れや表示のばらつきがおきてしまいます。
例えば、ケーキ屋さんのECサイトを構築する場合、商品登録の際に大きさ、原材料、賞味期限、保存方法など多くの情報を記載する必要があります。その際に、説明欄に記入すると下の図のように商品ごとに順番が違う、もしくは記入し忘れが起きる懸念があります。
またDawnのようなテーマによっては商品画像横にしか商品の説明情報を配置できない可能性があります。
そういった場合はメタフィールドの利用をオススメします。
メタフィールドとは
メタフィールドはShopify ストアにカスタムデータを追加するための強力なツールです。
商品におけるShopifyの基本的なデータモデルには商品価格、商品画像、バリエーションなどが含まれますが、メタフィールドを使うことで、それらのモデルを超えたデータを保存し、表示することができます。上記の例では、内容量、原材料、賞味期限、保存方法をそれぞれ別々に入力データとして商品に含ませることができます。
またメタフィールドのデータタイプは、テキストから数値、他商品のリファレンスなど異なるユースケースのさまざまな値に対応しており、あらゆる情報を入力できます。
詳しくタイプが知りたい方はこちら
| コンテンツタイプ | 説明 | リスト可 | 例 |
|---|---|---|---|
| 単一行のテキスト | 改行なしのプレーンテキストが入力できます。 | ◯ | 短いメモや告知を追加 |
| 複数行のテキスト | 改行ありのプレーンテキストが入力できます。 | × | 配送メモや返品ポリシーを追加 |
| リッチテキスト | 改行ありのテキスト、および見出しスタイル、太字、斜体、下線などのインラインスタイルをサポートしています。 | × | 商品に関する、長めのストーリーを追加 |
| 整数 | 整数値を入力できます。 | ◯ | 書籍のページ数を追加 |
| 小数 | 整数は最大 13 桁まで、小数は最大 9 桁までの小数値を入力できます。 | ◯ | ダイヤモンドのカラット数を追加 |
| 日付 | タイムゾーンなしの日付値が入力できます。 | ◯ | 商品の消費期限、注文配達日、またはお客様の生年月日を追加 |
| 日付と時刻 | タイムゾーンありの日付と時間が入力できます。 | ◯ | イベントの公開日または商品の発売日を追加 |
| 寸法 | 整数と小数の両方をサポートしています。寸法では、指標またはインペリアル測定単位のいずれかが使用されます。 | ◯ | 箱の高さを追加 |
| 量 | 整数と小数がサポートされています。 | ◯ | パッケージ容量を追加 |
| 重量 | 整数と小数がサポートされています。 | ◯ | 商品や原材料の重量を追加 |
| true または false | 条件が true または false かが選択できるチェックボックスが配置されます。 | × | アイテムに刻印できるかどうかを追加 |
| 色 | RGB 値が入力できます。 | ◯ | 商品の色を保存し、商品ページの背景を設定 |
| 評価 | 定義の設定方法に応じて、指定された記数法に沿った小数点以下の値がサポートされています。 | ◯ | 商品のオーディエンススコアまたは星評価を追加 |
| URL | HTTP、HTTPS、mailto: の URL がサポートされています。 | ◯ | 特定のウェブサイトでホストされている書籍レビューへのリンクを追加 |
| 金額 | 整数と小数の両方をサポートしています。通貨コードがストア通貨と一致している必要があります。 | × | 仕入れ費用や倉庫への配送費用など、商品にかかる費用の詳細を追跡 |
| リンク | アンカーテキストとURLを入力できます。URLはHTTP、HTTPS、mailto: がサポートされています。 | ◯ | 特定のウェブサイトでホストされている書籍レビューへのリンクボタンを追加 |
| JSON | 構造化データソースが必要なJSON データをサポートしています。 | × | 原材料の表など、それぞれの列で異なる商品を扱う仕様表を追加 |
| 会社参照 | 顧客の会社にリンクすることができます。 | ◯ | 導入事例を表示 |
| お客様参照 | 顧客にリンクすることができます。 | ◯ | 特定のお客様だけの情報表示 |
| 商品参照 | 既存の商品にリンクすることができます。 | ◯ | 関連商品を追加 |
| コレクション参照 | 既存のコレクションにリンクすることができます。 | ◯ | ファッション商品の「トータルコーディネート」コレクションをオンラインストアに含めます。 |
| 商品バリエーション参照 | 既存の商品バリエーションにリンクすることができます。 | ◯ | おすすめ商品バリエーションを追加 |
| ファイル参照 | コンテンツに登録されているファイル情報を選択できます。 | ◯ | 添付文書の PDF ファイルを追加 |
| メタオブジェクトの参照 | 単一または複数のメタオブジェクトエントリーへのリンクをサポートします。 | ◯ | 選択した商品ページにカスタムインフルエンサープロフィールを追加して表示 |
| ページ参照 | 既存のページにリンクすることができます。 | ◯ | オンラインストアの商品に関するポリシーページまたは詳細なサポートガイドを挿入 |
| 複合の参照 | あらゆる参照タイプをサポートしています。 | ◯ | 動的ランディングページを作成 |
メタフィールドの設定方法
メタフィールドは、[設定] > [カスタムデータ] から設定できます。
カスタムデータの定義の中から「商品」をクリックしてください。
メタフィールドは商品のほかに、商品バリエーション、コレクション、顧客、ブログなどにも作成することができます。
今回は上記の例のケーキ屋さんに習って情報にオススメポイントをメタフィールドで追加します。
「定義を追加する」をクリックすると、以下のように表示されます。
それぞれの入力欄について説明します。
- 名前：管理画面で表示されます。わかりやすい名前にしましょう。
例： おすすめポイント - ネームスペースとキー：システム上の識別子。ストアフロントのコード上でアクセスする際に使います。
例： custom.recommended-points - 説明：メタフィールド設定の説明を入力できます。表示箇所を入力しておくと後から分かりやすくなります。
例： おすすめポイントを説明する。 - タイプを選択する：メタフィールドのタイプを選択できます。
例： 今回は「複数行のテキスト」を選択します。
設定後に「保存」ボタンをクリックします。
次に商品にメタフィールドの値を入力します。
メタフィールドの設定を保存し、商品管理ページに行くと、ページ下部にメタフィールド「おすすめポイント」が追加されています。
今回は「しっかりしたクリームチーズと甘酸っぱい苺がマッチした自慢の苺ケーキです。」と入力します。
テーマで利用
設定したメタフィールドの値をストア上で表示するためテーマのカスタマイズを行います。
[オンラインストア] > [テーマ] > [カスタマイズ] からテーマカスタマイズ画面に移動します。
商品ページへ移動し、サイドバーから「テキスト付き画像」セクションを選択します（使用しているテーマによってはセクション名が違う可能性があります）。
見出しを「おすすめポイント」とし、テキストブロックのテキストを消し「動的ソースの接続」をクリックすると先程追加したメタフィールドの名前が表示されるのでクリックしましょう。
クリックすると以下の画像のように、先程設定した、値が表示されます。
同様に、おすすめポイント画像のメタフィールドをタイプ「ファイル」で作成し、商品登録で画像を登録します。
「テキスト付き画像」セクションの画像選択にて「動的ソースの接続」をクリックし、おすすめポイント画像を選択します。
選択すると下の画像のように、先程設定した画像が表示されます。
以上がテーマでの利用方法となります。
コードを編集してメタフィールドを表示
今回であれば、コード上で product.metafields.custom.recommended-points を使うことで値を取り出すことができます。
以下のコードは「おすすめポイント」を記入している場合のみ、値を表示するコードです。
{% if product.metafields.custom.recommended-points %}
<p>{{ product.metafields.custom.recommended-points | newline_to_br }}</p>
{% endif %}
またメタフィールドのタイプでファイルを選択し画像を表示したい場合は、以下のコードになります。
{% if product.metafields.custom.recommended-points-image %}
{{ product.metafields.custom.recommended-points-image | image_url: height: 200 | image_tag: loading: "lazy", class: "c_img"}}
{% endif %}
商品ページへ移動し、サイドバーから「カスタマイズされたLiquid」セクションを選択します。
上記のLiquidコードを入力すると下の画像のようにメタフィールドの情報を表示できます。
LiquidコードではHTMLの記述ができますので、styleタグにより表示を整えていく必要があります。
ちなみに単一行のテキストのようなリスト形式が選べるタイプでリスト形式にした場合は以下のようなコードでリスト表示することができます。
{% if product.metafields.custom.recommended-points != blank %}
<ul>
{% for recommended-point in product.metafields.custom.recommended-points.value %}
<li>{{ recommended-point }}</li>
{%- endfor %}
</ul>
{% endif %}
まとめ
今回は Shopify のメタフィールドについて解説しました。
メタフィールドを使うことで、商品、コレクション、ブログなどにさまざまなカスタムデータをもたせることができます。このカスタムデータを利用することで、登録時の入力忘れを防ぎ、ECサイトの表現の幅を広げることができます。
ぜひ、お試しください。
株式会社Tsuzucleでは、Shopifyに関する技術サポートを提供しています。ご相談は、下記のリンクよりお気軽にお問い合わせください。
お問い合わせ：https://tsuzucle.com/pages/contact
メールアドレス：info@tsuzucle.com
Xアカウント：https://x.com/tsuzucle
Discussion