Shopifyのテーマ編集では何ができる？Liquid・メタフィールド・メタオブジェクトをやさしく解説
Shopifyを使っていると、「商品ページに独自の項目を追加したい」「この商品だけ違う案内を表示したい」「担当者が管理画面から更新できるようにしたい」といった要望が出てくることがあります。
このような相談では、テーマを編集すればよいのか、アプリを導入するのか、Shopifyの標準機能で対応できるのかが分かりにくいかもしれません。
Shopifyのテーマ編集では、ストアの見た目を変えるだけでなく、情報の持たせ方や、運営する方が更新しやすい仕組みまで調整できます。
WebAnataでは、Shopifyストアの新規構築やテーマ編集に携わり、Liquid、メタフィールド、メタオブジェクトを使った実装を行ってきました。現在も本業でShopify構築のコーダーとして経験を重ねています。この記事では、それぞれで何ができるのかを、Webに詳しくない方にも分かるように説明します。
Shopifyの「テーマ編集」とは
Shopifyのテーマは、ネットショップの見た目やページ構成を作る土台です。
色や文字の大きさを変えるだけであれば、テーマの管理画面から設定できる場合があります。一方、既存の設定にはない表示を追加したり、商品情報に合わせて表示内容を変えたりするときは、テーマコードの編集が必要になることがあります。
テーマ編集の例には、次のようなものがあります。
- 商品ページへ独自の案内を追加する
- 商品ごとに異なる情報を表示する
- 画像と文章を組み合わせた独自のパーツを作る
- 管理画面から文章や画像を変更できるようにする
- 特定の条件に合う商品だけ表示を変える
- スマートフォンでの見え方を調整する
大切なのは、表示を作ることだけではありません。公開後に誰が更新するのかを考え、できるだけ管理画面から扱える形にしておくこともテーマ設計の一部です。
Liquidは、Shopifyの情報と表示をつなぐもの
Liquidは、Shopifyテーマで使われているテンプレート言語です。
簡単にいうと、Shopifyに登録されている商品名、価格、画像、在庫などの情報をページへ表示したり、条件によって表示内容を変えたりするために使います。
例えば、次のような調整が考えられます。
- 特定の商品だけ注意書きを表示する
- 商品に登録した追加情報を読み出す
- 情報が登録されている場合だけ項目を表示する
- 商品やコレクションによって見せ方を変える
ただし、条件分岐を増やしすぎると更新しにくくなることもあります。その場の表示だけでなく、今後商品が増えたときにも運用できるかを考えて実装する必要があります。
セクションとブロックで、管理画面から更新しやすくする
Shopifyのテーマでは、ページを「セクション」や「ブロック」という単位に分けて作れます。
セクションは、画像と文章、商品一覧、よくある質問など、ページを構成するまとまりです。ブロックは、その中に置く見出し、文章、画像などの小さな要素です。
Shopifyの公式ドキュメントでも、セクションやブロックは、運営者がコンテンツを追加・削除・並べ替えできる仕組みとして説明されています。
テーマ編集で独自のセクションを用意すると、毎回コードを書き換えなくても、管理画面から次のような変更ができるようになります。
- 見出しや説明文を変更する
- 画像を差し替える
- 項目を追加・削除する
- 表示順を入れ替える
- 色や余白など、用意された設定を変更する
設定項目を増やせばよいとは限りません。選択肢が多すぎると、かえって更新が難しくなります。実際に更新する方が迷わない範囲で設計することが大切です。
メタフィールドで、商品ごとの情報を追加する
メタフィールドは、Shopifyの商品などに、標準では用意されていない情報を追加する仕組みです。
例えば、商品ごとに次のような情報を持たせたい場合に使えます。
- 素材や原産地
- 使用上の注意
- お手入れ方法
- 発送予定
- 独自の補足説明
- サイズ表への参照
商品説明の文章へすべてを書き込む方法もありますが、項目を分けて登録すると、表示位置や見せ方を揃えやすくなります。
「入力欄を作ること」と「その情報をテーマへ表示すること」は別の作業です。使用しているテーマによっては管理画面から接続できる場合もありますが、希望する見せ方に合わせてLiquidで実装する場合もあります。
メタオブジェクトで、複数の情報をまとめて再利用する
メタオブジェクトは、複数の項目を持つ独自の情報をまとめて管理する仕組みです。
メタフィールドが「商品に追加する一つの項目」だとすれば、メタオブジェクトは「複数の項目を持つ情報のまとまり」と考えると分かりやすいです。
例えば、次のような情報を作り、複数の商品やページで再利用できます。
- ブランド情報
- 生産者・作り手の紹介
- 店舗情報
- サイズ表
- 素材や成分の詳細
- よくある質問
同じ内容を複数ページへ直接書くと、変更時にすべて修正しなければなりません。メタオブジェクトとして一か所で管理できれば、情報の重複や修正漏れを減らしやすくなります。
一方で、どの情報もメタオブジェクトにすればよいわけではありません。商品に直接ひもづく単純な追加項目ならメタフィールド、複数項目をまとめて再利用したい情報ならメタオブジェクト、というように使い分けます。
テーマ編集とアプリ導入は、どちらがよい？
Shopifyで機能を追加するときは、テーマを編集する方法とアプリを導入する方法があります。
表示方法の調整や、Shopifyに登録した情報を独自の形で見せる場合は、テーマ編集が合うことがあります。外部サービスとの連携や、アプリが完成した機能を提供している場合は、アプリの方が適していることもあります。
判断するときは、次を確認します。
- 必要なのは表示の変更か、新しい機能か
- 既存テーマの設定で対応できないか
- アプリの月額費用や仕様変更を許容できるか
- 誰が公開後の設定・更新を行うか
- テーマ更新時に影響しないか
- 表示速度や他のアプリとの相性に問題がないか
WebAnataにはアプリ導入の経験もありますが、現時点ではテーマ編集、Liquid、メタフィールド、メタオブジェクトを使った構築が主な経験領域です。案件ごとに、テーマ編集で対応するのか、アプリを検討するのかを整理します。
「この表示はできますか？」と相談するときに伝えてほしいこと
実現したい表示がある場合、次の情報が分かると確認が進めやすくなります。
- 現在のストアURL
- 使用しているテーマ名
- 変更したいページと場所
- 現在の画面のスクリーンショット
- 参考にしたいサイトや画像
- 商品ごとに内容を変える必要があるか
- 公開後、誰が情報を更新するか
- パソコンとスマートフォンの希望表示
「同じものを作ってほしい」だけでなく、「どの部分を、どのような理由で参考にしたいか」が分かると、現在のテーマで可能か、別の方法が必要かを判断しやすくなります。
まとめ
Shopifyのテーマ編集では、ストアの見た目だけでなく、商品情報の表示方法や、公開後の更新方法も調整できます。
- LiquidでShopifyの情報を表示し、条件によって見せ方を変える
- セクションやブロックで、管理画面から更新しやすくする
- メタフィールドで、商品ごとの追加情報を管理する
- メタオブジェクトで、複数項目を持つ情報を再利用する
- 必要に応じてアプリとの使い分けを検討する
テーマによって元の構造が異なるため、同じ要望でも対応方法は変わります。
「この表示はできる？」「商品ごとに内容を変えたい」「管理画面から更新できるようにしたい」といった段階でも、現在のテーマと希望内容を確認しながら整理できます。