Shopifyの商品でWordPressの購入ガイドを作る

読者の商品選びを助けるWordPressの記事を、すでにお持ちかもしれません。商品がShopifyストアにある場合、おすすめを読むたびに、読者は該当する商品を自分で探しに行くことになりかねません。ページを逆の順序で組み立てることもできます。判断の手助けはWordPressで書き、商品、価格、チェックアウトはShopifyに置いたまま、選んだ商品は同期済みのカタログからFy2Pressのコンポーネントに表示させるのです。価格を打ち直すことも、2つ目のカタログを管理することもありません。

始める前に、既存のShopifyストア（そのサブスクリプションはFy2Pressとは別です）、インストールと接続を済ませたプラグイン、そして最初の同期が必要です。このページは、Fy2Pressの発行元であるPagupが公開しています。計画用のテンプレートはどの連携方法でも使えますが、コンポーネント名はFy2Press 1.0.0のものです。1つの記事に購入ボタンが1つあれば足りるなら、もっと軽い方法で十分かもしれません。購入ボタン、プラグイン、カタログの選び方のガイドをご覧ください。

完成したデモのガイドには何が表示されていますか？

上のページは、Morrowfieldのデモから取ったものです。読者の状況を示すタイトル、大切な点を説明する2つの短いセクション、そしてTravel essentialsコレクションの商品を一覧表示するショートコード1つで構成されています。ショートコードは次のとおりです（ここでは必須の属性だけを示しています）。

[fy2press_products_loop collection="travel-essentials"]

各カードには、画像、タイトル、価格、そして商品のWordPressページを開く「View Product」ボタン（日本語表示では「商品を見る」）があり、そのページでバリエーションの選択と購入操作ができます。このデモには限界もあります。商品はShopifyから同期したのではなく、ローカルのWordPressテストサイトに直接書き込んだものなので、ストアとの接続、カート、支払いは実証していません。実際のサイトでは、支払いは必ずShopifyで行われます。

ガイドはどんな購入の疑問に答えるべきですか？

カタログではなく、判断から始めます。読者が誰で、読み終えたときにどんな選択ができるべきかを1文で書いてください。「週に何日かノートパソコンを持って通勤している。何を持ち歩けばいい？」は判断です。「当店のトラベル用品」は一覧にすぎません。

次に、容量、用途、予算帯など、答えを実際に左右する基準を2つから4つ書き、ガイドで扱わないニーズも明記します。各基準は、商品情報で確かめられるものでなければなりません。おすすめの理由が「品質が高い」としか言えないなら、そのガイドはまだ準備ができていません。

2つ目のカタログを作らずに商品を選ぶには？

基準に応える商品だけを残します。どの商品にも、そこに載せる理由と、読者が別の商品を選ぶべきケースが必要です。

次に、その選定を、商品がすでにあるShopify上に作ります。商品を手動で追加するコレクションを使えば、ほかのカタログと一緒に管理できる安定した一覧をガイドに用意できます（Shopifyヘルプセンター：コレクション）。Shopifyを安全に接続で設定したとおり、そのコレクションと商品が、Fy2Pressが読み取るHeadless販売チャネルで利用できる状態かを確認してください。

この手順には、Fy2Pressについての2つの事実が関わります。

• FREEでは毎回手動で同期を開始し、同期は即時ではありません。Shopifyでコレクションに追加した商品は、次の同期までガイドに表示されません。
• 新しい商品ページは、同期されるとそのまま公開されます。最初の同期の前に、Google と SEOで表示の可否と優先アドレスを決めてください。

セクションはどう構成すればよいですか？

ページの各部分に、役割を1つずつ与えます。

1. 導入：読者の状況と短い答え。
2. ニーズごとに1セクション：基準、それが重要な理由、そしてそれに応える商品。
3. 比較（役立つ場合）：価格ではなく、言葉で表した基準の短い表。
4. 次の行動：どの選択肢も合わない場合の行き先。

最も大切なルールは、理由づけは文章が担い、商取引のデータはコンポーネントが担うということです。価格、在庫状況、バリエーションはFy2Pressが表示するカタログデータから来るので、文章には書かないでください。段落に打ち込んだ価格は、Shopifyで変わるたびに手作業で直さなければなりません。

Fy2Pressのどのコンポーネントをどこに置きますか？

Fy2Press 1.0.0では、ブロックは独自の商品設定やコレクション設定を持たず、ページの文脈に従います。「ページに追加」タブの説明によると、商品ループのブロック（shopipress/products-loop）は、コレクションページでは現在のコレクションを、その他のページではカタログ全体を表示します。記事の中で選んだ商品を表示するには、WordPressのショートコードブロックを追加し、次のいずれかを貼り付けます。その際、ハンドルの部分を、Shopifyが商品やコレクションのアドレスに使う短い名前に置き換えてください。

• セクションまたはガイド全体の選定（上のデモと同じ）：[fy2press_products_loop collection="collection-handle"]
• セクション内の1つの商品（リファレンスには記載があるが、デモには表示されていない）：[fy2press_product handle="product-handle"]

fy2press_product_priceやfy2press_buy_nowなどの要素ショートコードは、商品ページのような商品の文脈で使うように設計されています。正確な名前は「ページに追加」または「ヘルプ」からコピーしてください。公開されている名前はfy2press_で始まり、属性はショートコード一覧に載っています。

公開前に何を確認すべきですか？

同期を実行してから、エディターのプレビューだけでなく公開ページを開きます。

• 各商品をShopifyと比べます。タイトル、価格、通貨、バリエーション、在庫状況です。このデモでは、カードは金額を$記号で表示し、商品ページはC$で表示しています。読者が通貨を取り違えるおそれがあるなら、どの通貨が適用されるかを明記してください。
• 商品の数を数えます。デモでは、limit="3"属性を付けてもガイドの表示は3つに制限されず、表示されたページにはコレクションの4つの商品すべてが並びました。表示される内容を管理するには、コレクションの中身を管理してください。
• 空白の箇所やプレースホルダーの値がないかを探します。これは、コンポーネントに商品の文脈が欠けているしるしです。
• スマートフォンで、横スクロールなしに読めるかを確認します。
• 購入操作をたどり、正しいShopifyストアに進むことを確認します。許可されていないテスト決済は完了させないでください。
• 架空のデータやテストデータにはその旨を明記し、誰がどのように商品を選んだかを記載します。これは、有用でユーザー第一のコンテンツに関するGoogleのガイダンスが推奨していることです。

この方法は、おすすめから商品までの読者の道のりを短くします。ただし、それだけで売上の増加や検索順位の向上を約束するものではありません。

次のガイドにはどのテンプレートを使えますか？

この骨組みを計画用のドキュメントにコピーしてください。例の行には、架空のMorrowfieldカタログを使っています。

1. 判断

• 読者：…
• ガイドの最後に下す判断：…
• 答えを左右する基準（2つから4つ）：…
• このガイドで扱わないニーズと商品：…
• 商品を選ぶ人と選び方（ページに明記）：…

2. 選定

ニーズまたは読者	決め手となる基準	商品（ハンドル）	理由と、別の商品を選ぶべき場合
1週間分の仕事の荷物を1つのバッグで持ち運ぶ	ノートパソコン、着替え、昼食が入る容量	Transit 24 backpack（transit-24-backpack）	24リットルの通勤用バッグ。読者が小物しか持ち歩かないなら不要
（記入）	（記入）	（記入）	（記入）
（記入）	（記入）	（記入）	（記入）

3. コンポーネントの配置

• このガイド用のShopifyコレクション（ハンドル）：…
• コレクションと商品がHeadless販売チャネルで利用可能か：はい／いいえ
• 各セクションのショートコード：…
• 本文に打ち込んだ価格や在庫数：なし

4. 公開前の確認

• 同期を実行した日：…
• Shopifyと比較した価格、通貨、バリエーション、在庫状況：…
• 幅320から414ピクセルでのモバイル表示の確認：…
• 購入操作が正しいShopifyストアに進むか：…
• 画像の権利の確認、デモまたはテストデータの明記：…

5. 保守

• 担当者：…
• 更新のきっかけ：コレクションへの商品の追加または削除。価格、在庫状況、バリエーション、画像の変更。アドバイスが正確でなくなったとき
• 最後に実際に確認した日（手入力し、ビルド日から自動で取らない）：…

公開後はどうしますか？

ガイドは、定期的な保守が必要なページとして扱ってください。Shopifyでコレクションや商品が変わるたびに、同期を実行し、公開中のガイドを開き直して、確認リストをもう一度たどります。PROでは、有効なライセンスがあれば同期をスケジュールするオプションが加わります。スケジュールされた実行はWP-Cronに依存し、即時の更新ではありません。

Morrowfieldのケーススタディでは、同じ架空のカタログを、コレクションページ、商品ページ、そしてこのガイドで紹介しています。自分のガイドを作るには、WordPress.orgで無料プラグインを試し、そのうえでブロックとショートコードで公開の手順に従ってください。