【シンプルブログ複製】ブログ記事に動的な商品カードを設置する方法

ブログ記事の段落と段落の間に、商品カードを入れる方法です。カードには、最新の価格・在庫・「カートに追加」のボタンが自動で表示されます。商品の価格を変えても、記事を書き直す必要はありません。

この機能は、Proプラン（月額$4.99／年額$49.9、7日間の無料体験つき）か、開発ストア（Shopifyパートナー向けのテスト用ストア）で使えます。無料プランの本番ストアでは使えません。

この記事でわかること

• 商品カードを使うための準備（権限の許可とアプリ埋め込み）
• 記事に商品カードを入れて保存する手順
• 管理画面でのプレビューの見方
• ストアでの確認のしかたと、見え方

操作する場所：Shopify管理画面 → アプリ → SAKUシンプルブログ複製（ホーム）→ セットアップガイドのステップ3・4

1️⃣ 商品とテーマの読み取りを許可する

ホームの「セットアップガイド」を開きます。ステップ3が「商品カードの権限を許可する（有料機能）」になっていたら、「商品カードの権限を許可」をクリックします。新しいタブで「データアクセスの更新」の画面が開きます。商品とテーマの情報を読むための許可を求められるので、内容を確認して、「更新」をクリックします。

許可したら、アプリのタブに戻ります。画面が自動で更新されます。これは、アプリが商品とテーマの情報を読むための許可です。アプリが商品を変更することはありません。

2️⃣ テーマエディタで「商品カード」をオンにして保存する

許可が終わると、ステップ3が「ブログ内商品カード：アプリ埋め込みを有効にする（有料機能）」に変わります。「テーマエディタを開く」をクリックします。ガイドの本文には「SAKU Product Cards」と書かれていますが、同じものです。テーマエディタでは「商品カード」と表示されます。

テーマエディタの左端の縦のアイコンの中から「アプリ埋め込み」を開きます。一覧にある「商品カード」のスイッチが、オン（色が付いた状態）になっていることを確認します。そのあと、右上の「保存」を必ずクリックしてください。保存しないと反映されません。

※これは「アプリ埋め込み」です。セクションに追加するアプリブロックではありません。商品カードの色や大きさもこの画面で変えられます。「商品カードの見た目を変更する方法」をご覧ください。

※テーマエディタが開くまで、少し時間がかかることがあります（テーマ全体を読み込むためです）。

※オンにするのは、公開しているテーマです。公開していないテーマだけでオンにしても、アプリは検知できません。

3️⃣ 記事の一覧で「段落の間に商品カードを追加」をクリックする

左メニューの「ブログ記事」を開き、商品カードを入れたい記事の行で「段落の間に商品カードを追加」をクリックします。ホームのセットアップガイドのステップ4にある「ブログ記事を開く」からも、記事の一覧に移れます。

記事ごとのページが開きます。上には記事のタイトルと、「文章を編集する」「プレビュー」「コメントを管理」「その他の操作」のボタンがあります。左上の「記事一覧に戻る」で、一覧に戻れます。

• 「文章を編集する」：Shopify標準の編集画面で、文章を書き直せます。
• 「プレビュー」：公開されている記事だけ押せます。ストアの記事ページが新しいタブで開きます。
• 「その他の操作」：「複製」「テンプレート保存」「公開する」または「非公開にする」「記事を削除する」を選べます。

4️⃣ 「ここに挿入」で商品を選ぶ

左側に、記事の本文が段落ごとに並びます。各段落の前後にある「ここに挿入」をクリックして、入れたい位置を決めます。Shopifyの商品の選択画面が開くので、商品を1つ選んで確定します。

選ぶと、その位置に、緑の「商品カード」と書かれた小さなラベルと、商品のハンドル（商品ページのアドレスの最後の部分）が並ぶ行が1行できます。まだ保存していないので、記事は変わっていません。やめるときは、その行の赤い「削除」をクリックします。

• 1つの記事に入れられる商品カードは、50枚までです。
• 本文の段落の抜粋は90文字までです。画像だけの段落は「画像」（または代替テキスト）、動画や埋め込みは「動画・埋め込み」、空の段落は「（テキストなし）」と表示されます。
• 本文が空のときは、「本文が空です。下のボタンから最初のカードを挿入できます。」と表示されます。
• 商品のハンドルに使えない文字が入っているときは、「この商品のURLハンドルに使用できない文字が含まれているため、カードを挿入できません。」と出て、入れられません。直し方は「商品カードが表示されないときの確認ポイント」をご覧ください。

5️⃣ 画面上部の「保存」をクリックする

カードを入れたり外したりすると、アプリの画面のいちばん上に保存バーが出ます。「未保存の変更」の横にある「保存」をクリックすると、記事に反映されます。画面に「商品カードを保存しました」と表示されれば完了です。やめるときは保存バーの「破棄」をクリックします。

保存しないまま別の画面に移ったり、ページを読み込み直したりしようとすると、「商品カードの未保存の変更があります。破棄して続行しますか？」と確認が出ます。

保存では、商品カードの場所だけが記事の本文に足されたり、消されたりします。文章は変わりません。カード用の場所だけが追加されます。

開いたあとに、別のタブやShopifyの編集画面で記事が更新されていたときは、保存を中止します。「記事が別の画面で更新されていたため、保存を中止しました。最新の内容を読み込み直したので、もう一度カードを配置してください。」と出るので、もう一度カードを入れてください。

6️⃣ 右側の「プレビュー」で確認する

右側には、「記事情報」（「公開状況」「ブログ」「作成者」）と、「プレビュー」の枠があります。「プレビュー」には、記事の全文と商品カードの簡易的な見た目が出ます。「簡易プレビューです。実際の見た目はテーマとアプリ埋め込みの設定に従います。」と書かれているとおり、実際の見た目は、ストアの記事ページで確認してください。

カードの見た目を変えたいときは、「プレビュー」の枠の「テーマエディタを開く」をクリックします。この画面は、この記事のプレビュー付きでテーマエディタが開きます。

7️⃣ ストアで確認する

記事を公開してから、記事の行の「プレビュー」をクリックします。公開のしかたは「公開・非公開をワンクリックで切り替える方法」をご覧ください。新しいタブでストアの記事ページが開くので、商品カードが入れた位置に出ているか確認します。

設定後のストア表示

商品カードは、お客様がブログの記事ページ（/blogs/（ブログのハンドル）/（記事のハンドル））を開いたときだけ、本文の入れた位置に表示されます。ブログの記事ページ以外では表示されません。表示される条件は、次のとおりです。

• テーマエディタで「商品カード」のアプリ埋め込みがオンで、保存されている
• Proプランか、開発ストア
• 入れた商品が「アクティブ」で、販売中
• 記事が公開されている（下書きの記事は、お客様には見えません）

カードには、商品画像（リンク）、商品名（リンク）、価格（セール中は取り消し線付きの元の価格）、「カートに追加」のボタンが表示されます。バリエーションが2つ以上あるときは、選ぶ欄も出ます。在庫のないバリエーションは、ボタンが「売り切れ」になります。

「カートに追加」を押すと、ボタンの文字が「追加中…」→「追加しました ✓」と変わり、テーマのカート（ドロワーなど）が反応します。うまくいかなかったときは「追加できませんでした」と出て、2秒後に元の文字に戻ります。お客様に見えるこれらの文言は、テーマの言語が日本語のときは日本語で、それ以外のときは英語で表示されます（管理画面の言語ではありません）。

商品カードの設定を変えても、お客様に見える記事の文章を、アプリが書き換えることはありません。追加されるのは、カード用の場所だけです。

うまくいかないとき

• 商品カードの設定を始められない
  ステップ3が先に進まないときは、「商品カードの権限を許可」を済ませていますか。許可したあとは、アプリのタブに戻ってください。くわしくは「商品カードが表示されないときの確認ポイント」をご覧ください。
• ストアの記事にカードが出ない
  「商品カード」のアプリ埋め込みをオンにして、テーマエディタの右上の「保存」を押したかを確認してください。ほかの原因は「商品カードが表示されないときの確認ポイント」にまとめています。
• 無料プランのストアで使えない
  商品カードは有料機能です。「有料機能です」「商品カードの挿入には有効な有料契約が必要です。開発ストアでは無料で利用できます。」と出て、「プランを表示・変更」のボタンがあります。「料金プランの確認・変更と無料枠の仕組み」をご覧ください。