デフォルトのコレクションリストページ: セクションとブロック

コレクション リスト ページは、ストアのすべての製品コレクションをリストする Web ページです。

OS 2.0 Shopify テーマであるConceptを使用すると、すべてのページにさまざまなセクションを追加できます。つまり、必要なセクションを追加することで、コレクション リスト ページの外観を完全にカスタマイズできます。 [セクションを追加]ボタンをクリックして、ページに表示するセクションを選択するだけです。

これにより、訪問者の関心を引きつけ、情報を提供し続ける、視覚的に魅力的なコレクション リスト ページを作成できます。

このページにはデフォルトで 1 つのセクションがあります:コレクション リスト ページ セクション

コレクションリストページセクション

コレクションリストページセクションの設定
セクション設定
説明
コレクション一覧ページ

デフォルトでは、すべてのコレクションがリストされます。リストをカスタマイズするには、「選択済み」を選択してコレクションを追加します。

表示するコレクションを選択してください表示するすべてのコレクションまたは選択したコレクションを選択します
コレクションを並べ替える基準

並べ替えは「すべて」が選択されている場合にのみ適用されます。

コレクションを表示する順序を決定します。
  • アルファベット順、AZ - 製品をアルファベット順に表示します。
  • アルファベット順、ZA - 製品をアルファベットの逆順に表示します。
  • 日付、新しいものから古いもの- 各製品がストアに追加された時期に基づいて、新しいものから古いものまで製品を表示します。
  • 日付、古いものから新しいもの- 各製品がストアに追加された時期に基づいて、古いものから新しいものまで製品を表示します。
  • 製品数、多い順- 製品数の多い順に製品を表示します。
  • 製品数、低いものから高いものへ- 製品を製品数の多い順に表示します。
画像表示する画像を選択します:最初の製品またはコレクション画像
画像比率画像比率:
  • 画像に適応(デフォルト) - 画像のアスペクト比を使用します。これにより、画像が切り取られるのを防ぎます。
  • 正方形- 画像を 1:1 の比率でトリミングします。
  • ポートレート- 画像を 2:3 の比率にトリミングします。
  • 風景- 画像を 3:2 の比率にトリミングします。
  • ワイド- 画像を 16:9 の比率にトリミングします。
画像にテキストをオーバーレイする画像のテキストオーバーレイを有効にします。
製品の総数を表示製品の総数を表示できるようにします。
デスクトップ上の列の数デスクトップブラウザに表示される列数をカスタマイズします: 1 列から5 列まで。
モバイルの列数デスクトップブラウザに表示される列数をカスタマイズします: 1 列または2 列
見出し
見出しセクションのタイトル。
見出しのサイズ見出しのサイズは、 SmallMediumLarge 、またはExtralargeのいずれかのオプションに設定できます。
見出しの配置見出しは、 LeftCenter 、またはRightに揃えることができます。
見出しタグSEO のためにコンテンツを構造化および整理するための見出しタグを選択します。
セクション
上部パディング下部パディングを0px から 120px まで 4px 刻みで調整できます。
セクション区切り線を表示このセクションの上に行区切りを表示します。
セクションを全幅にするコンテナを全幅にします。
断面を丸くする上の 2 つの角に丸いエッジを適用します。
カスタムCSSこのセクションにカスタム CSS を追加します。

このセクションでは、Collection ブロックを追加してカスタマイズできます。

コレクション ブロックの設定。
ブロック設定
説明
コレクション
コレクション表示するコレクションを選択します。
画像表示する画像を選択/アップロードします。
タイトルコレクションのタイトル
説明コレクションの説明テキスト。見出しの下に配置されます。
画像にテキストをオーバーレイする画像のテキストオーバーレイを有効にします。

必要に応じて、次のようなブロックの色をカスタマイズできます。
  • 文章
  • オーバーレイ、0%から100%まで調整可能

この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。