この記事には、商品のリストというShopify要素についてご紹介いたします。
商品のリスト要素について
商品のリスト要素は商品のリストをページに表示させてコンバージョン率を高めるために設計されている要素です。商品のリスト要素を商品のアップセルとクロスセルに使用できます。商品販売中に同じコレクションで追加の商品を販売する場合、この要素で販売が強化されます。
詳細については、以下のビデオ チュートリアルをご覧ください。
商品のリスト要素のアクセス方法
ステップ1：要素カタログでShopify要素追加機能である3つ目のアイコンをクリックします。
ステップ2：ドロップダウンメニューで商品のリスト要素をクリックします。
ステップ3：対象の要素をページエディタにドラッグ＆ドロップして使用します
サイドバーメニューだけではなく検索機能を使用することで要素も見つけられます。
バージョン3.4.0で、ローディング機能をビルドして見栄えの良いローディング ステータスデザインを実現しました。
商品のリスト要素の構成
商品のリスト要素には、アピアランスを微調整して最高のコンバージョン率を取得できる多くのパラメータがあります。
レイアウントで要素を選択して含まれるパラメータを確認できます。
一般タブの構成
| コンテンツ | |
商品ソース：以下の3つのオプションから選択できます。
|  |
| 読み込みごとのアイテム数：読み込みごとに表示されるアイテムの数量を調整します。 Shopify要素の制限によると、読み込みごとに商品数は最大限が20つです。 |  |
| 行ごとのアイテム数：行ごとのアイテム数を調整します。 |  |
| アイテム間の余白：アイテム間の余白を調整します。 |  |
読み込みモード:
|  |
| 現在の商品を除外：商品ページに表示されている商品を除外するためのオプションです。 この機能は商品ページのみに機能することにご注意ください。 |  |
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
スタイリングタブの構成
全体
コンテンツの色：
- 選択する色は商品のタイトルと商品の価格など別の要素に適用されます。
- これらの要素に特定の色に選択するためには、要素をクリックしてスタイリングタブでカスタム商品を選択します。
属性パラメータ、可視性パラメータ、アニメーションパラメータに関する詳細情報はこちらをご覧ください。
デバイス感度
商品のリスト要素はノートパソコン、タブレット、モバイルを含む全てのデバイスでよく表示されるように作られた要素です。トップメニューでデバイス切り替りをクリックして閲覧したいデバイスを選択します。以下のサンプルをご覧ください。
「行ごとのアイテム数」は、ノートパソコンとタブレットに切り替えると、デフォルトとして4つですが、モバイルにすると、自動的に２つにセットされます。このオートメーションによりモバイルの表示がより明確かつ簡潔になります。「行ごとのアイテム数」、「読み込みごとのアイテム数」を各デバイスに変更できます。
重要事項：
商品のリスト要素で商品の並び順を変更するには、以下の動画をご覧ください。
Previous article
