PageFlyでコレクションページを作成する方法
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
PageFlyを使用すると、コーディングスキルがなくてもコレクションページのレイアウトとデザインをカスタマイズできます。
この記事では、PageFlyコレクションページのコンテンツを充実させて、コレクションに関するより多くの情報を伝え、それに応じてコンバージョン率を向上させる方法を学びます。
デフォルトのShopifyコレクションページには、わずかな情報しか含まれていません。
したがって、PageFlyを使用すると、コレクションに関するより多くの情報を追加して、訪問者を顧客に転換する可能性を高めることができます。
PageFlyを無料でインストールするにはこちら。
PageFlyコレクションページは、Shopifyコレクションページを完全に置き換えるものではなく、デフォルトのコレクションページに追加され、デフォルトのコレクションページのすべてのパーツを再利用することに注意してください。以下は、PageFly要素を使用してデフォルトのShopifyコレクションページを強化した例です。
PageFlyでShopifyコレクションページを作成する方法については、このビデオをご覧ください。
Step 1: PageFlyダッシュボードで、「ページ」をクリックします。
Step 2: 「空白ページを作成」ボタンをクリックし、ドロップダウンメニューから「コレクション」を選択します。
コレクションページを作成したら、このコレクションページに1つまたは複数のコレクションを割り当てる必要があります。コレクションページにコレクションを素早く割り当てる方法はたくさんあります。
まず、ページエディタで：タグアイコンをクリックして「ページ割り当て」モーダルを開きます。コレクションページには、1つまたは複数のコレクションを選択する必要があります。ストアのすべてのコレクションを割り当てることもできます。詳細な手順については、このGIFを確認してください。
割り当て後、PageFlyダッシュボード上で各コレクションページに割り当てられたコレクションの数量を直接管理することもできます。さらに、数量をクリックすると、「ページ割り当て」に素早く移動できます。詳細については、このGIFをご覧ください。
ストアのコレクションを紹介するために、ヒーローバナーを追加できます。
Step 1: 要素カタログで、PageFly要素である最初のタブをクリックします。
Step 2: レイアウトを選択し、「フルセクション」をページエディタにドラッグ＆ドロップします。
Step 3: スタイリングタブに切り替え、「背景」パラメータまでスクロールし、セクションの背景画像を選択します。「詳細設定」ボタンをクリックします。
位置を選択: 中央
サイズを選択: カバー
Step 4: 「間隔」パラメータまでスクロールアップします。上部と下部のパディングに200pxを追加します。
Step 1: 要素カタログで、PageFly要素である最初のタブをクリックします。
Step 2: 見出し要素をドラッグ＆ドロップします。
Step 3: 「全般」タブで、「見出しテキスト」ボックスの見出しの内容を変更します。
Step 4: スタイリングタブに切り替え、見出しのテキストの色とフォントサイズを変更します。
コレクションページでは、以前に割り当てたコレクションのすべての商品を表示する必要があります。
すべてのコレクションまたはカスタムコレクションを割り当てることも、「自動」オプションを選択することもできます。これにより、以前に割り当てたコレクションが表示されます。
Step 1: 要素カタログで、Shopify要素である2番目のタブをクリックします。
Step 2: 商品リスト要素をドラッグ＆ドロップします。
Step 3: 「全般」タブで、「商品ソース」を「自動」オプションに設定します。
1. 見出しを追加する
Step 1: 要素カタログで、PageFly要素をクリックします。
Step 2: 見出し要素をドラッグ＆ドロップします。
Step 3: 「全般」タブで、「見出しテキスト」ボックスの見出しの内容を変更します。
Step 4: スタイリングタブに切り替え、見出しのスタイルを変更します。
2. 商品リストを追加する
Step 1: 要素カタログで、Shopify要素である2番目のタブをクリックします。
Step 2: 商品リスト要素をドラッグ＆ドロップします。
Step 3: 「全般」タブで、「商品ソース」の「カスタムコレクション」オプションを選択します。これで、プロモーションしたいコレクションを選択できます。
「保存」ボタンをクリックして、ページに加えられたすべての変更を保存します。
ページが保存されると、「公開」ボタンが表示されます。それをクリックして、ストアのコレクションページにページを表示させます。
ページの上部にはコレクションプレビューセクションがあります。これは、新しいコレクションページを作成したときのデフォルトのセクションです。これは、テーマによって生成されるコレクション詳細のプレースホルダーです。
DawnのようなShopify OS 2.0テーマを使用している場合は、Shopify管理画面でデフォルトのコレクションを非表示にする必要があります。
Step 1: 右上隅にある「その他のアクション」アイコンをクリック > 「テーマエディタに移動」をクリックします。
Step 2: テーマエディタでは、コレクションの商品リストが2回表示されます。1つはテーマから、もう1つはPageFlyからです。
Step 3: 目アイコンをクリックすることで、いずれか一方を非表示にできます。
Step 4: PageFlyで作成したセクションは、コレクションページ上で自由に移動できます。テーマエディタでコレクションブロックをクリック＆ホールドします。
Step 5: 「保存」をクリックして変更を保存します。
1. コレクションページとは何ですか？
コレクションページは、同じ文脈にある商品を集める場所です。例えば、ブラックフライデー（フラッシュセール）、夏、冬のシーズンなどです。また、ブログ記事、ヘルプ記事、ランディングページなど、さまざまな種類のコンテンツを含めることもできます。
2. PageFlyでコレクションページをゼロから作成するにはどうすればよいですか？
PageFlyダッシュボードで、「ページ」をクリックし、「空白ページを作成」ボタンを選択し、ドロップダウンから「コレクション」を選択します。
