Shopifyブログ記事に「商品カード」を入れて購入に繋げる方法｜クリックから売上まで計測する

Shopifyのブログ記事から商品購入に繋げるには、「手動リンク」「購入ボタン」「商品カード」の3つが選べます。テーマのコードを触らずに見栄えの良い商品カードを置き、さらに「どの記事から売れたか」まで追いたいなら、ショートコードを1行書くだけのアプリ設置が最短です。

Shopifyブログで商品に繋げる基本の選択肢（手動リンク／購入ボタン／メタフィールド）

Shopify標準でも、ブログ記事から商品へ繋げる方法は用意されています。大きく「手動リンク」「購入ボタン（Buy Button）」「メタフィールド連携」の3つです。

手動リンクは、記事エディタで文字や画像に商品ページのURLを貼るいちばん基本的な方法です。追加費用も要らず、すぐ試せます。ただしテキストや画像リンクなので、価格や在庫の情報は自動では出ません。

購入ボタン（Buy Button）は、Shopifyのセールスチャネル機能で発行できる埋め込みコードです。記事内にカート追加ボタンを置けますが、商品ごとに埋め込みコードを手動で発行して貼り付ける必要があり、点数が増えるほど手間もかさみます。

メタフィールド連携は、記事と商品をメタフィールドで紐付けてカード状に表示する方法です。見た目は整いますが、テーマのLiquidコードを編集することが前提になり、テーマ依存でノーコードでは完結しません。

まずは「Shopify標準で何ができて何ができないか」を押さえておくと選びやすくなります。標準ブログの守備範囲は Shopify標準ブログでできること・できないこと【2026年版・早見表付き】 で早見表付きに整理しています。

手動リンクと「商品カード」は何が違うのか

手動リンクは「文字の下線」、商品カードは「商品情報を構造的にまとめた枠」です。読者が受け取る情報量と、クリックしたくなる強さが変わります。

手動リンクは、記事の文章の中に商品ページへの導線を1本引くだけです。手軽ですが、読者から見えるのはリンクテキスト（と、あれば画像）だけ。価格やボタンといった「買う前に知りたい情報」は記事の文章から想像するしかありません。

一方の商品カードは、商品画像・商品名・価格・詳細への導線をひとつの枠にまとめて表示します。読者は記事を読む流れのまま「これはいくらで、どんな商品か」を視覚的に受け取れるので、記事から商品ページへの回遊が自然になります。SwirlKit Blogでは、画像の有無・価格の有無・アスペクト比・grid／list表示といった見た目をアプリの管理画面から調整できます。

「読み進める体験を止めずに商品へ誘導する」という意味では、記事内の回遊を増やす発想は反応ボタン（いいね）とも共通します。読者の熱量を可視化して再訪に繋げる考え方は Shopifyブログの回遊・再訪を増やす「いいね（反応ボタン）」活用術【ノーコード】 で解説しています。

商品カードのメリットは“置く”だけじゃない — クリックを売上まで追える

商品カードの本当の価値は、見た目だけでなく「どの記事から売れたか」を記事単位で計測できることです。ただし設置と計測はプランが分かれているので、そこだけ正確に押さえてください。

手動リンクや購入ボタンでも商品ページへ誘導はできます。しかしShopify標準には「どの記事の商品リンク／ボタン経由で売れたか」を記事単位で計測する仕組みがありません。手動リンクも購入ボタンも、記事別の売上アトリビューションは持たないためです。ここが、記事コンテンツを売上に繋げたい運用者にとって一番のもどかしさになります。

SwirlKit Blogの商品カードは、この「クリックのその先」を追えるように設計されています。仕組みはシンプルで、カードのリンクがクリックされたときに記事情報をカートのnote_attributesに付与し、注文が入ったタイミングで集計する方式です。UTMパラメータやクーポンコードを配る必要はありません。

ここでプラン構造を正確に整理します。

• 商品カードの設置・表示は Growthプラン以上で使えます。
• 記事別の売上計測（注文アトリビューション）は Proプラン限定の機能です。

つまり「商品カードを置けば誰でも売上が見える」わけではありません。Growthプランでカードを設置し、記事ごとの売上を実際にレポートで確認できるのはProプランという2段構造です。

もう一点、正直にお伝えすべき仕様があります。計測できるのは「記事単位」の売上（どの記事から売れたか）です。「その記事の中でどの商品が売れたか」という商品内訳は現状出ませんので、あくまで「この記事が売上をどれだけ生んだか」を測る機能として捉えてください。

さらにProプランの「相関インサイト」では、記事のいいね数×売上を掛け合わせて、記事を「優良／CTA改善の余地あり／隠れた優良／要改善」の4象限に分類できます。人気（反応）と成果（売上）を別軸で見ることで、次にどの記事へ手を入れるかの判断がしやすくなります。

記事別の売上を実際のダッシュボードでどう見るのかは Shopifyブログの売上を記事ごとに“効果測定”する方法【ダッシュボード実例あり】 で詳しく解説しています。「商品カードを置く → 売上まで追う」の全体像は、この記事とあわせて読むと繋がります。

商品カードの設置手順（ノーコード）

テーマのLiquidコードは一切触りません。テーマで一度だけApp embedsをONにしたら、あとは記事本文にショートコードを1行書くだけです。

手順は次の通りです。

1. テーマのカスタマイズ画面で「App embeds」からSwirlKitのembedをONにする（最初の1回だけ）
2. 記事エディタで、商品カードを置きたい位置にショートコードを書く

ショートコードは、単品なら商品のhandleを指定します。

[product:handle=your-product-handle]

複数商品をまとめて並べたいときは、handleをカンマ区切りで指定します。

[products:handles=product-a,product-b,product-c]

これだけで、指定した位置に商品カードが表示されます。画像の有無・価格の有無・アスペクト比・grid／list表示といった見た目は、アプリの管理画面からまとめて設定できます。テーマのコードを開かなくても、記事本文にショートコードを1行書くだけで設置が完結する——これがノーコード運用者にとっての手軽さです。

（補足：ドラッグ＆ドロップで配置するタイプではなく、「記事本文にショートコードを記述する」方式です。テーマのコードは触らずに済みます。）

どの方法を選ぶべきか（比較表）

結論から言うと、手軽さだけなら手動リンク、記事を売上に繋げて改善まで回すなら商品カードです。目的別に4つの方法を比較します。

「記事別の売上計測」の列に注目してください。手動リンク・購入ボタン・メタフィールドは、どれも商品への誘導まではできても、どの記事から売れたかを記事単位で計測する機能は持ちません。ここが、コンテンツを起点に売上を伸ばしたい運用者にとっての分かれ目です。

なお、商品カードで計測できるのは「記事単位」の売上で、商品内訳までは出ない点は前述の通りです。「どの記事が売れているか」を軸に改善を回す用途に向いています。

まとめ

• Shopify標準でも手動リンク・購入ボタン・メタフィールドで商品へ誘導できるが、記事別の売上計測はできない
• 商品カードは画像・価格・導線をまとめて見せられ、記事から商品への回遊を自然にする
• SwirlKit Blogなら、テーマのコードを触らず記事本文にショートコードを1行書くだけで設置できる（設置＝Growthプラン以上）
• どの記事から売れたかを記事単位で計測できる（計測＝Proプラン限定、note_attributes方式、商品内訳は出ない）
• Proの相関インサイトは、いいね数×売上で記事を4象限に分類し、改善対象を選びやすくする

記事を「読まれて終わり」にせず、購入と売上まで繋げたい方は、まずは商品カードから試してみてください。

▶ SwirlKit BlogをApp Storeで入手する

関連記事

• Shopifyブログの売上を記事ごとに“効果測定”する方法【ダッシュボード実例あり】
• Shopifyブログの回遊・再訪を増やす「いいね（反応ボタン）」活用術【ノーコード】
• Shopify標準ブログでできること・できないこと【2026年版・早見表付き】