この記事には、コレクション閲覧詳細というShopify要素についてご紹介します。
コレクション閲覧詳細要素について
コレクション閲覧詳細要素は、コレクションの詳細を当該のコレクションページに表示させてコンバージョン率を高めるために設計されている要素です。コレクション閲覧詳細要素を用いてコレクションではないページでコレクションを促進したりコレクションページに使用したりすることができます。
コレクション閲覧詳細要素の構成
- ステップ1:Shopify要素追加機能であるプラスアイコンをクリックします。
- ステップ2:ドロップダウンメニューでコレクション閲覧詳細要素をクリックします。
- ステップ3:対象の要素をページエディタにドラッグ&ドロップして使用します。
コレクション閲覧詳細要素には3つのバリエーションが含まれていますが、お客様が時間を節約できるように、新規のバリエーションを追加していきます。
サイドバーメニューだけではなく検索機能を使用することで要素も見つけられます。
コレクション閲覧詳細要素の構成
コレクション閲覧詳細要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くのパラメータがあります。
レイアウントで要素を選択して含まれるパラメータを確認できます。
コレクション閲覧詳細要素をページエディタにドラッグ&ドロップすると、コレクションソースに以下の2つから選択できます。
- アート
- カスタムコレクション
コレクションページでコレクション閲覧詳細要素を使用する場合、コレクションソースを選択できます。一方、普通ページでコレクション閲覧詳細要素を使用する場合、コレクションソースが無効になり、デフォルトとしてカスタムコレクションが選択されます。
オートを選択すると、このコレクションページを作成したときにアサインされたコレクションがページエディタに表示されます。コレクション閲覧詳細要素を使用する際にデフォルトとしてオートが選択されます。
顧客が閲覧詳細ボタンをクリックすると、当該のコレクションページに遷移されます。ライプページでどのように機能するかについては、以下の例を見ていきましょう。
一般タブの構成
コンテンツ | |
ボタンのテキスト:閲覧詳細ボタンにテキストを入力します。 | ![]() |
アイコンの表示:閲覧詳細の>アイコンが表示されるように有効にします。 | ![]() |
トラッキング | |
PageFlyのイベント:要素のクリック回数を追跡できます。設定方法についてはこちらを確認できます。 | ![]() |
GoogleアナリティクスイベントをGAアカウントに設定します。設定する方法についてはこちらで見つけられます。 | ![]() |
顧客が要素をクリックしたときにFacebook Pixelを設定します。詳細についてはこちらをご参照ください。 | ![]() |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
スタイリングタブの詳細情報については、こちらをご参照ください。この記事には、コレクション閲覧詳細というShopify要素についてご紹介します。
コレクション閲覧詳細要素について
コレクション閲覧詳細要素は、コレクションの詳細を当該のコレクションページに表示させてコンバージョン率を高めるために設計されている要素です。コレクション閲覧詳細要素を用いてコレクションではないページでコレクションを促進したりコレクションページに使用したりすることができます。
コレクション閲覧詳細要素の構成
- ステップ1Shopify要素追加機能であるプラスアイコンをクリックします。
- ステップ2:ドロップダウンメニューでコレクション閲覧詳細要素をクリックします。
- ステップ3:対象の要素をページエディタにドラッグ&ドロップして使用します。
コレクション閲覧詳細要素には3つのバリエーションが含まれていますが、お客様が時間を節約できるように、新規のバリエーションを追加していきます。
サイドバーメニューだけではなく検索機能を使用することで要素も見つけられます。
コレクション閲覧詳細要素の構成
コレクション閲覧詳細要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くのパラメータがあります。
レイアウントで要素を選択して含まれるパラメータを確認できます。
コレクション閲覧詳細要素をページエディタにドラッグ&ドロップすると、コレクションソースに以下の2つから選択できます。
- アート
- カスタムコレクション
コレクションページでコレクション閲覧詳細要素を使用する場合、コレクションソースを選択できます。一方、普通ページでコレクション閲覧詳細要素を使用する場合、コレクションソースが無効になり、デフォルトとしてカスタムコレクションが選択されます。
オートを選択すると、このコレクションページを作成したときにアサインされたコレクションがページエディタに表示されます。コレクション閲覧詳細要素を使用する際にデフォルトとしてオートが選択されます。
顧客が閲覧詳細ボタンをクリックすると、当該のコレクションページに遷移されます。ライプページでどのように機能するかについては、以下の例を見ていきましょう。
一般タブの構成
コンテンツ | |
ボタンのテキスト:閲覧詳細ボタンにテキストを入力します。 | ![]() |
アイコンの表示:閲覧詳細のアイコンが表示されるように有効にします。 | ![]() |
トラッキング | |
PageFlyのイベント:要素のクリック回数を追跡できます。設定方法についてはこちらを確認できます。 | ![]() |
GoogleアナリティクスイベントをGAアカウントに設定します。設定する方法についてはこちらで見つけられます。 | ![]() |
顧客が要素をクリックしたときにFacebook Pixelを設定します。詳細についてはこちらをご参照ください。 | ![]() |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
スタイリングタブの詳細情報については、こちらをご参照ください。