決済前のおすすめ商品と「eギフトで贈れる商品を探す」バナー

eギフトの購入画面や商品ページには、あなたが設定しなくても表示される（または AnyGift担当窓口が設定すると表示される）2つの案内があります。

どちらも管理画面には設定項目がありません。表示をやめたい・表示したいときは、AnyGift担当窓口へご依頼ください。

決済前のおすすめ商品

「送料無料まであと少し」の購入者に、ちょうどよい価格の商品をすすめる機能です。例えば送料無料のラインが5,000円で、購入者のカートが4,200円なら、「あと ¥800 で送料無料です」という案内とともに、800円前後の商品が表示されます。購入者は送料を払う代わりに、もう1品をギフトに追加できます。

表示される場所と内容

eギフトの購入画面（注文情報の入力画面）に、「おすすめ商品も ご一緒にいかがですか？」という見出しで表示されます。

• 見出しの下に「あと ¥（残りの金額） で送料無料です」と表示されます（送料無料ではなく送料が安くなる設定の場合は「送料が ¥（金額） になります」）
• おすすめ商品は最大4件で、表示のたびにランダムに選ばれます
• 商品を押すと、バリエーションを選んで「カートに追加」できます

表示される条件

次の条件をすべて満たすときに表示されます。

• 送料設定で「送料無料の最低注文金額」を設定していて、カートの金額がまだその金額に届いていない
• カートに入っているのが、配送型eギフトの商品だけ（選べるギフト・店舗型eギフト・金券型eギフトが入っていない）
• 複数の相手に贈る（複数配送）購入ではない
• おすすめできる商品がある

おすすめ商品に選ばれるのは、次の条件をすべて満たす商品です。

• 価格が、送料無料までの残りの金額の100%〜120%（例: 残り800円なら800円〜960円）
• 「eギフト」が ON で、在庫が1以上ある配送型eギフトの商品
• 選べるギフト・店舗型eギフト・ラッピング用の商品ではない

送料無料の最低注文金額を設定していないストアでは、表示されません。

一度表示されたあとは、おすすめ商品をカートに追加するなどして送料無料の金額に届いても、おすすめ商品の枠と見出しは表示されたまま残ります。このとき「あと ¥（残りの金額） で送料無料です」のメッセージとおすすめ商品は表示されなくなります。

表示をやめたいとき

この機能は、初期状態ですべてのストアで有効になっています。表示しないようにしたいときは、AnyGift担当窓口へご依頼ください。管理画面からは切り替えられません。

見た目を変えたいとき

デザインカスタマイズで、次のクラス名に CSS を指定すると、見出しや並び方を変えられます。

例えば、見出しの文字色をブランドカラーにする場合は次のように書きます。

.anygift-impulse-products-section__title {
  color: #8b5a2b;
}

見出しの文言そのものは変えられません。

「eギフトで贈れる商品を探す」バナー

タグを設置したページのうち、eギフトの対象になっていない商品のページで、eギフトボタンの代わりに「eギフトで贈れる商品を探す」というリンク（バナー）を表示する機能です。「この商品はeギフトで贈れないけれど、ほかの商品なら贈れる」と伝えて、eギフトの対象商品をまとめたページへ案内できます。

表示される場所と条件

マーカー（<div data-anygift="marker"></div>）の位置に、eギフトボタンの代わりに表示されます。表示されるのは、次のような理由でeギフトボタンが出ない商品ページです。

• 商品管理に、その商品IDの商品が登録されていない
• その商品の「eギフト」が OFF になっている
• 50円未満のバリエーションがある
• 商品別のカスタム配送設定の対象になっていて、その設定でお届けできる日が1日もない（配送可能期間が過ぎている など）

バナーを押すと、設定したURLのページが別のタブで開きます。

表示したいとき・URLや文言を変えたいとき

初期状態では表示されません。表示するには、AnyGift担当窓口に次の内容をご依頼ください。管理画面からは設定できません。

• リンク先のURL: 例えば、あなたのストアの「eギフト対応商品」の特集ページや、カテゴリページのURL。リンク先のページは、あなたのストアで用意してください（AnyGift が商品一覧のページを作るわけではありません）
• 文言（任意）: 指定がなければ「eギフトで贈れる商品を探す」と表示されます

表示をやめたいとき、URLや文言を変えたいときも、AnyGift担当窓口へご依頼ください。

見た目を変えたいとき

デザインカスタマイズで、次のクラス名に CSS を指定できます。

例えば、バナーの幅をページに合わせて広げる場合は次のように書きます。

.anygift-any-gift-awareness-banner__link {
  width: 100%;
}