> For the complete documentation index, see [llms.txt](https://help.pagefly.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/collection/shopify-elements-collection-view-details.md). # コレクション詳細を見る ### コレクションビューの詳細について 概要: **コレクションビューの詳細**要素は、対応するコレクションページにコレクションの詳細を表示し、コンバージョン率を向上させるために設計されています。 **コレクションビューの詳細**要素を使用して、コレクションページ以外のページでコレクションを宣伝したり、コレクションページの魅力を高めることができます。 ### コレクションビューの詳細へのアクセス方法 以下の手順に従って、**コレクションビューの詳細**にアクセスできます。 * ステップ1: 左メニューのElementsアイコンをクリックします * ステップ2: Shopifyの要素を含むShopifyタブに移動します * ステップ3: ドロップダウンメニューのCollection view details要素をクリックします * ステップ4: Collection view details要素の希望するバリアントをページエディターにドラッグアンドドロップします コレクションビューの詳細要素には3つの一般的なバリエーションがありますが、時間を節約できるようにさらに多くのバリエーションを追加し続けます。 サイドバーで要素を見つける代わりに、検索機能を使用してこの要素を検索できることに注意してください。 ![](/files/OvFirJCr6m0MekrKbiYi) ### コレクションビューの詳細の設定方法 **コレクションビューの詳細**要素には、最適なコンバージョン率のために外観と機能を微調整できるさまざまなパラメータが付属しています。 ページに追加した**コレクションビューの詳細**要素をクリックします。次に、\[General]タブと\[Styling]タブに移動して、利用可能なパラメータにアクセスし、調整します。 #### 一般設定 **Legacy Editor** 以下は、\[General]タブで利用可能な主な設定です。 **コレクションソース** コレクションビューの詳細要素をエディターにドラッグアンドドロップすると、コレクションソースとしてAutoとCustom collectionの2つの選択肢があります。 * Autoオプション: このオプションは、コレクションページを作成したときに割り当てられたコレクションを使用します。 * Custom collectionオプション: このオプションを使用すると、コレクションビューの詳細要素に特定のコレクションを選択できます。 ![](/files/Gfy9gPFGI9kf7UYTpAs0) コレクションページにいるかどうかに応じて、具体的なケースは異なります。 * コレクションページの場合: コレクションページでCollection Details要素内に**Collection View Details**要素を使用すると、Autoオプションがデフォルトとして設定されます。 コレクションページでCollection details要素の外にCollection view details要素を使用すると、2つのオプションから選択できます。 ![](/files/9qme3ECFbJh6gcpqxsvH) * 非コレクションページの場合: 非コレクションページでは、Collection sourceオプションは無効になり、Custom collectionがデフォルトで選択されます。表示したい特定のコレクションを選択できます。 ![](/files/ZaUGO2cVGRcP75UXaOFT) その他の設定 | **ボタンタイプ**: "View Details" ボタンには3つのタイプがあります。 - テキストのみ - アイコン付きテキスト - アイコンのみ | | ------------------------------------------------------------------------------------ | | | | **ボタンテキスト**: "View Details" ボタンに希望するテキストを入力します。 | | ![](/files/QJKJYtq3pTY8zwkRSk8w) | | **アイコン位置**: この設定は、ボタンタイプとして「アイコン付きテキスト」が選択されている場合のみ利用可能です。アイコンの位置をテキストの左または右に設定できます。 | | ![](/files/eTu6EczTWYXx6B1dUYKq) | | **全幅を有効にする**: このオプションを有効にすると、ボタンがコンテナ（例: 列）の全幅にフィットします。 | | ![](/files/TngsaEGOGfUWTVrMoxI0) | 属性、表示、アニメーションパラメータの詳細については、こちらの[General settings guide](https://help.pagefly.io/manual/elements-general-settings/)を参照してください。 **Gen 2 Editor** {% hint style="warning" %} **重要**: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル ([slot plans](https://help.pagefly.io/manual/pricing-plans/)) でのみ利用可能になります。 {% endhint %} \[Basic]セクションで利用可能な設定に加えて、FlexセクションでCollection View Details要素を使用している場合、コンテンツを配置するために3つのスタイルを持つ「Align Self」オプションを選択できます。 * 上 * 中央 * 下 #### スタイリング設定 **Legacy Editor** \[Styling]タブでは、ブランドのデザインと一致するようにCollection view details要素の外観をカスタマイズできます。ここでは、フォント、色、サイズ、間隔などのさまざまな視覚的側面を調整して、要素を目立たせ、プロフェッショナルに見せることができます。 ![](/files/ayO2skP2GitckkS6Qcru) 詳細については、[Styling tab guide](https://help.pagefly.io/manual/elements-style-settings/)を参照してください。 **Gen 2 Editor** Flexセクションで**Collection View Details**要素を使用する場合、\[Styling]タブで次の3つのオプションを使用して幅と高さを制御できます。 * コンテナにフィット: **Collection View Details**は、親コンテナの全体のスペースに拡張されます。 * コンテンツにフィット: **Collection View Details**は、内部のコンテンツにフィットするようにサイズが変更されます。 * 固定幅/固定高さ: **Collection View Details**に特定の幅や高さを設定します。このオプションの下で正確な寸法を定義できます。 ![](/files/hYZtbwZuhQUiEwtfMoEm) 「その他の設定」をクリックして、**Collection View Details**の最小および最大幅と高さを設定します。 ![](/files/oLzJdjqvQJL3GfRbJu26) ### 一般的なケース #### Autoコレクションソースを選択した場合のエラー コレクションページでAutoコレクションソースを選択したときにエラーが発生した場合、ページにコレクションが割り当てられていないことを意味します。 エラーメッセージ: 「ページには少なくとも01のコレクションが割り当てられている必要があります。」 ![](/files/BZ8EnLhAUk5VyfgiBofo) この問題を解決するには、以下の手順に従います。 1. 左メニューで「Page assignment」をクリックします。 2. 「Add collections」ボタンをクリックし、希望するコレクションを選択して「Select」をクリックします。 ![](/files/xPSNT759MecXuOdTaBN4) あるいは、「Assign collections」ボタンをクリックしてページ割り当てマネージャーにアクセスし、そこから商品を選択することもできます。 ページにコレクションを割り当てることで、コレクションソースのAutoオプションが有効になり、商品価格が正しく表示されます。 ### よくある質問 **通常ページからコレクションビューの詳細要素のコレクションソースを編集できますか？** いいえ、できません。「Collection source」の編集オプションは無効になり、カスタムコレクションがデフォルトで選択される必要があります。 **コレクションビューの詳細要素を使用して複数のコレクションを表示できますか？** コレクションビューの詳細要素は、単一のコレクションの詳細を表示するように設計されています。複数のコレクションを表示する必要がある場合は、複数のコレクションビューの詳細要素をページに追加し、それぞれを異なるコレクション用に設定できます。 ### 追加リソース [How to Use Shopify Collection Title](https://help.pagefly.io/manual/shopify-elements-collection-title/) [How to use Shopify Product Metafield Variant in PageFly](https://help.pagefly.io/manual/how-to-use-shopify-product-metafield-variant-in-pagefly/) --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://help.pagefly.io/pagefly-help-center-japanese/pjito/shopify-elements/collection/shopify-elements-collection-view-details.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.