コレクション詳細を見る

コレクションビューの詳細について

概要: コレクションビューの詳細要素は、対応するコレクションページにコレクションの詳細を表示し、コンバージョン率を向上させるために設計されています。

コレクションビューの詳細要素を使用して、コレクションページ以外のページでコレクションを宣伝したり、コレクションページの魅力を高めることができます。

コレクションビューの詳細へのアクセス方法

以下の手順に従って、コレクションビューの詳細にアクセスできます。

• ステップ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がデフォルトで選択されます。表示したい特定のコレクションを選択できます。

その他の設定

属性、表示、アニメーションパラメータの詳細については、こちらのGeneral settings guideを参照してください。

Gen 2 Editor

[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コレクションソースを選択した場合のエラー

コレクションページでAutoコレクションソースを選択したときにエラーが発生した場合、ページにコレクションが割り当てられていないことを意味します。

エラーメッセージ: 「ページには少なくとも01のコレクションが割り当てられている必要があります。」

この問題を解決するには、以下の手順に従います。

1. 左メニューで「Page assignment」をクリックします。

2. 「Add collections」ボタンをクリックし、希望するコレクションを選択して「Select」をクリックします。

あるいは、「Assign collections」ボタンをクリックしてページ割り当てマネージャーにアクセスし、そこから商品を選択することもできます。

ページにコレクションを割り当てることで、コレクションソースのAutoオプションが有効になり、商品価格が正しく表示されます。

よくある質問

通常ページからコレクションビューの詳細要素のコレクションソースを編集できますか？

いいえ、できません。「Collection source」の編集オプションは無効になり、カスタムコレクションがデフォルトで選択される必要があります。

コレクションビューの詳細要素を使用して複数のコレクションを表示できますか？

コレクションビューの詳細要素は、単一のコレクションの詳細を表示するように設計されています。複数のコレクションを表示する必要がある場合は、複数のコレクションビューの詳細要素をページに追加し、それぞれを異なるコレクション用に設定できます。

追加リソース

How to Use Shopify Collection Title

How to use Shopify Product Metafield Variant in PageFly