セールスブーストセクション
これらは Vertex の コンバージョン重視セクション です — 緊急性キュー、プロモサーフェス、モーダルフロー、バンドルブロック。いず れもサードパーティアプリは不要です。すべて Shopify Theme Store ポリシー (永続的ウィッシュリストなし、トラッキングスクリプトなし、アフィリエイトリンクなし) を尊重します。
緊急性キューを積み重ねすぎると互いに打ち消し合います。カウントダウンの隣に低在庫カウンター、その隣にプロモポップアップでは 必死 に見えます。キャンペーンに合うものを 1 つ選び、それに集中して、ローテーションしてください。
promo-banner
セクションファイル: sections/promo-banner.liquid
非表示可能なトップバナー — 通常、サイト全体のセール、送料無料の閾値、または季節キャンペーンを宣伝するのに使用。アナウンスメントバー (常時表示のクローム) とは別で、プロモバナーは キャンペーン駆動 かつ非表示可能です。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| テキスト | リッチテキスト | 短い価値メッセージ — 「春のセール · $1,000 以上の注文で 15% オフ」。 |
| 背景色 | カラー | 高コントラストのアクセントを選択 — アンバー、赤橙、ティールなど。 |
| リンク URL | URL | バナーのクリックターゲット (帯全体がクリック可能)。 |
| リンクラベル | テキスト | インライン CTA — 「セールを見る →」。 |
| 非表示可能 | チェックボックス | デフォルト オン。× 閉じるボタン + localStorage 永続化を追加。 |
| 位置 | Select | above_header (デフォルト) · below_header。Above-header はより緊急に読め、Below-header はよりバナーらしく読めます。 |
非表示可能性
非表示可能 がオンのとき、× ボタンは vertex_promo_dismissed:{section-id} キーを localStorage に書き込みます。バーは訪問者がサイトデータをクリアするまで非表示のままになります — または異なる ID でセクションを再公開するまで。
非表示にしたプロモを新しいキャンペーン向けに再表示したい場合は、セクション ID を変更します (カスタマイザーでセクションを削除 + 再追加)。古い localStorage キーは一致しなくなり、バナーは全員に再び表示されます。
promo-popup
セクションファイル: sections/promo-popup.liquid
画像、見出し、本文、CTA を備えた自動オープンモーダル。訪問者がページ読み込みごとに見ないように、設定可能なトリガーとクッキーベースのケイデンス。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| 見出し | テキスト | 「登録して 10% オフ」 / 「待って — 無料サンプルキットを取得」。 |
| 本文 | リッチテキスト | 短い安心感 + バリュープロップ。 |
| 画像 | 画像 | サイド描画イラスト (またはフルブリード背景)。 |
| CTA ラベル | テキスト | 「サインアップ」 / 「キットを取得」。 |
| CTA URL | URL | フォームページまたは商品。 |
| トリガー | Select | immediate · on_scroll (ページの 50% をスクロール後) · exit_intent (マウス離脱検出)。 |
| 遅延秒数 | 数値 | トリガーが immediate のときのみ使用。デフォルト 5。 |
| クッキー有効日数 | 数値 | デフォルト 7。閉じたかコンバートした訪問者は N 日間再び見ません。 |
トリガーの説明
| トリガー | 最適な対象 | UX 考慮事項 |
|---|---|---|
| 即時 (遅延) | ニュースレター登録、初回訪問者オファー | 最も侵略的 — 5〜10 秒の遅延を最低限使用 |
| スクロール時 (50%) | エンゲージメントシグナル — 訪問者がスクロールして関心を示した後にのみ発火 | コンバージョン + UX の最良のバランス |
| 離脱意図 | 最終チャンスオファー、放棄回復 | デスクトップのみ — 離脱意図はモバイルで確実に発火しません |
クッキーキーは vertex_promo_popup:{section-id} です。クッキーが期限切れになるまでモーダルは再オープンしません。
countdown
セクションファイル: sections/countdown.liquid
日 / 時 / 分 / 秒カウンター。JS によるライブカウント、初期状態用にサーバー描画 (フラッシュなし)。
設定
| 設定 | 種類 | 注記 |
|---|---|---|
| 見出し | テキスト | 「春のセール終了まで」。 |
| 終了日 | Date picker | 有効期限の日時。マーチャントのストアタイムゾーンで保存。 |
| 期限切れテキスト | テキスト | タイマーがゼロに達するとカウンターを置き換える。 「セールは終了しました」。 |
| リンク URL | URL | カウンターの下に任意の CTA。 |
| リンクラベル | テキスト | 「今すぐ買う」。 |
| 配色 | Select | 標準の配色ドロップダウン。 |
カウントの仕組み
assets/countdown.js は requestAnimationFrame ループを実行し、毎秒タイマーを更新します。ターゲット時間に達すると、カウンターは 期限切れテキスト に置き換えられます。リンク / CTA は期限切れ後に非表示になります。
偽のカウントダウン (永久に 24 時間、ページ再読み込みでリセット) は信頼を破壊します。終了日 を実際のキャンペーン終了に紐付け、セクションに期限切れ状態を任せてください。
featured-bundles
セクションファイル: sections/featured-bundles.liquid
画像、タイトル、割引バッジ、ATC を備えたキュレーション済みバンドルカード。各ブロックは 1 つのバンドル (通常、2〜5 SKU をバンドルした親商 品で、管理画面で Shopify Bundle として設定されたもの) です。
ブロックごとの設定
| 設定 | 種類 | 注記 |
|---|---|---|
| 商品 | 商品ピッカー | バンドル親商品。 |
| バンドルラベル | テキスト | 商品タイトルを上書き — 「Starter MRO Kit」。 |
| 割引テキスト | テキスト | 画像の上に重ねるバッジ — 「15% オフ」 / 「2 個分の値段で 3 個」。 |
| 説明 | リッチテキスト | タイトル下の短いバリュープロップ。 |
セクション設定
- 見出し — 「バンドルで節約」
- カラム — 2 / 3 / 4
- 価格を表示 — トグル (ログイン必須価格を尊重)
割引バッジのスタイリング
割引テキストは画像の右上隅に円形ピルとして描画されます。アクセントカラー (アンバー、赤橙、ティール) を使用してください — バッジはバンドルのビジュアルを圧倒しないほど小さいです。
在庫カウンター (低在庫インジケーター)
スニペット: snippets/stock-counter.liquid (main-product 内のブロックとして描画)
すでに 商品ページ で説明されています。在庫を追跡しているバリアントにのみ表示され、在庫が低い閾値 (10 個) に達すると「残り N 個」の警告に切り替わります。競合に正確な在庫を明かさずに緊急性を引き起こします。
状態:
- 10 個超: 「在庫あり」
- 10 個以下: 「残り 4 個」
- バックオーダー可能 (ゼロだが販売継続に設定): 「バックオーダー — 7〜10 日で出荷」
- 在庫切れ (ゼロ、バックオーダー不可): 「Sold out」 (再入荷フォーム付き)
再入荷アラート
スニペット: snippets/back-in-stock.liquid (main-product 内の在庫切れバリアントで自動描画)
プリオーダーが有効でない場合、在庫切れバリアント に表示されるメールオプトインフォーム。ネイティブ — サードパーティアプリなし。
仕組み
- 購入者が在庫切れバリアントを選択
- ATC がメール入力 + 通知する ボタンに置き換えられる
- 送信時、購入者のメールが
back_in_stock:{product_id}:{variant_id}タグ付きで Shopify 顧客リストに書き込まれる - 再入荷してバリアントを再公開したら、そのタグで顧客をフィルタリングしてキャンペーンを送信できる
マーチャントが行うこと
- Shopify 管理画面で
back_in_stock:{product_id}:*タグでフィルタリングされた顧客セグメントを作成 - 再入荷したら、Shopify Email または ESP 経由でそのセグメントに手動キャンペーンを送信
Vertex はオプトインを取り込みます。再入荷メールの送信は手動ステップです — Shopify はアプリなしでテーマコードから「再入荷で自動メール」ネイティブフックを公開していません。トレードオフは完全な Theme Store ポリシー準拠 + 月額コストゼロです。
クイックビューモーダル
アセット: assets/quick-view.js + snippets/quick-view-button.liquid
商品カードの クイックビュー ボタンでトリガーされます。コレクションページを離れずに、商品ギャラリー、バリアントピッカー、数量入力、ATC を備えたモーダルを開きます。
モーダルに描画されるもの
- マルチ画像ギャラリー (モバイルでスワイプ)
- タイトル + 価格 (ログイン必須価格 + B2B カタログ価格を尊重)
- バリアントピッカー
- 数量入力 (MOQ / 最大 / ケースパック適用)
- ATC ボタン
- 「詳細を見る →」 PDP へのリンク
設定 (商品カード / コレクションセクション)
- クイックビューボタンを表示 — トグル (セクションごと:
featured-collection、collection-list、検索結果、関連商品) - クイックビューボタンラベル — テキスト (デフォルトは 「クイックビュー」)
有効化 / 無効化のタイミング
| ユースケース | 推奨 |
|---|---|
| 購入者がバリアントを素早く比較する大量カタログ | 有効 — 「20 商品を閲覧し、3 つを追加」フローを高速化 |
| 購入者が決定前にデータシート + 仕様が必要な高度に技術的なカタログ | 無効 — クイックビューは仕様やドキュメントを表示しないため、PDP へのクリックスルーを強制 |
何をいつ使うか
| 目標 | セクション |
|---|---|
| サイト全体のキャンペーンへの注意を促す | promo-banner |
| メールを取り込み、初回ディスカウントを提供 | promo-popup |
| ハード期限のある時間限定オファー | countdown |
| キュレーション済みの複数商品オファーを強調 | featured-bundles |
| 正確な在庫を明かさずに PDP で緊急性 | 在庫カウンター |
| 在庫切れアイテムの需要を取り込む | 再入荷アラート |
| コレクションページ → ATC フローの摩擦を減らす | クイックビュー |
次のステップ
- 商品ページセクション → — PDP の在庫カウンター + 再入荷の完全版
- ホームページマーケティング → — ホームページにプロモバナーを配置する場所
- ファインダーセクション → — Make/Model/Year + Brand/Category/Capacity ファインダー
- テーマ設定リファレンス → — 配色、レイアウト、商品ページのトグル