ClickFunnels でストアのテーマをカスタマイズすると、ストアの外観と機能を完全に制御できます。適切なデザインを使用すると、ブランドに合致し、顧客の購入を促す、スムーズで魅力的なショッピング体験を提供できます。この記事では、カスタマイズできるストアの主要な領域と、重要な変更を加えるための実践的な手順について説明します。
必要条件
アクティブなClickFunnelsアカウント
ワークスペースに追加された Store アプリ
店舗デザインの重要性を理解する
店舗のデザインは、単に見栄えを良くするだけではなく、顧客がビジネスとどのようにやり取りするかに直接影響します。考え抜かれてカスタマイズされたストアにより、顧客はナビゲートし、製品の詳細を理解し、購入を完了しやすくなります。ショッピング体験をスムーズかつ直感的にすることで、顧客満足度を向上させ、売上を増やすことができます。
店舗デザインが重要な理由:
顧客行動の誘導: よく整理された店舗は、顧客が混乱することなく探しているものを見つけるのに役立ちます。ビジュアルと明確な製品情報を戦略的に使用することで、ショッピング プロセスが簡単になり、顧客がジャーニーを放棄する可能性が減ります。
信頼と信用の構築: 顧客はプロフェッショナルで信頼できるショッピング環境を期待しています。店舗のデザインはブランドのアイデンティティを反映し、顧客が認識し信頼する統一感のある外観と雰囲気を生み出す必要があります。
売上とコンバージョンの向上: 使いやすいストアは、顧客がより長く滞在し、より多くの製品を調べ、購入を完了することを奨励します。製品レイアウトの最適化やチェックアウト プロセスの改善などの簡単な調整は、コンバージョン率に大きな影響を与える可能性があります。
ストアの各セクションをカスタマイズする方法を学ぶことで、美観を向上させるだけでなく、長期的なビジネスの成長を促進できる、顧客にとってより良いエクスペリエンスを構築することができます。
ストアテーマの割り当て方法
ストアダッシュボードの右上隅にある 歯車 ⚙️アイコンをクリックして、設定を開きます。
[ ストアのテーマ ] セクションまでスクロールします。
[ テーマ] ドロップダウンを使用して、ブランドのデザインに一致するテーマを選択します。
適切なオプションが表示されない場合は、[ 新しいテーマを探索 ]をクリックして、ストアで利用可能な他のテーマを参照します。
テーマの横にある プレビュー 👁 アイコンをクリックすると、そのデザインとレイアウトが表示されます。
[ ストアの更新 ] をクリックして、選択したテーマを適用します。
ストアエディターへのアクセス方法
カスタマイズを開始する前に、ストアのテーマエディターにアクセスする必要があります。次の手順を実行します:
ClickFunnelsダッシュボードで、左側のナビゲーションメニューの ストア アプリをクリックします。
ドロップダウンメニューから 「概要 」を選択して、ストアダッシュボードを開きます。
ストアダッシュボードから、 デザインストア をクリックしてテーマエディターにアクセスします。
テーマエディターに入ると、カスタマイズを開始できるさまざまなストアページが表示されます。
ストアのテーマページの概要
ストアのテーマは複数の サイトテーマページに分割されており、それぞれがストアのユーザージャーニーの特定の部分に対応しています。これらのページには次のものが含まれます。
店頭: ストアのホームページ。ここでは、ブランドを紹介し、主要な製品を紹介し、プロモーションやコレクションを強調します。
製品ページ: 名前、価格、画像、説明など、個々の製品の詳細を表示します。
コレクションページ: 関連する製品をグループ化して、顧客がカテゴリやテーマで閲覧できるようにします。
カートページ: 顧客がショッピングカートに追加した商品を表示し、数量を確認し、商品を削除し、チェックアウトに進むことができます。
チェックアウトページ: 購入プロセスの最終ステップを容易にします。顧客は配送と支払いの詳細を入力して注文を完了します。
注文確認ページ: 完了した注文を要約し、購入の詳細と確認を顧客に提供します。
アップセルページ: 最初の購入後に追加の商品を提供し、顧客に補完的な商品を追加し、全体的な注文額を増やすよう促します。
これらの各ページは、全体的なユーザー エクスペリエンスにとって重要です。これらをカスタマイズすると、ストアのルック アンド フィールを形作ることができ、直感的なショッピング プロセスを確保しながら一貫したブランド プレゼンテーションを作成できます。
テーマ構造を理解する
これらの各テーマページは、テーマエディターに表示されるように、セクション、行、および要素の組み合わせを使用して構築されます。各部分が表す内容は次のとおりです。
セクション: ページをさまざまな領域 (ヘッダー、商品リスト、フッターなど) に分割する大きなコンテナ。
行: セクションをさらに分割して、その中にコンテンツを整理できるようにします。
要素: 画像、テキスト、ボタン、製品ディスプレイなど、行内にある個々のコンポーネント。
ストアフロントをカスタマイズする方法
店頭は顧客が最初に目にするものであるため、良い第一印象を与えることが重要です。このページでは、ブランドを紹介し、商品を強調し、訪問者を探索するよう促します。
ストアフロントをカスタマイズする方法は次のとおりです。
テーマ エディターで、 ストア フロント ページが選択されていることを確認します。
セクションを追加し、そのセクション内に行を追加します。
オレンジ色の [ 要素の追加] ボタンをクリックして、[要素] メニューを開きます。
要素メニューから、テキスト、画像、ボタン、その他の機能を追加して、製品やプロモーションを紹介できます。
製品を表示するには、[ 製品 ] または [製品コレクション] 要素を選択します。これにより、既存の商品リストから画像、名前、価格などの商品の詳細が自動的に取得されます。
ブランドに合わせてフォント、色、間隔をカスタマイズして、レイアウトとデザインを調整します。店頭は視覚的に魅力的で、ナビゲートしやすいものでなければならないことを忘れないでください。
ページエディターの右上隅にある [保存 ]をクリックします。
役立つリソース:
製品ページのカスタマイズ方法
製品ページは、顧客が製品をクリックしたときに表示されるものです。説明、価格、画像、購入オプションなどの詳細が表示されます。このページをカスタマイズすることで、ブランドに一致させ、主要な製品機能を強調することができます。これにより、顧客は自分が何を購入しているのか、なぜそれが有益なのかを明確に理解し、ショッピング体験を向上させることができます。
製品ページをカスタマイズするには:
テーマエディターの左側のパネルから 製品 ページを選択します。
名前、説明、価格、画像などの 要素 を追加します。
ブランドに合わせてデザインやレイアウトを調整します。
ページエディタの右上隅にある 「保存」 をクリックします。
より詳細なウォークスルーについては、 How to Customize the Store Product Pageを参照してください。
コレクションページをカスタマイズする方法
コレクション ページには、カテゴリまたはテーマごとに整理された製品のグループが表示され、顧客はアイテムを簡単に閲覧して見つけることができます。このページをカスタマイズすると、コレクションが視覚的に魅力的で整理された方法で表示されます。
コレクションページをカスタマイズするには:
テーマエディターの左側のメニューから [コレクション ページ] を選択します。
セクションと行を追加し、[要素の追加] をクリックして、製品コレクション タイプ要素を挿入します。
名前、価格、画像などの製品の詳細をカスタマイズします。ブランディングに合わせてレイアウトを調整します。
詳細については、 How to Customize Store Collections Pageを参照してください。
カートページをカスタマイズする方法
カート ページには、数量の更新や商品の削除など、チェックアウト前に選択した商品の概要が顧客に表示されます。このページをカスタマイズすると、ショッピング体験が向上し、ブランドとの視覚的な一貫性が確保されます。
カートページをカスタマイズするには:
テーマエディターの左側のメニューから [ カート ページ] を選択します。
[ カート設定の編集 ] ボタンをクリックするか、カートプレビュー内の任意の場所を選択してカート設定パネルを開きます。
カート設定パネルでは、次のことができます。
カートコンテナのレイアウトとスタイルを更新する
タイポグラフィと背景色を変更する
ボタンのカスタマイズ(例:チェックアウトとショッピングの続行)
商品画像、数量、価格の表示と書式設定を調整する
詳細については、 Customizing the Store Cart Componentを参照してください。
チェックアウトページをカスタマイズする方法
チェックアウトページは、顧客が連絡先、配送、支払い情報を入力して購入を確定する場所です。このページをカスタマイズすると、ブランド基準を満たしていることを確認し、顧客をスムーズなチェックアウト プロセスに導くことができます。
チェックアウトページをカスタマイズするには:
テーマ エディターで、[ チェックアウト] を選択します。
チェックアウトページには、必須コンポーネントとオプションコンポーネントが付属しています。できます：
Checkout 要素が存在することを確認します (ページが機能するために必要です)。
注文概要をカスタマイズして、製品の詳細と価格を表示します。
ストアページ間の移動を容易にするために 、ナビゲーション要素 を追加または更新します。
カートアイコンの表示を調整して、顧客が必要に応じてすぐにカートに戻れるようにします。
使用可能な設定を使用して、ページ全体のレイアウト、テキスト、色、スタイルを更新します。
詳細については、「チェックアウトページ」では、顧客が連絡先、配送、支払い情報を入力して購入を確定します。このページをカスタマイズすると、ブランド基準を満たしていることを確認し、顧客をスムーズなチェックアウト プロセスに導くことができます。
チェックアウトページをカスタマイズするには:
ワークスペースから ストア アプリに移動し 、右上隅にある [ストアのカスタマイズ] をクリックします。
テーマエディターで、 サイトテーマページ パネルを開き、「 チェックアウト」を選択します。
チェックアウトページには、必須コンポーネントとオプションコンポーネントが付属しています。できます：
Checkout 要素が存在することを確認します (ページが機能するために必要です)。
注文概要をカスタマイズして、製品の詳細と価格を表示します。
ストアページ間の移動を容易にするために 、ナビゲーション要素 を追加または更新します。
カートアイコン要素の表示を調整して、顧客が必要に応じてすぐにカートに戻れるようにします。
利用可能なツールを使用して、ページ全体のレイアウト、テキスト、色、スタイルを更新します。
完了したら、[ ストアの更新 ] をクリックして変更を公開します。
詳細については、「 ストア チェックアウト テーマ ページのカスタマイズ」を参照してください。
注文確認ページをカスタマイズする方法
チェックアウト確認ページは、顧客が注文の詳細を確認する購入プロセスの最終ステップです。このページには、購入しようとしているすべての商品、合計コスト、配送情報が表示されます。これにより、顧客は購入を確定する前にすべてが正しいことを確認する機会が得られます。これにより、注文が完了する前に、商品や数量が間違っているなどの間違いがなくなります。
[ストアフロント]の下の [注文確認 ]ページをクリックします。
注文確認ページに要素を追加して、購入に関する明確な情報を提供します。
注文確認要素の詳細については、記事を参照してください Order Element: Confirmation
ページエディターの右上隅にある [保存 ]をクリックします。
アップセルページのカスタマイズ
アップセル ページは、購入後に顧客に追加の製品やサービスを提供する戦略的な機会を提供します。これにより、平均注文額が増加する可能性があります。
アップセルページをカスタマイズするには:
左側のメニューから [アップセル ページ] を選択します。
セクションと行を追加し、画像、テキスト、商品オファーなどの必要な要素を追加します。
顧客が購入を完了できるように、ページに チェックアウト要素 が含まれていることを確認します。選択したテンプレートにチェックアウト要素が含まれていない場合は、チェックアウト要素を手動で追加します。
ページエディタの右上隅にある 「保存」 をクリックします。
アップセルページのカスタマイズの詳細については、「 How to Create a Store Upsell in the Store App」を参照してください。