Shopifyブログ記事内に、コレクションカードをショートコード感覚で設置する方法を解説。メタフィールドとJavaScriptを活用して、見やすく魅力的な導線を作る実装手順や注意点を、実践目線で紹介します。
先日公開した記事では、Shopifyのブログ記事内に商品カード（いわゆるショートコード的な表示）を設置する方法についてご紹介しました。
今回はその応用編として、「コレクションカード」をブログ記事内に設置する方法を取り上げます。基本的な考え方や実装手順は、商品カードのケースとほぼ同じため、本記事では細かい仕組みの解説は割愛し、実際に使えるサンプルコードと、実装時に注意したいポイントを中心にご紹介していきます。
まずメタフィールドを準備
まずは、今回のコレクションカードを表示するための前提準備です。商品カードのときと同様、ブログ記事側にメタフィールドを用意します。今回は「記事ごとに紐づけたいコレクションを指定できるようにする」ことが目的なので、記事用メタフィールドのタイプは「コレクション参照（Collection）」 を選択します。
便宜上、この記事では、メタフィールド名を「custom.related_collection」という名前で設定したものとして進めていきます。
Jsコード
次に、メタフィールドで指定したコレクション情報を読み取り、ブログ記事内にコレクションカードとして表示するためのJavaScriptを用意します。実装場所は、専用のセクションを用意しても構いませんし「main-article.liquid」など記事テンプレート内に直接記述しても問題ありません。
基本的な流れは商品カードのときと同様で、
「ブログ本文内に用意したショートコード（HTMLタグ）を検知 → そこにカードを生成して差し込む」
という、いわゆる「DOM操作」 という考え方になります。
JavaScriptの具体的なコードについては、今回もこの記事の中で紹介しているサンプルを参考にしていただければ、そのままコピー＆カスタマイズで利用できる構成になっています。
<script>
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('collection-card');
if (!container) return;
{% if article.metafields.custom.related_collection %}
const collection = {{ article.metafields.custom.related_collection.value | json }};
const imageUrl = {{ article.metafields.custom.related_collection.value.image
| image_url: width: 1200
| json
}};
const title = collection?.title || '';
const url = collection?.url || '#';
container.innerHTML = `
<section class="article-collection-card">
<div class="article-collection-card__inner">
<a href="${url}" class="article-collection-card__media">
<img src="${imageUrl}" alt="${title}">
</a>
<div class="article-collection-card__info">
<h2 class="article-collection-card__title">
<a href="${url}">${title}</a>
</h2>
<a href="${url}" class="button">
コレクションを見る
</a>
</div>
</div>
</section>
`;
{% endif %}
});
</script>注意点
今回紹介するコードは、「画像付きのコレクションカード」を前提とした実装になっています。見た目の訴求力を意識している分、コレクション画像が登録されていない場合に問題が発生する可能性があります。
具体的には、コレクションに画像が設定されていない状態で実装すると、画像URLが取得できず JavaScript側でエラーが発生し、その結果 DOM 操作が正しく行えず、カード自体が表示されないケースがあります。
そのため、次のいずれかの対策をおすすめします。
・対策１：コレクション画像がない場合でもエラーにならないよう、画像URLの値が取得できなかったときは null を代入するなど、安全に処理が止まるようにしておく（具体的なJSは割愛）。
・対策２：「画像が未設定の場合に表示する共通画像（NO IMAGE）」を用意する。ただし無機質なNO IMAGEでは不親切なので、ロゴ画像や、そのコレクションを象徴するようなビジュアルを置いておくとユーザー体験としても親切です。
この点だけ注意していただければ、安心してブログ内にコレクションカードを設置することができます。
あとは、必要に応じてCSSを追加すれば、ボタンのデザインや枠線、影などを調整して、より見やすく魅力的な商品カードに仕上げることができます。
***
いかがでしょうか。
今回は、ブログ記事内にコレクションカードを表示するための方法を紹介しましたが、手法そのものについてはかなり省略しているため、仕組みをもう少し正確に理解したい場合は、ぜひ前回の記事も合わせてご覧いただくことをおすすめします。
コレクションのプロパティやメタフィールドを活用し、その値を取得・表示することで、ユーザーにとってわかりやすく魅力的な導線を作ることができ、結果としてユーザーエクスペリエンスの向上につながります。また、関連性の高いコンテンツ同士を結び付けることで、記事自体のSEO効果も十分に期待できる施策になりますので、ぜひ活用してみてください。
