# PageFlyでコレクションページを作成する方法 ### PageFlyコレクションページについて PageFlyを使用すると、コーディングスキルがなくてもコレクションページのレイアウトとデザインをカスタマイズできます。 この記事では、[PageFlyコレクションページ](https://help.pagefly.io/manual/add-more-content-to-my-shopify-collection-page/)のコンテンツを充実させて、コレクションに関するより多くの情報を伝え、それに応じてコンバージョン率を向上させる方法を学びます。 #### ShopifyとPageFlyコレクションページの関係 デフォルトのShopifyコレクションページには、わずかな情報しか含まれていません。 したがって、PageFlyを使用すると、コレクションに関するより多くの情報を追加して、訪問者を顧客に転換する可能性を高めることができます。 PageFlyを無料でインストールするには[こちら](https://apps.shopify.com/pagefly?utm_campaign%3Dapp-listing%26utm_source%3Dmanual%26utm_medium%3Darticle%26utm_content%3Dcreate-shopify-collection-page)。 PageFlyコレクションページは、Shopifyコレクションページを完全に置き換えるものではなく、デフォルトのコレクションページに追加され、デフォルトのコレクションページのすべてのパーツを再利用することに注意してください。以下は、PageFly要素を使用してデフォルトのShopifyコレクションページを強化した例です。 PageFlyでShopifyコレクションページを作成する方法については、このビデオをご覧ください。 {% embed url="" %} ### PageFlyでコレクションページを作成する方法 #### 新しいPageFlyコレクションページを作成する * Step 1: PageFlyダッシュボードで、「ページ」をクリックします。 * Step 2: 「空白ページを作成」ボタンをクリックし、ドロップダウンメニューから「コレクション」を選択します。 ![](/files/cCZBZN5UMT0Ro701Ai37) #### コレクションを割り当てる コレクションページを作成したら、このコレクションページに1つまたは複数のコレクションを割り当てる必要があります。コレクションページにコレクションを素早く割り当てる方法はたくさんあります。 まず、ページエディタで：タグアイコンをクリックして「ページ割り当て」モーダルを開きます。コレクションページには、1つまたは複数のコレクションを選択する必要があります。ストアのすべてのコレクションを割り当てることもできます。詳細な手順については、このGIFを確認してください。 ![](https://github.com/sellersmith/pagefly-help-center/blob/master/ja/images/AD_4nXXemJBg37982C38PnMa1wycdRynnRUG4MVFqFtpAqd8h3cUSAm9-Z-cVK2nELxzAyZML9bc1he7NcGQrvlKUjvsGt9nGKnq-icuwuhXOzaVfcaIso52_D-kbeTw52zsTYupG7ae5aN0-XwVE81gWdAkeyeLvefHz6qG6V9Hf8pPoZ6Q.gif) 割り当て後、PageFlyダッシュボード上で各コレクションページに割り当てられたコレクションの数量を直接管理することもできます。さらに、数量をクリックすると、「ページ割り当て」に素早く移動できます。詳細については、このGIFをご覧ください。 ![](/files/fWAVlhBVTGaCXqSq6TM5) #### ヒーローバナーを追加する ストアのコレクションを紹介するために、ヒーローバナーを追加できます。 * Step 1: 要素カタログで、PageFly要素である最初のタブをクリックします。 * Step 2: レイアウトを選択し、「フルセクション」をページエディタにドラッグ＆ドロップします。 ![](/files/Ykeyy9xm2fb14q5qHkAb) * Step 3: スタイリングタブに切り替え、「背景」パラメータまでスクロールし、セクションの背景画像を選択します。「詳細設定」ボタンをクリックします。 * 位置を選択: 中央 * サイズを選択: カバー ![](/files/T5d2NUIOID9XUAaD8HAU) * Step 4: 「間隔」パラメータまでスクロールアップします。上部と下部のパディングに200pxを追加します。 ![](/files/Hb0LY2JQ5i0f8QHc7sK1) #### コレクションを紹介する見出しを追加する * Step 1: 要素カタログで、PageFly要素である最初のタブをクリックします。 * Step 2: 見出し要素をドラッグ＆ドロップします。 ![](/files/0ZvhAAdxt8VvvLQoI4y4) * Step 3: 「全般」タブで、「見出しテキスト」ボックスの見出しの内容を変更します。 ![](/files/AW8XX9RjnV5tlYIMyf7M) * Step 4: スタイリングタブに切り替え、見出しのテキストの色とフォントサイズを変更します。 ![](/files/hgAvRqIQS0IulzoTx7vx) #### 商品リストを追加する コレクションページでは、以前に割り当てたコレクションのすべての商品を表示する必要があります。 すべてのコレクションまたはカスタムコレクションを割り当てることも、「自動」オプションを選択することもできます。これにより、以前に割り当てたコレクションが表示されます。 * Step 1: 要素カタログで、Shopify要素である2番目のタブをクリックします。 * Step 2: 商品リスト要素をドラッグ＆ドロップします。 * Step 3: 「全般」タブで、「商品ソース」を「自動」オプションに設定します。 ![](/files/M6rJbzSNRECl0Q4tKcf3) #### 「おすすめ」セクションを追加する **1. 見出しを追加する** * Step 1: 要素カタログで、PageFly要素をクリックします。 * Step 2: 見出し要素をドラッグ＆ドロップします。 ![](/files/5dLSlkAteWJiZvfjeJG2) * Step 3: 「全般」タブで、「見出しテキスト」ボックスの見出しの内容を変更します。 ![](/files/MXlqs2NLcx2eG7LWIUUP) * Step 4: スタイリングタブに切り替え、見出しのスタイルを変更します。 ![](/files/bLyyyZrs3RtZwVi1ULKa) **2. 商品リストを追加する** * Step 1: 要素カタログで、Shopify要素である2番目のタブをクリックします。 * Step 2: 商品リスト要素をドラッグ＆ドロップします。 * Step 3: 「全般」タブで、「商品ソース」の「カスタムコレクション」オプションを選択します。これで、プロモーションしたいコレクションを選択できます。 ![](/files/6Awz9wrNgafvvZ5jnzpc) #### ページを公開する 「保存」ボタンをクリックして、ページに加えられたすべての変更を保存します。 ![](/files/ZowRLDxOVNLuGHwoZKlM) ページが保存されると、「公開」ボタンが表示されます。それをクリックして、ストアのコレクションページにページを表示させます。 ![](/files/47DL8shXj3yG9hptVaFS) #### デフォルトのコレクション詳細を非表示にする ページの上部にはコレクションプレビューセクションがあります。これは、新しいコレクションページを作成したときのデフォルトのセクションです。これは、テーマによって生成されるコレクション詳細のプレースホルダーです。 DawnのようなShopify OS 2.0テーマを使用している場合は、Shopify管理画面でデフォルトのコレクションを非表示にする必要があります。 * Step 1: 右上隅にある「その他のアクション」アイコンをクリック > 「テーマエディタに移動」をクリックします。 ![](/files/gdMfCqFmneUopLOLkZGw) * Step 2: テーマエディタでは、コレクションの商品リストが2回表示されます。1つはテーマから、もう1つはPageFlyからです。 ![](/files/v3zQVoPQhA3JUqNu3vgX) * Step 3: 目アイコンをクリックすることで、いずれか一方を非表示にできます。 ![](/files/XaTSvTlYcJn0FkrV0pmK) * Step 4: PageFlyで作成したセクションは、コレクションページ上で自由に移動できます。テーマエディタでコレクションブロックをクリック＆ホールドします。 ![](/files/Al0SgRrI1CTYvo4UB5xA) * Step 5: 「保存」をクリックして変更を保存します。 ### よくある質問 **1. コレクションページとは何ですか？** コレクションページは、同じ文脈にある商品を集める場所です。例えば、ブラックフライデー（フラッシュセール）、夏、冬のシーズンなどです。また、ブログ記事、ヘルプ記事、ランディングページなど、さまざまな種類のコンテンツを含めることもできます。 **2. PageFlyでコレクションページをゼロから作成するにはどうすればよいですか？** PageFlyダッシュボードで、「ページ」をクリックし、「空白ページを作成」ボタンを選択し、ドロップダウンから「コレクション」を選択します。 --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjitosekushonno/pages/add-more-content-to-my-shopify-collection-page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.