ストア検索: ユーザーがストアを検索できるようにする
公開日: 更新日:
ClickFunnels のストア検索要素を使用すると、顧客はストア内で商品をすばやく見つけることができ、ショッピング エクスペリエンスが向上します。ストア検索を追加してカスタマイズすることで、特に大規模な商品コレクション内で、ユーザーがアイテムを簡単に見つけられるようにすることができます。この記事では、ストアフロントにストア検索要素を追加し、その外観をパーソナライズする方法について説明します。 
-
アクティブなClickFunnelsアカウント
-
ストアアプリ
-
「商品コレクション」に含まれる各商品が ストア に表示されるように設定されていること（商品の 販売チャネル タブの ストア スイッチ）を確認します。
ストア検索要素を追加する方法
Section titled “ストア検索要素を追加する方法”-
ClickFunnels ダッシュボードで ストア アプリに移動し、概要 を選択します。
-
ストアをデザイン をクリックして、ストアテーマエディターを開きます。
-
左側のメニューの サイトテーマページ で、検索バーを追加するページを選択します。
-
選択したページ内で、行内の 「要素の追加」 をクリックして、「要素」メニューを開きます。
-
要素メニューの ストア カテゴリから 検索 を選択します。
ストア検索要素のカスタマイズ
Section titled “ストア検索要素のカスタマイズ”設定へのアクセス
Section titled “設定へのアクセス”要素にカーソルを合わせると、その境界線がオレンジ色で強調表示されます。要素の設定にアクセスするには、歯車 ⚙️ アイコンをクリックするか、要素を直接クリックします。
設定パネル上部のプレビューセレクターを使用して、エディターの表示を検索アイコンと検索モーダルの間で切り替えます。
-
Icon: モーダルを非表示にして、検索アイコンのみをプレビューできるようにします。
-
Modal: 商品名や画像などのプレースホルダーコンテンツを含むモーダルを表示するため、保存する前にレイアウトとデザインを確認できます。
上マージン
上マージン設定では、現在のコンテナ(セクション、行、フレックス、エレメント)とそのすぐ上にあるコンテナとの間のスペースを制御できます。以前のコンテナが存在しない場合、マージンは親コンテナを基準にして適用されます。先行コンテナが追加されていない場合、Body は親になります。
デバイスアイコン ( 🖥️ & 📱 ) を使用して、デスクトップとモバイルの上マージン値を個別に設定できます。モバイル値が指定されていない場合は、デフォルトでデスクトップ設定を継承します。スライダーを使用するか、ピクセル (px) またはパーセンテージ (%) で値を手動で入力して、画面サイズ全体で一貫した間隔を作成します。
検索アイコン
検索バー内での検索アイコンの表示方法を調整します。 
-
サイズ: デザインのニーズに合わせてアイコンのサイズをピクセル単位で設定します。
-
色: ストアのテーマに合わせたアイコンの色を選択します。
-
整列: 検索バー内でアイコンを左、中央、または右に配置します。
一般
ストア検索モーダルの全体的な外観と機能をカスタマイズします。 
-
バックドロップの色: 検索モーダルの背後に表示されるオーバーレイの色を選択します。
-
背景色: 検索モーダルの背景色を選択します。
-
テキストカラー: 読みやすさを高めるために、モーダルに表示されるテキストの色を選択します。
-
ボーダーの色: モーダルで使用されるボーダーの色を設定します。
-
フォーカスの境界線の色: 顧客が入力している間の検索フィールドのボーダーの色を設定します。
-
テキストサイズ: モーダルテキストのフォントサイズを調整します。オプションには、エクストラスモール、小、中、大、特大があります。デフォルトは大です。
-
ブランド画像: ロゴなどの画像をモーダルの上部に表示します。デフォルトでオンになっています。ブランド画像のURL で画像を選択します。
テキスト設定
-
入力テキスト: 検索バーにプレースホルダーテキスト(デフォルト:「Search Products」)を設定して、ユーザーの検索方法をガイドします。
-
タイトル: 検索結果の上に表示されるタイトルを入力します。デフォルトは「Recommended Products」です。
-
結果が見つかりません: 検索語に一致する商品がない場合に表示されるメッセージをカスタマイズします。
{search}をプレースホルダーとして使用して、ユーザーが入力した用語を表示します (例: “No results found for {search}”)。
詳細設定
コンテナ (セクション、行、列、および要素) をさらにカスタマイズするために、ClickFunnels には、スタイル、高度な CSS、アニメーション、およびレンダリング ロジックを制御できる 詳細 設定が用意されています。これらの高度な機能を専用の記事に分けて、1 か所にまとめたコンテンツが多すぎて圧倒されないようにし、ドキュメントを簡潔に保ちます。詳細については、次のリソースを参照してください。
-
詳細設定 - スタイルのカスタマイズ: コンテンツを動的に入力し、コンテナーを配置し、z-index を適用する方法について説明します。
-
詳細設定 - アニメーションのカスタマイズ: アニメーションの追加方法、出入り効果の制御方法、アニメーション遅延の調整方法を学習します。
-
詳細設定 - ロジックのカスタマイズ: 条件付きロジックを要素に適用し、カスタム属性を追加する方法を学習します。
コントロールパネル
要素コントロール パネルは、ページ エディターのすべての要素の下部に表示され、その要素の重要な設定とアクションにすばやくアクセスできます。各アイコンが表す内容は次のとおりです。
-
ALL: 要素はすべてのデバイス (デスクトップ、タブレット、モバイル) に表示されます。
-
デスクトップアイコン:要素はデスクトップビューにのみ表示されます。
-
モバイルアイコン:要素はモバイルビューでのみ表示されます。
-
目のアイコン: これを使用して、ページから要素を非表示にします。要素はエディターに引き続き表示されますが、訪問者には表示されません。
-
コード (
</>): このコンテナのコードエディタを開き、カスタム CSS を追加してスタイルを変更できます。エディタにはコンテナの CSS IDセレクター が表示されるため、CSS をこのコンテナだけに適用できます。設定パネル上部のコードアイコンから開くか、ページ上のコンテナにカーソルを合わせてツールバーの コード をクリックします。 -
ゴミ箱アイコン: ページエディタから要素を完全に削除します。