商品 → コレクションページ

ここではコレクションページに表示する各情報の設定を行えます。

画像

目盛りを50％～150％の間で調節して、コレクションページでの画像の比率を設定することができます。

設定例は以下の通りです。

100未満 – 横長

100 – 正方形

100以上 – ポートレートサイズ(縦長)

ご注意このオプションは、次に紹介する「画像リサイズ = オート」では機能しませんのでご注意ください。

ここでは、5つの画像リサイズオプションが用意されています。

オート- このオプションを選択した場合、画像の比率オプションが機能しなくなります。イメージコンテナとイメージサイズは、ソースイメージの寸法に基づいて生成されます。

コンテイン – CSSのobject-fit = containです。詳しくはこちらのサイトをご覧ください。

カバー – CSSのobject-fit = coverです。詳しくはこちらのサイトをご覧ください。

幅に合わせる – このオプションでは、イメージの幅がコンテナの幅に適合します。垂直方向に中央に配置されます。イメージの高さがコンテナよりも大きい場合は、イメージ上下はカットされます。イメージの高さがコンテナよりも小さい場合は、イメージの上部と下部に白いスペースが追加されます。

高さに合わせる – このオプションでは、イメージの高さがコンテナの高さに適合します。イメージは水平方向に中央に配置されます。

ここでは、目盛りを0～50の間で設定して、画像の角をシャープなものから丸いものに変更することができます。

このオプションを有効にすると、商品の画像の上にマウスを置いたときに、商品の2枚目の画像が表示されます。

ここでは、コレクションページで商品に表示するラベルを決めることができます。”在庫あり”, “予約プリオーダー”, “在庫切れ”, “新商品”, “おすすめ”, “セール”の6つのラベルが利用できます。

ご注意「新商品」と「おすすめ」のラベルは、メタフィールドで設定できます。商品のメタフィールドの詳細については、こちらのヘルプページをご覧ください。

このオプションを有効にすると、画像の下の商品情報の位置が中央になります。

ここでは商品のタイトルの直前に商品タイプ、ベンダー、またはコレクションのどれを表示するかどうかを決め、画像の下にどのような追加情報を表示するかを選択できます。以下はモバイル版での表示例になります。

このオプションを有効にするとデスクトップでもモバイルでも商品のタイトルが1行になり、で以下のような表示になります。

ここでは、商品がリストモードで表示されたときに、どのような要素を表示するかを選択できます。

数量のインプットを表示します。このオプションは、コレクションページ、商品リスト「リストデザイン #2」にのみ適用されます。

商品リストのデザインを変更するには、「コレクションページ」→「商品グリッド」セクションの設定に移動してください。詳細はこちらをご覧ください。