ストアの商品ページをカスタマイズする方法

公開日: 2024年10月15日更新日: 2026年10月29日

ClickFunnels Store のストア製品ページをカスタマイズすると、製品の表示方法を制御でき、顧客のショッピングエクスペリエンスが向上します。このページをパーソナライズすることで、主要な製品情報を強調表示し、デザインをブランドに合わせ、顧客が購入しやすくすることができます。この記事では、すでに作成した商品から詳細を取得する動的な商品要素を使用してページをカスタマイズする方法を紹介します。

必要条件

アクティブなClickFunnelsアカウント
ワークスペースに追加された Store アプリ
At least one product created して ストア に表示します

ストア商品ページの概要

ストア商品ページは、ストア内の個々の商品を表示するために使用される テンプレートページ です。各製品はこのページを自動的に使用し、名前、価格、説明、画像などの詳細を取得します。エディターでページをプレビューするときは、特定の製品ではなく、テンプレートのデザイン自体を見ています。このため、プレビューモードで製品名や説明が表示されない場合があります。顧客がストア内の商品をクリックすると、テンプレートにその商品の詳細が動的に表示されます。

このページをカスタマイズすることで、商品が魅力的でわかりやすい方法で表示され、売上の増加につながります。

ページをカスタマイズすると、すでに作成した製品からデータを自動的に取得する動的要素を使用して、名前、画像、価格、説明などの製品の詳細を強調表示できます。これにより、時間を節約できるだけでなく、ストアの一貫性とプロフェッショナルな外観が保たれます。

適切にカスタマイズされた製品ページでは、次のことが可能になります。

製品情報を明確に整理することで、ユーザーエクスペリエンスを向上させます。
すっきりとしたナビゲートしやすいレイアウトを作成することで、コンバージョンを促進します。
ページデザインを店舗全体のテーマに合わせることで、ブランドアイデンティティを強化します。

オンラインストアの商品表示設定

商品が商品ページに正しく表示されるようにするには、オンラインストアに商品が表示されていることを確認します。商品が非表示になっている場合、レイアウトをカスタマイズしてもページに表示されません。可視性を確認するには、次の手順に従います。

ワークスペースダッシュボードで、左側のメニューの [ 製品 ] をクリックします。
[すべての製品] を選択します。
表示を更新するには、編集する製品をクリックします。販売チャネル タブを開き、ストア スイッチをオンにします。変更はすぐに保存されます。スイッチがロックされている場合は、その説明に理由が表示されます。商品には価格タブで表示中の価格が必要で、商品ページ タブで本番の決済を受け付ける設定になっている必要があります。

商品が表示としてマークされると、オンラインストアに表示され、カスタマイズした商品ページのデザインが使用されます。

ストア商品ページのカスタマイズ

ストア商品ページをカスタマイズすると、商品の詳細の表示方法と、顧客が購入を完了する方法を制御できます。要素の追加または削除、レイアウトの調整、ストアの 2 つのチェックアウトオプションから選択できます。

ストアの商品ページを設定する際には、顧客が購入を完了する方法( 個別商品チェックアウト または カートに追加 エクスペリエンス)を決定する必要があります。この選択により、チェックアウトプロセスがストア全体でどのように機能するかが決まり、全体的な販売戦略と一致する必要があります。

個別商品チェックアウト: このオプションを使用すると、顧客は商品ページから直接 1 つの商品を購入し、すぐにチェックアウトにつなげることができます。
カートに追加: このオプションを使用すると、顧客は複数の商品をカートに追加し、選択内容を確認してからチェックアウトに進むことができます。

ストア製品ページをカスタマイズするには:

左側のメニューで、[ ストア]をクリックし、[ 概要]を選択します。
[ ストアのカスタマイズ] をクリックして、テーマエディターにアクセスします。
左側のパネルから [商品 ] ページが選択されていることを確認します。
エディター内で、 セクションを追加し、そのセクション内に行を追加します。行内のオレンジ色の [ 要素の追加] ボタンをクリックして、新しい要素を挿入します。
右側の [要素] メニューから [ 製品 ] セクションまでスクロールし、次のような必要な要素を追加します。
- 名前: 製品名を自動的に表示します。
- 説明: 製品の説明を追加します。
- 価格: 製品価格が表示されます。
- 画像: 製品画像を表示します。
顧客に購入を完了する方法を選択します。
- オプション 1: 個別商品のチェックアウト
  - 商品ページに Checkout 要素を追加します。クリックすると、顧客は購入完了のためにチェックアウトページに直接移動します。checkout 要素の詳細については、 Checkout: Enable Users to Complete their Purchase の記事を参照してください。
- オプション 2: カートに追加機能
  - 商品ページの既存のチェックアウト要素をカー トに追加 要素に置き換えます。
  - カートに入れの設定とカスタマイズの詳細な手順については、 How to Use Add to Cart Functionality in Your Store 記事をご覧ください。
各要素をクリックして、その設定にアクセスします。ストアのテーマに合わせてフォント、色、間隔、レイアウトを調整し、一貫性のあるプロフェッショナルな外観を確保します。

手記
必要に応じて、カスタムテキストや画像などの他の要素を追加して、ページをさらにパーソナライズできます。デザインの好みに合わせてレイアウトを調整したり、セクションを追加したりしてください。
設定が完了したら、変更を 保存します 。