Shopifyの商品ページにメタフィールドを表示する方法

by Ruka Okuyama

Shopify 2.0では、商品、商品バリアント、コレクションに直接メタフィールドを簡単に追加できます。たとえば、商品に長さ、幅、高さなどを追加することができます。しかし、これらのメタフィールドをストアフロントの商品ページに表示する方法はどうすればよいでしょうか?今回の記事ではメタフィールドの実装方法を紹介します!

Shopify 2.0テーマを使用している場合は、以下の手順に従って、メタフィールド(長さ、幅、高さなど)を商品ページに表示できます:


1. Shopifyの管理画面から、オンラインストア > テーマを選択します。


2. ライブテーマセクションで、カスタマイズを選択します。他のテーマをカスタマイズする場合は、テーマライブラリから選択します。


3. 編集モードで、商品ページに移動します。左サイドバーの「製品情報」タブを探します。


4. 「製品情報」タブから、ブロックを追加して、「テキスト」を選択します。


5. 新しいテキストブロックに、挿入ダイナミックソースアイコンを使用して、一つずつメタフィールドを追加できます。

ビンテージテーマを使ってる場合

ヴィンテージテーマがメタフィールドをサポートしていなかったり、ストアでの表示方法を変更したい場合はどうすればよいでしょうか。その場合、もう一つの簡単な解決策があります:テーマコードを編集することです。少し技術的な知識が必要ですが、数分で完了できます。


手順は以下の通りです:

1. Shopifyの管理画面から、オンラインストア > テーマを選択します。


2. ライブテーマセクションで、アクション > コードを編集を選択します。


3. 左サイドバーで、product.liquidファイルを見つけます。このファイルは、テンプレート、セクション、またはスニペットタブの中にあります。


4. メタフィールドを表示したい位置を見つけたら、以下のコードを挿入します。

metafield

5. 保存をクリックします。これで、メタフィールドが商品ページに正しく表示されます。

まとめ

Shopify 2.0では、商品、商品バリアント、コレクションにメタフィールドを簡単に追加できますし、テーマをカスタマイズしてこれらのメタフィールドを商品ページに表示することも可能です。もしヴィンテージテーマを使用している場合や表示方法を変更したい場合は、テーマコードを編集することで解決できます。この記事の手順に従って設定すれば、メタフィールドを商品ページにスムーズに表示できるでしょう。問題が発生した場合は、Go Ride Repまでお気軽にお問い合わせください。

Ruka Okuyama

GO RIDE Engineer

この著者の記事一覧

One -stop offered from EC construction to advertising operation.

WHITEPAPER DOWNLOAD inquiry