ストアコレクションページをカスタマイズする方法

ClickFunnels の「ストア コレクション」ページでは、特定の製品コレクションを整理された視覚的に魅力的な方法で表示し、ショッピング エクスペリエンスを向上させることができます。この記事では、商品コレクション要素やその他の高度な要素を使用してストアコレクションページをカスタマイズする方法を学習します。

大事な

製品コレクションは、ClickFunnelsストアでのみ販売されています。目標到達プロセス内に個別の商品として追加することはできません。

---

必要条件

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

• ワークスペースに追加された Store アプリ

• At least one product collection is created

• 「商品コレクション」に含まれる各商品が ストア に表示されるように設定されていること（商品の 販売チャネル タブの ストア スイッチ）を確認します。

---

ストアコレクションページの概要

「ストアコレクション」ページには、顧客がストアフロントからコレクションをクリックすると、特定のコレクション内の個々の製品が表示されます。このページは、顧客がコレクション内の商品を参照して購入できるハブとして機能します。

例：

たとえば、 Beginner Fitness Kit という名前のコレクションがあり、顧客がそのコレクションをクリックした場合、 ストアコレクション ページには、 Jump Rope、 Resistance Bands、 Yoga Matsなど、そのコレクション内の製品が表示されます。

---

“Products” 要素を使用した動的レイアウトの構築

「ストアコレクション」ページのカスタマイズを開始するには、次の手順に従います。

1. 左側のナビゲーション メニューで、 ストア アプリをクリックし、[ 概要] を選択します。

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

3. ストアテーマエディターで、コレクションメニューを選択して「ストアコレクション」ページを編集します。

   

4. エディター内で、 セクションを追加し、そのセクション内に 行 を追加します。行内のオレンジ色の +プラス または[新しい要素を追加]ボタンをクリックして、新しい要素を挿入します。

5. 右側の要素メニューから、 製品 コレクションタイプ要素を選択します。この要素は、製品コレクションのコンテナとして機能します。

   

6. 「製品」要素を追加すると、コンテナ内に追加する列の数を選択するように求められます。標準は 1 列ですが、設計の好みに基づいてさらに多くの列を選択できます。

---

コンテナに動的な高度な「製品」要素を追加する

コンテナ内に「製品」要素と行を追加すると、製品は製品の高度な個々の要素を強調表示します。これらの要素には、名前、説明、画像、価格、リンクが含まれます。これらの要素を追加およびカスタマイズする方法は次のとおりです。

1. 名前: コレクション内の各製品の名前を表示する 名前 要素を追加します。

2. 説明: コレクション内の各製品の説明を表示する Description 要素を追加します。

3. 画像: コレクション内の各商品のメイン画像を表示する [画像 ] 要素を追加します。

4. 価格: コレクション内の各製品の価格を表示する [価格] 要素を追加します。

5. リンク: リンク 要素を追加して、「今すぐ購入」や「カートに追加」などのコールトゥアクションボタンを提供します。クリックすると、システムはそれらを製品ページにリダイレクトします。

これらの個々の要素を挿入した後、各要素の設定に移動して、好みに応じてデザインとレイアウトをカスタマイズできます。ストアのテーマに合わせて色、フォント、サイズを調整し、統一感のある外観を確保します。

---

製品コレクションの高度な要素を組み込む

「ストアコレクション」ページをさらに充実させるには、「商品コレクションの高度な要素」を組み込むことができます。これらの要素を使用すると、顧客がストアフロントからクリックした特定のコレクションに基づいて、コレクション名、画像、説明などの動的コンテンツを追加できます。以下の手順に従ってください。

1. 動的コレクション情報を表示する新しい セクション と 行 を追加します。

2. 行内のオレンジ色の +プラス または「新しい要素を追加」ボタンをクリックして、新しい要素を追加します。

3. 右側の要素メニューから [詳細設定**] メニューをクリックし、[ 製品コレクション] セクションまで下にスクロールします。

   

4. 必要に応じて、次の要素を追加します。

   手記

   「商品コレクション」の詳細要素は、「商品」コンテナの外部に追加する必要があります。「セクション」と「行」を追加し、高度な要素を「行」の中に直接配置するだけです。「Collection」コンテナタイプの要素は必要ありません。

   • 名前: コレクションの名前を表示します。

   • 説明: コレクションの概要を簡単に説明します。

   • 画像: コレクションのメイン画像を紹介します。

   • リンク: コレクションに関連する行動喚起ボタンを追加します。

     大事な

     「商品コレクション - リンク」要素は、訪問者がすでにアクセスしている現在のストアコレクションページのリンクのURLに動的に入力されるため、ナビゲーションループが発生する可能性があることに注意してください。この問題を回避するには、ストアコレクションページでこの要素を使用しないことをお勧めします。