基本的なウィジェットチュートリアル
このチュートリアルに従って、基本的なオーバーレイ型マーチャンダイジングウィジェットを作成します。開始する前に、前提条件を確認してください。また、サイトで有効なURLが用意されていることを確認してください。
1. リストからの作成
まず、ポータルの「Merchandising」セクションに移動し、左側のサイドバーにある「Widgets」をクリックします。ウィジェットのリスト（空の場合もあります）が表示されます。ここから、画面右上にある「Add Widget」をクリックします。
図1: ウィジェットの作成
表示されるポップアップで、「Recommendation」オプションを選択し、「Next」をクリックして次のステップに進みます。
2. 一般設定の定義
図2: 一般設定
まず、ウィジェットの一般設定をカスタマイズします。このチュートリアルでは、2つの要素のみを編集する必要があります。
- Display URL: ウェブサイト上の特定のページに設定します。このチュートリアルでは、
https://fp-dev-1.myshopify.comのテストウェブサイトに設定します。 - Trigger on Exit Intent: スクロールダウンして、この設定を無効にします。
3. 商品ソースの選択
左サイドバーの「Recommendation」コンポーネントをクリックして、商品レコメンデーション設定を表示します。次に、設定サイドバーの上部にある「Product Source」設定の「Change」をクリックします。以下のようなポップアップが表示されます。
図3: 商品ソース
最初の「Model」設定で、「Recommended for You (Fanplayr AI)」モデルを見つけて選択します。他の設定を編集する必要はありません。「Update」をクリックして変更を確定します。
4. 外観のカスタマイズ
次に、ウィジェットにユニークなスタイルを与えましょう。以下は、いくつかの調整後の最終バージョンです。その後に、この外観を実現するためにデフォルトから行われた各変更のリストがあります。
図4: 更新されたプレビュー
「General Settings」で
- 「Width」を600pxに設定
- 「Corner Radius」を20pxに設定
- 「Base Font -> Color」を白に設定
- 「Background Color」を
hex #031044に設定
最初の「Text Block」コンポーネントで：
- テキスト「Content」を「We think you will love these」に編集します。テキストの色が設定されていないことを確認してください。
- 「Bottom Padding」を削除するか、0に設定します。
「Recommendation」コンポーネントで：
- 「Image Shape」を正方形に設定
- 「Product Price」のチェックを外す
- 「Product Name」の「Edit Style」をクリックします。
- 次のテキストスタイルエディターで「Bold」の横のチェックボックスがオンになっていることを確認します。
- 「Item Gap」を30pxに設定
5. 公開
自由に編集を続けて、ウィジェットをさらにカスタマイズしてください。完了したら、左上隅の編集アイコンをクリックしてウィジェットに名前を付けます。この名前は、システム内でウィジェットを識別するために使用されます。
名前を設定したら、右上隅の「Publish」をクリックして、ウィジェットをサイトに公開します。
6. 表示
ステップ2で定義したURLに移動して、新しく公開されたウィジェットを確認してください！ページが読み込まれてから数秒後に、画面の中央にポップアップ表示されるはずです。
図5: ライブウィジェット
トラブルシューティング
サイトでウィジェットが表示されない
- Fanplayrのスクリプトがサイトで実行されていることを確認してください。
- Display URLを再確認してください。
- 選択したモデルが商品を返さなかった可能性があります。商品が返されない場合、ウィジェットは表示されません。同様に、選択したモデルが現在表示されている商品に依存する場合、ウィジェットは商品ページでのみ表示されます。
ウィジェットがエディターとライブで少し異なるように見える
- ライブウィジェットは、ページのCSSの一部を継承します。特に
font-familyはテキストの外観を制御します。ライブプレビュー機能を使用して、公開前にウィジェットがサイトでどのように表示されるかを確認してください。