スティッキー追加ボタンを追加する方法
スティッキー追加ボタンは、購入者が商品ページを閲覧している間もオファーにアクセスしやすくします。ボタンを押すとオファーまでスクロールして戻るか、選択したオファーを直接カートに追加できます。購入者がウィジェットを通り過ぎるまでスクロールした後、またはページの読み込み時から表示できます。
スティッキー追加ボタンを有効にする
スティッキーバーは、バンドルエディタ内でバンドルごとに設定します。
- 編集するバンドルを開きます。
- 「アドオン」タブを開き、「スティッキー追加ボタン」を展開します。
- 「スティッキー追加ボタン」のタイトル横にあるスイッチをオンにします。
バーは、このバンドルが表示される商品ページに表示されます。バンドルが公開され、ウィジェットが適切な商品に表示される設定になっていることを確認してください。
ボタンの動作を選択
ボタンの動作には、次の2つの選択肢があります。
- 「オファーまでスクロール」を選ぶと、購入者はオファーを選択するためにウィジェットへ戻ります。
- 「選択したオファーをカートに追加」を選ぶと、選択したオファーが表示され、選択した商品、ギフト、追加アイテムとともに追加されます。
カート追加モードでは、選択したオファー、バリエーション、数量、定期購入、アドオンの変更がバーに反映されます。合計金額はウィジェットのフッターと一致します。価格を表示、元の価格を表示、節約額バッジを表示、ボタン内に価格を表示を有効にできます。
購入者がバリエーションを選択する必要がある場合や、バンドルのスロットを埋める必要がある場合、ボタンはウィジェットへ移動して完了できるようにします。オファーが選択されていない場合は、オプションを選択するよう促します。直接追加を妨げるテーマでは、ボタンはウィジェットまでスクロールする動作に切り替わります。オプションのアドオンのみを含む割引では、購入者がウィジェットで選択できるよう、オファーまでスクロールする動作が使用されます。このボタンは「今すぐ購入」ではなく、通常のカートフローを使用します。
バーを表示するタイミングを選択する
バーを表示で、ウィジェットが画面外にスクロールした後またはページの読み込み時から常にを選択します。どちらもボタンの動作に関係なく使用できます。既存のバーは、変更するまでスクロール後の動作を維持します。
「常に、ページの読み込み時から」を選択すると、カート追加モードは事前に選択されたオファーで開始し、その後の選択に追従します。オファーが選択されていない状態でページを読み込めるようにした場合、バーから追加する前に購入者がオファーを選択する必要があります。
レイアウトを選択: フローティングと固定
スティッキーバーのレイアウトオプションで、バーをページ上にどのように配置するかを選択します。
- フローティング - 端から少し離れた中央配置のカードで、角丸を維持します。
- 固定 - 画面下端に固定され、端から端まで広がる全幅のバーです。
2つのレイアウトでは、角丸の扱いが異なります。固定に切り替えると、バーを画面の端にぴったり配置できるよう、バーの角の半径が0になります。フローティングに切り替えると、半径が0だった場合は角丸に戻ります。その後、スタイル設定で角の半径を微調整できますが、固定は角を直角に保つ設計です。
デスクトップとモバイルに表示する
バーを表示する場所は、2つのチェックボックスで制御します。
- デスクトップに表示
- モバイルに表示
どちらもデフォルトでオンになっています。どちらかをオフにして、例えば元のカート追加ボタンが画面外にスクロールされやすいモバイルだけにスティッキーバーを表示できます。
最も長いオファーのタイトルと価格を使って、実際のモバイルページを確認してください。画面幅が狭い場合、バーでは元の価格、節約額、ボタン内の価格に関する一部の詳細が簡略化され、操作ボタンを読みやすく保ちます。小さなスマートフォンですべてのデスクトップ向け詳細が表示されるとは限りません。
タイトルとボタンテキストを設定
オファーまでスクロールモードでは、スティッキーバーに2つのテキストフィールドがあります。
- タイトル - ボタンの横に表示されるテキストです。テンプレート変数に対応しているため、
{{product_title}}（デフォルト）、{{saved_percentage}}、{{price_total}}などの動的な値を挿入できます。フィールドの変数挿入機能を使って追加してください。 - ボタンテキスト - スティッキーボタンに表示されるラベルです。デフォルトは「バンドルを選択」です。
カート追加モードでは、選択したオファーのタイトルが表示され、専用のカートに追加ボタンのテキストフィールドが使用されます。2つのボタンテキストには個別の翻訳があるため、一方のモードの文言を変更しても、もう一方は上書きされません。
スティッキーバーの文言では、無料ギフトバッジ、単一および複数のアドオンバッジ、オプションを選択ボタンのテキストも変更できます。複数アドオンのメッセージには{{count}}を残して、実際の件数を表示できるようにしてください。
埋め込みカウントダウンを追加（任意）
スティッキーバーにカウントダウンを表示チェックボックスを使って、スティッキーバー内にカウントダウンを表示できます。
このオプションを使用するには、同じバンドルでカウントダウンタイマーを有効にする必要があります。カウントダウンタイマーがオフの場合、チェックボックスは無効になり選択できません。カウントダウンタイマーを有効にすると、このオプションをオンにできます。
埋め込みカウントダウンでは、カウントダウンタイマー設定のコンパクトタイトルが再利用され、スタイルはスティッキーバーのテーマに従います。
後からカウントダウンタイマーをオフにすると、スティッキーバーのカウントダウンも自動的にオフになります。
スティッキーバーのスタイルを設定
スティッキー追加ボタンのスタイルグループを開いて、外観を調整します。設定項目はアコーディオンに分かれています。
- 背景 - バーの単色またはグラデーションです。
- コンテナ - 枠線の色、枠線の幅、角の半径、パディング、影です。
- タイトル - テキストの色、フォントサイズ、フォントの太さです。
- 価格 - カート追加モードでの価格テキストのスタイルです。
- ボタン - 背景色、テキストの色、フォントサイズ、フォントの太さ、パディング、角の半径です。
- 商品画像 - 画像サイズ、角の半径、枠線の幅、枠線の色です。
- カウントダウン - 背景色、テキストの色、フォントサイズ、フォントの太さ、パディングです。このグループは、埋め込みカウントダウンがオンの場合のみ表示されます。
統一感のある外観をすばやく設定するには、セクション上部のプリセットカラーピッカーを使用します。スティッキーATCの角をメインウィジェットに合わせるも利用でき、バーの角の半径をメインのバンドルウィジェットに合わせて、2つの要素に統一感を持たせます。
角の半径について
固定レイアウトでは、角の半径が0になることに注意してください。コンテナのスタイル設定で角丸の半径を設定したのに角が直角に見える場合は、レイアウトがフローティングに設定されているか確認してください。
保存して両方の動作をテスト
保存してから、割引が有効な対象商品ページをテストします。スクロールモードでは、オファーを通り過ぎるまでスクロールし、スティッキーボタンで戻ります。カート追加モードでは、オファーとバリエーションを選択し、スティッキーボタンから追加します。カートとチェックアウトで、数量、バリエーション、合計金額を確認してください。モバイルでも繰り返し、在庫切れまたは未完了の選択をテストします。バーによって購入者が戻り、選択を完了できる必要があります。
この例では、「2個購入」により、10%オフ後の商品小計$43.20でアイボリー / スモールのバッグが2個追加されます。在庫切れのブラッシュ / スモールの組み合わせを選択すると、スティッキーアクションがオプションを選択に変わり、利用可能なサイズに変更すると「カートに追加」に戻ります。カウントダウンは表示のみで、0になっても割引を停止しません。期限切れの動作については、カウントダウンタイマーをご覧ください。
この記事は役に立ちましたか？
皆さまからのフィードバックがドキュメントの改善に役立ちます。