メタフィールド初心者がやってみた！アプリなしで実現するランク表示
こんにちは！GO RIDEでディレクターをしているMichiruです！
ブランドの中古品のカバンやアクセサリーなどの商品で「この商品のランク、パッと見でわかるようにしたいな…」 そう思った時、真っ先に「アプリ」を探していませんか？
実はShopifyには、標準機能で項目を自由に追加できる『メタフィールド』という超便利な機能があるんです。
今回は、完全初心者の私が「ブランドランク表示」をアプリなし、完全無料で実装してみた記録をシェアします！
メタフィールドの「箱」を作る
まずは、商品管理画面に「ランクを入力する場所」を作ります。
[設定] > [カスタムデータ] > [商品] を開く。
[定義を追加する] をクリック。
名前を「ブランドランク」にして、タイプは [単一行テキスト] を選択。
保存！
これで準備完了。
あとは各商品ページの編集画面の一番下までスクロールして、「S」や「A」などのランクを入力して保存しておきます。
「星」⭐︎⭐︎⭐︎で表現するのもわかりやすいですね。
今回は、テスト商品として「ハンドバック」を登録してみます。
商品登録画面を下にスクロールすると、「メタフィールド」という項目の中に「ブランドランク」が追加されているので、ランクを入力します。
商品詳細ページで表示させる
箱を作って中身を入れたら、次はストアに表示させます。
ここが一番のポイント！
[オンラインストア] > [カスタマイズ] を開く。
商品ページの編集画面へ行き、左側のメニューから [ブロックを追加] を選択。
「テキスト」ブロックを追加し、入力欄の右上にある [動的ソースを接続]（小さな三層アイコン） をクリック。
先ほど作った「ブランドランク」を選択します。
保存！
プレビューを見てみる
設定が終わったら保存して、プレビューを確認してみましょう。
「おおっ、出てる！」 商品ページごとに、設定した「Rank S」や「Rank A」という文字が自動で表示されているはずです。
当たり前なんですが、自分で設定したものが形になるとちょっとうれしくなります。
アプリなしでやるメリットとは？
実際にやってみて感じた、アプリを使わないメリットは3つ。
固定費ゼロ: 月額料金を気にせず機能を増やせる。
サイトが重くならない: アプリを入れすぎると表示速度が落ちますが、これなら安心。
デザインが馴染む: テーマの標準機能を使うので、フォントや色の統一感が出しやすい。
「動的ソース」という画期的なシステム
今回一番感動したのは、「動的ソース」という仕組みです。
「1箇所の設定を変えるだけで、商品AにはAの内容、商品BにはBの内容が勝手に出る」という効率の良さ。とっても便利でこれを知ってしまうと、もう直接テキストを入力するのには戻れません…！
さらなる工夫への第一歩
今回はシンプルなテキスト表示でしたが、これを応用すればもっと面白いことができそうです。
例えば…
ランクごとに文字の色を変える
有料テーマにあるような「折りたたみ（アコーディオン）」の中に、メタフィールドで商品別の詳細スペックを流し込む
このあたりも、少しの工夫（とちょっとしたLiquidコード）で実現できそうです。
それはまた次回の挑戦でご紹介しますね！
Popular articles
