カスタムフィールドを利用して商品ページに簡単に関連商品を表示したい方
※本ページはプロモーションが含まれています
概要
Shopifyで商品ページに関連商品を表示させる方法はいくつかありますが、今回はカスタムフィールドをアプリで作成し、簡単なコードで実現する方法をご紹介します。 関連商品を設定する方法は様々で、細かい設定ができるものもありますが、今回は設定が簡単にできる点を優先しています。前提
・今回は「Metafields Guru」というアプリを使います。詳細は省きますが、ユーザー独自の項目を設定できるもので、wordpressのカスタムフィールドのようなものだと思っていただければいいと思います。無料プランもあるので、最初はそれで十分だと思います。
Metafields Guru（Shopifyアプリストア） ・また関連商品ですが、その商品が属しているコレクションの他の商品を関連商品として表示するという内容にします。 ・今回はコードを直接修正するため、ファイルは予めバックアップしておいてください。手順
- Metafields Guruの導入
- コードの実装
- まとめ
Metafields Guruの導入
Metafields Guruをインストールします。Shopifyアプリストアから「Metafields Guru」を検索してください。 Metafields Guruをインストールして、アプリを開いてください。 メニューから「Metafields Guru」→「Products」を選んでください。 該当する商品を選択してください。 新規登録の場合は「Create metafields」を押してください。 ここで詳細を設定します ①Type：今回は”Collection“を選択 ②Namespace：任意のテキストを入力（今回はglobalと記入） ③key：任意のテキストを入力（今回はcollectionと記入） ④Value：その商品の関連商品として表示させたいコレクション(Collection)を選択 これでアプリの設定はひとまず完了です。続いてコードの編集をしていきます。コードの実装
“main-product.liquid”を開き、任意の場所に以下のコードを入力してください。 ※下記はTailwindcssを使用しています。Tailwindをインストールしていないがスタイルも正確に当てたい方はCDNをご利用ください。<script src="https://cdn.tailwindcss.com"></script>// <head>内に記述※そのコレクションにアイテムがその商品以外に1つ以上あることを前提にしています。また商品がなかった場合の処理はここでは記述していません。
<div>
{% assign collection = product.metafields.global.collection.value %} //ここで所属するコレクションを取得
<ul>
{% for product in collection.products limit: 4 %} //コレクションのアイテム（関連商品）を4件まで表示
<li class="border p-2 relative hover:opacity-80 shadow-md card-js">
<a href="{{ product.url }}" class="block">
<figure>
<div class="overflow-hidden">
<img src="{{ product.featured_image.src | img_url: '1000x' }}" alt="{{ product.title }}"
class="w-9/12 mx-auto my-2 mb-1 hover:scale-125 transition duration-300">
</div>
<figcaption class="px-2 text-xs mb-1">
{{ product.title }}
</figcaption>
</figure>
</a>
</li>
{% endfor %}
</ul>
</div>細かく説明していきます。{% assign collection = product.metafields.global.collection.value %} //ここで所属するコレクションを取得ここで上記の③④で設定した値を記述します。 “product.medafields”に続けて③（global）と④（collection）を設定します。今回ですと上記で該当するコレクションを取得できます。{% for product in collection.products limit: 4 %} //コレクションのアイテム（関連商品）を4件まで表示あとはループでそのコレクションに属している商品（products）を表示していきます。上記の例ですと4件まで取得するようにしています。 以上でコードの実装は完了です。