コレクション詳細を見る
Last updated
Was this helpful?
Japanese 🇯🇵
Last updated
Was this helpful?
概要: コレクションビューの詳細要素は、対応するコレクションページにコレクションの詳細を表示し、コンバージョン率を向上させるために設計されています。
コレクションビューの詳細要素を使用して、コレクションページ以外のページでコレクションを宣伝したり、コレクションページの魅力を高めることができます。
以下の手順に従って、コレクションビューの詳細にアクセスできます。
ステップ1: 左メニューのElementsアイコンをクリックします
ステップ2: Shopifyの要素を含むShopifyタブに移動します
ステップ3: ドロップダウンメニューのCollection view details要素をクリックします
ステップ4: Collection view details要素の希望するバリアントをページエディターにドラッグアンドドロップします
コレクションビューの詳細要素には3つの一般的なバリエーションがありますが、時間を節約できるようにさらに多くのバリエーションを追加し続けます。
サイドバーで要素を見つける代わりに、検索機能を使用してこの要素を検索できることに注意してください。
コレクションビューの詳細要素には、最適なコンバージョン率のために外観と機能を微調整できるさまざまなパラメータが付属しています。
ページに追加したコレクションビューの詳細要素をクリックします。次に、[General]タブと[Styling]タブに移動して、利用可能なパラメータにアクセスし、調整します。
Legacy Editor
以下は、[General]タブで利用可能な主な設定です。
コレクションソース
コレクションビューの詳細要素をエディターにドラッグアンドドロップすると、コレクションソースとしてAutoとCustom collectionの2つの選択肢があります。
Autoオプション: このオプションは、コレクションページを作成したときに割り当てられたコレクションを使用します。
Custom collectionオプション: このオプションを使用すると、コレクションビューの詳細要素に特定のコレクションを選択できます。
コレクションページにいるかどうかに応じて、具体的なケースは異なります。
コレクションページの場合:
コレクションページでCollection Details要素内にCollection View Details要素を使用すると、Autoオプションがデフォルトとして設定されます。
コレクションページでCollection details要素の外にCollection view details要素を使用すると、2つのオプションから選択できます。
非コレクションページの場合:
非コレクションページでは、Collection sourceオプションは無効になり、Custom collectionがデフォルトで選択されます。表示したい特定のコレクションを選択できます。
その他の設定
ボタンタイプ: "View Details" ボタンには3つのタイプがあります。 - テキストのみ - アイコン付きテキスト - アイコンのみ
ボタンテキスト: "View Details" ボタンに希望するテキストを入力します。
アイコン位置: この設定は、ボタンタイプとして「アイコン付きテキスト」が選択されている場合のみ利用可能です。アイコンの位置をテキストの左または右に設定できます。
全幅を有効にする: このオプションを有効にすると、ボタンがコンテナ（例: 列）の全幅にフィットします。
属性、表示、アニメーションパラメータの詳細については、こちらのGeneral settings guideを参照してください。
Gen 2 Editor
重要: Gen 2レイアウトは、ペイ・アズ・ユー・ゴー料金モデル (slot plans) でのみ利用可能になります。
[Basic]セクションで利用可能な設定に加えて、FlexセクションでCollection View Details要素を使用している場合、コンテンツを配置するために3つのスタイルを持つ「Align Self」オプションを選択できます。
上
中央
下
Legacy Editor
[Styling]タブでは、ブランドのデザインと一致するようにCollection view details要素の外観をカスタマイズできます。ここでは、フォント、色、サイズ、間隔などのさまざまな視覚的側面を調整して、要素を目立たせ、プロフェッショナルに見せることができます。
詳細については、Styling tab guideを参照してください。
Gen 2 Editor
FlexセクションでCollection View Details要素を使用する場合、[Styling]タブで次の3つのオプションを使用して幅と高さを制御できます。
コンテナにフィット: Collection View Detailsは、親コンテナの全体のスペースに拡張されます。
コンテンツにフィット: Collection View Detailsは、内部のコンテンツにフィットするようにサイズが変更されます。
固定幅/固定高さ: Collection View Detailsに特定の幅や高さを設定します。このオプションの下で正確な寸法を定義できます。
「その他の設定」をクリックして、Collection View Detailsの最小および最大幅と高さを設定します。
コレクションページでAutoコレクションソースを選択したときにエラーが発生した場合、ページにコレクションが割り当てられていないことを意味します。
エラーメッセージ: 「ページには少なくとも01のコレクションが割り当てられている必要があります。」
この問題を解決するには、以下の手順に従います。
左メニューで「Page assignment」をクリックします。
「Add collections」ボタンをクリックし、希望するコレクションを選択して「Select」をクリックします。
あるいは、「Assign collections」ボタンをクリックしてページ割り当てマネージャーにアクセスし、そこから商品を選択することもできます。
ページにコレクションを割り当てることで、コレクションソースのAutoオプションが有効になり、商品価格が正しく表示されます。
通常ページからコレクションビューの詳細要素のコレクションソースを編集できますか？
いいえ、できません。「Collection source」の編集オプションは無効になり、カスタムコレクションがデフォルトで選択される必要があります。
コレクションビューの詳細要素を使用して複数のコレクションを表示できますか？
コレクションビューの詳細要素は、単一のコレクションの詳細を表示するように設計されています。複数のコレクションを表示する必要がある場合は、複数のコレクションビューの詳細要素をページに追加し、それぞれを異なるコレクション用に設定できます。
