今回はテーマカスタマイズの一例として、コレクションページにメタフィールドに登録した情報を表示する方法について解説します✍️
コレクションのメタフィールド定義を追加する
コレクションに表示したい情報を、メタフィールドとして設定します。そのために、コレクションのメタフィールドを定義しましょう。
管理画面「設定 > カスタムデータ」からメタフィールド定義が追加できます。今回はコレクションに定義します。
定義したら、「商品管理 > コレクション」から、コレクションごとにメタフィールドを設定します。
カスタマイズ対象となるコレクションページのliquidファイルを探す
テーマをカスタマイズしたい場合、まず、どのliquidファイルを編集すればよいかを特定する必要があります。
今回はコレクションページに変更を加えたいので collection というワードでフィルタをかけ、当てはまりそうなliquidファイルを絞り込みます。おおよそ、sectionsフォルダ内に配置されていることが多いと思います。
絞り込んだら、これかな、と思うファイルを開いて、適当に文字列を入れます。できるだけ、上の方に記述されている <div> タグの直前にいれると良いです。
文字列を入れたら、保存してプレビューを確認します。記入した文字列が表示されれば、おおよそのアタリをつけることができます。
コレクションページにメタフィールドのデータを表示する
メタフィールドを設定し、カスタマイズする箇所も特定できたので、コードを書いていきます。
実はこのコード自体はそこまで難しいものではなく、以下で、コレクションページに設定されたメタフィールドを表示することができます。
<div>制作者：{{ collection.metafields.custom.creator }}</div>
custom.creator の部分は、最初に定義したメタフィールドに合わせて変更してください。
あとは、表示したい位置や、CSSでスタイルを調整するだけです。
ちょっとした改修であれば実はそんなに難しくないことも多いので、ぜひこちらの例を参考にトライしてみてください！