Shopifyブログで、記事内に商品カードをキレイに表示したい…。そんな方におすすめの小技です。メタフィールドとJavaScriptを使って、商品画像・タイトル・リンクをカード型で表示する方法をわかりやすく紹介します。
Shopifyを使っていると、ECマーケティングの観点から本当に細かい配慮と工夫が随所に盛り込まれていることに、思わず感心してしまいます。特にブログ機能はSEO対策において非常に役立ち、集客や情報発信の要として大きな力を発揮してくれます。
とはいえ、「ここだけ少し足りないな…」と感じるのが、商品カードの見せ方です。記事の途中で商品を紹介したい場面は多いのに、標準機能ではカード型で見栄えよく表示する仕組みがありません。
そこでこの記事では、メタフィールドとJavaScriptを組み合わせることで、ブログ記事内にショートコード感覚で商品カードを設置する方法を、できるだけシンプルに紹介します。
ざっくりこんな流れ
今回の仕組みはシンプルで、「メタフィールド」と「JavaScript（DOM操作）」の2つで組み立てます。
まず、ブログ記事に「商品参照タイプ」のメタフィールドを用意し、そこで表示したい商品を選べる状態にします。
次に、テーマ側で商品カードを差し込むためのセクション（今回はJavaScriptのみを記述するセクション）を用意し、記事テンプレートに追加します。なお、セクションを新規作成せず「main-article.liquid」に直接コードを書いてしまう運用でも問題ありません。
この記事では便宜上、メタフィールドを「article.metafields.custom.related_product」セクション名を「article-product-card.liquid」という名前で進めます。
あとはJavaScriptでDOM操作を行い、ブログ本文の中に
<div id="product-card"></div>という要素が登場したタイミングで、その場所に商品カードのHTMLを差し込む仕組みです。これで、ショートコード感覚で商品カードを自由に挿入できるようになります。
注意点
一点だけ注意があります。今回紹介している方法では、ショートコードとして使用する
<div id="product-card"></div>と、記事側で設定する商品メタフィールドは「1つのみ」を前提としています。「id」を使って特定の要素を取得する仕組みのため、同じ記事内に複数設置しても、基本的にはひとつの商品カード表示に限定される形になります。
もし、ひとつの記事内で複数の商品カードを表示したい場合は、あらかじめ複数のショートコードと、それぞれに対応したJavaScript処理を用意する必要があります（または「class」を使った応用実装する方法もありますが、ここでは割愛します）。
JavaScriptを解説
では具体的なJavaScriptコードを見ていきましょう。
document.addEventListener('DOMContentLoaded', () => {
const container = document.getElementById('product-card');
if (!container) return;
{% if article.metafields.custom.related_product %}
const product = {{ article.metafields.custom.related_product.value | json }};
const productImageUrl = {{ article.metafields.custom.related_product.value.featured_media
| image_url: width: 900
| json
}};
const productTitle = product?.title || '';
const productUrl = product?.url || '#';
container.innerHTML = `
<section class="article-product-card">
<div class="article-product-card__inner">
<div class="article-product-card__media">
<a href="${productUrl}">
<div class="article-product-card__image-wrapper">
<img src="${productImageUrl}" alt="${productTitle}">
</div>
</a>
</div>
<div class="article-product-card__info">
<h2 class="article-product-card__title">
<a href="${productUrl}">
${productTitle}
</a>
</h2>
<a href="${productUrl}" class="button article-product-card__button">
この商品を見る
</a>
</div>
</div>
</section>
`;
{% endif %}
});まず、記事メタフィールドで選択した商品のデータを、Liquidを使ってJavaScriptの変数（productなど）にそのまま渡し、そこから「product.title」や「product.url」といったプロパティを参照して、商品カード用のHTMLに差し込んでいます。
ここで少しややこしいのが、「LiquidとJavaScriptの関係」。見た目上は、JavaScriptの中に「{{ article.metafields.custom.related_product.value | json }}」のようなLiquidを書いていますが、実際には Liquidが先にサーバー側で評価され、その結果だけがJavaScriptコードとして出力されているというイメージです。
ただし、Liquidの変数やオブジェクトをそのままJavaScriptで使うことはできないため「| json」フィルターを使って、JavaScriptが扱いやすいJSON形式に変換する必要があります。
画像だけは少し特殊で、メディアオブジェクトを直接JSON化してもURLにはならないため「| image_url」フィルターでいったん画像URLを生成し、それをさらに「| json」をつけるという二段階の変換を行います。
また「const productTitle = product?.title || ”;」のように「||」を使うと、値がない場合は、この後ろに書いた値を代わりに使うという意味になります。これにより、メタフィールドが空だった場合でも、エラーが出たり表示が崩れたりするのを防ぐことができます。
***
あとは、必要に応じてCSSを追加すれば、ボタンのデザインや枠線、影などを調整して、より見やすく魅力的な商品カードに仕上げることができます。
また、今回はシンプルな商品情報のみを表示しましたが、商品（product）オブジェクトには、バリエーション情報や商品メタフィールドなど、他にもたくさんのデータが含まれています。これらを組み合わせれば、より具体的で訴求力の高い商品紹介カードを作ることも可能です。
ブログ記事内で商品カードを表示できるようになると、内部導線が強化されるため、ユーザーの回遊性向上や、結果的なSEO効果も期待できます。もし、Shopifyのブログ運用で「もう少しできることを増やしたい」と感じている方は、ぜひ今回の方法を試してみてください。少しでも参考になれば嬉しいです。
