ストア検索: ユーザーがストアを検索できるようにする

  • 更新日 Nov 11, 2025
  • 公開日 Nov 4, 2025
  • 1 分で読めます
Prev Next

ClickFunnels のストア検索要素を使用すると、顧客はストア内で商品をすばやく見つけることができ、ショッピング エクスペリエンスが向上します。ストア検索を追加してカスタマイズすることで、特に大規模な商品コレクション内で、ユーザーがアイテムを簡単に見つけられるようにすることができます。この記事では、ストアフロントにストア検索要素を追加し、その外観をパーソナライズする方法について説明します。

必要条件

  • アクティブなClickFunnelsアカウント

  • Storeアプリ

  • A product created in the Products section

  • 「商品コレクション」に含まれる各商品が オンラインストアに表示されるように設定されていることを確認します。

店舗検索要素を追加する方法

  1. ClickFunnels ダッシュボードで、 ストア アプリに移動し、[ 概要] を選択します。

  2. [ ストアのカスタマイズ] をクリックして、ストア テーマ エディターを開きます。

  3. 左側のメニューの [ サイトのテーマ ページ] で、検索バーを追加するページを選択します。

  4. 選択したページ内で、行内の 「要素の追加」 をクリックして、「要素」メニューを開きます。

  5. 要素で、[ストア] カテゴリから [検索 ] を選択します。

店舗検索要素のカスタマイズ

設定へのアクセス

要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車⚙️アイコンをクリックするか、要素を直接クリックします。

プレビュー

この設定を使用して、検索結果の有無にかかわらずモーダルがどのように表示されるかをテストします。

  • モーダルを非表示: モーダルを非表示にして、検索バー要素のみをプレビューできるようにします。

  • モーダルを表示: 製品名や画像などのプレースホルダ コンテンツを含むモーダルを表示するため、保存する前にレイアウトとデザインを確認できます。
     search preview

上マージン

「上余白」設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。

デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。

検索アイコン

検索バー内での検索アイコンの表示方法を調整します。 Search Icon  

  • サイズ: デザインのニーズに合わせてアイコンのサイズをピクセル単位で設定します。

  • 色: ストアのテーマに合わせたアイコンの色を選択します。

  • 配置: 検索バー内でアイコンを左、中央、または右に配置します。

全般

ストア検索モーダルの全体的な外観と機能をカスタマイズします。  General Settings  

  • モーダル背景: 検索結果モーダルの背景色を選択します。

  • テキストの色: 読みやすさを高めるために、モーダルに表示されるテキストの色を選択します。

  • テキストサイズ:モーダルテキストのフォントサイズを調整します。オプションには、小、中、大などがあります。

  • 入力テキスト: 検索バーにプレースホルダーテキスト(「製品の検索」など)を設定して、ユーザーの検索方法をガイドします。

  • タイトル: 検索結果の上に表示されるタイトル(例:「人気商品」)を入力します。

  • 結果テキストなし: 検索語に一致する商品がない場合に表示されるメッセージをカスタマイズします。 {search} をプレースホルダーとして使用して、ユーザーが入力した用語を表示します (例: "{search} の結果が見つかりません")。

詳細設定

コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。

コントロールパネル

要素コントロール パネルは、ページ エディターのすべての要素の下部に表示され、その要素の重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。

  • ALL: 要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。

  • デスクトップアイコン:要素はデスクトップビューにのみ表示されます。

  • モバイルアイコン:要素はモバイルビューでのみ表示されます。

  • 目のアイコン: これを使用して、ページから要素を非表示にします。要素はエディターに引き続き表示されますが、訪問者には表示されません。

  • コード アイコン: このアイコンはコード エディターを開き、カスタム CSS または JavaScript コードを挿入して要素の動作やスタイルを変更できます。

  • ゴミ箱アイコン: ページエディタから要素を完全に削除します。

関連記事