基本的なウィジェットのチュートリアル

このチュートリアルに従って、基本的なオーバーレイマーチャンダイジングウィジェットを作成します。始める前に、前提条件を必ず確認してください。また、ご自身のサイトで有効なURLが準備できていることを確認してください。

1. リストから作成

まず、ポータルの「マーチャンダイジング」セクションに移動し、左側のサイドバーにある「ウィジェット」をクリックします。ウィジェットのリストが表示されます（空の場合もあります）。ここから、画面の右上にある「ウィジェットを追加」をクリックします。

図1：ウィジェットの作成

次に表示されるポップアップで、「おすすめ」オプションを選択し、「次へ」をクリックして次のステップに進みます。

2. 一般設定を定義

図2：一般設定

まず、ウィジェットの一般設定をカスタマイズします。このチュートリアルでは、2つの要素のみを編集する必要があります。

• 表示URL：ウェブサイトの特定のページに設定します。このチュートリアルでは、テストウェブサイトhttps://fp-dev-1.myshopify.comに設定します。
• 離脱意図でトリガー：下にスクロールして、この設定を無効にします。

3. 商品ソースを選択

左側のサイドバーにある「おすすめ」コンポーネントをクリックして、商品レコメンデーション設定を表示します。次に、設定サイドバーの上部にある「商品ソース」設定で「変更」をクリックします。以下のようなポップアップが表示されます。

図3：商品ソース

最初の「モデル」設定で、「あなたにおすすめ（Fanplayr AI）」モデルを見つけて選択します。他の設定を編集する必要はありません。「更新」をクリックして変更を確定します。

4. 外観をカスタマイズ

次に、ウィジェットにユニークなスタイルを与えましょう。以下は、いくつかの調整後の最終バージョンです。以下に、この外観を実現するためにデフォルトから行われた各変更のリストを示します。

図4：更新されたプレビュー

「一般設定」で

• 「幅」を600pxに設定
• 「角の半径」を20pxに設定
• 「基本フォント -> 色」を白に設定
• 「背景色」をhex #031044に設定

最初の「テキストブロック」コンポーネントで：

• テキスト「コンテンツ」を「これらが気に入ると思います」に変更します。テキストの色が未設定であることを確認します。
• 「下部パディング」を削除するか、0に設定します。

「おすすめ」コンポーネントで：

• 「画像形状」を正方形に設定
• 「商品価格」のチェックを外す
• 「商品名」で「スタイルを編集」をクリック
  • 次のテキストスタイルエディターで「太字」の横のチェックボックスがオンになっていることを確認します。
• 「アイテム間隔」を30pxに設定

5. 公開

ウィジェットをさらにカスタマイズするために、引き続き編集してください。完了したら、左上隅にある編集アイコンをクリックして、ウィジェットに名前を付けます。この名前は、システム内でウィジェットを識別するためにのみ使用されます。

名前を設定したら、右上隅の「公開」をクリックして、ウィジェットをサイトに公開します。

6. 表示

ステップ2で定義したURLに移動して、新しく公開されたウィジェットを確認してください！ページが読み込まれてから数秒後に、画面の中央にポップアップ表示されるはずです。

図5：ライブウィジェット

トラブルシューティング

サイトにウィジェットが表示されない

• Fanplayrのスクリプトがサイトで実行されていることを確認してください。
• 表示URLを再確認してください
• 選択したモデルが商品を返さなかった可能性があります。商品が返されない場合、ウィジェットは表示されません。同様に、選択したモデルが現在表示されている商品に依存している場合、ウィジェットは商品ページでのみ表示されます。

ウィジェットがエディターとライブで少し異なって見える

• ライブウィジェットは、お使いのページから一部のCSSを継承します。特にテキストの外観を制御するfont-familyなどが挙げられます。公開する前に、ライブプレビュー機能を使用して、ウィジェットがサイトでどのように表示されるかを確認してください。