ClickFunnels ストアフロントに個々の製品を表示すると、顧客は商品を簡単に閲覧して購入できるようになります。追加する商品要素は動的で、作成した商品から名前、画像、価格などの詳細を自動的に取得します。この記事では、ストアフロントに商品要素を追加し、その外観をカスタマイズしてユーザーエクスペリエンスを向上させる方法について説明します。

必要条件
アクティブなClickFunnelsアカウント
ワークスペースに追加された Store アプリ
「商品コレクション」に含まれる各商品が オンラインストアに表示されるように設定されていることを確認します。
ストアフロントへの製品要素の追加
左側のメニューで、[ ストア]をクリックし、[ 概要]を選択します。
[ ストアのカスタマイズ] をクリックして、テーマ エディターにアクセスします。
[ ストアフロント] ページが選択されていることを確認します。
セクションを追加し、そのセクション内に行を追加します。
クリック + プラス アイコンまたは 新しい要素を追加 ボタンをクリックして、右側の要素メニューを開きます。
[ コレクション] セクションまでスクロールし、[ 製品 ] 要素を選択します。

「Product」要素を追加すると、コンテナ内に追加する列の数を選択するように求められます。
製品要素のカスタマイズ
コレクションに Product 要素を追加すると、ストアのテーマに名前、画像、価格などの商品の詳細が自動的に含まれる場合があります。表示をさらにカスタマイズする場合は、要素を追加するか、既存の要素を変更できます。これらの要素は動的であり、すでに設定した商品の詳細からデータを取得し、ストアフロントを最新の状態に保ちます。
さらに要素を追加したり、表示をさらにカスタマイズしたりする場合は、次のようにします。
商品の詳細が表示されている行内の [要素の追加] をクリックします。

[製品] セクションから、次のような要素を追加します。
名前: 製品名が表示されます。
説明: 簡単な説明を追加します。
価格: 製品価格が表示されます。
画像: 製品画像を表示します。
リンク: 製品ページまたはチェックアウトにリンクするボタンを追加します。

各要素をクリックして、その設定にアクセスします。フォント、色、間隔、レイアウトを調整してストアのテーマに合わせて調整し、すべてがまとまりのある外観にすることができます。