このページには、関連する製品またはコンテンツのグループが表示されます。
OS 2.0 Shopify テーマであるConceptを使用すると、すべてのページにさまざまなセクションを追加できます。つまり、必要なセクションを追加することで、コレクション ページの外観を完全にカスタマイズできます。 [セクションを追加]ボタンをクリックして、ページに表示するセクションを選択するだけです。これにより、訪問者の関心を引きつけ、情報を提供し続ける、視覚的に魅力的なコレクション ページを作成できます。
デフォルトでは、コレクション ページには次のセクションがあります。
1. コレクションバナー
| 説明 | ||
|---|---|---|
| コレクションバナー コレクションを編集して説明や画像を追加します。 もっと詳しく知る。 | ||
| 透明なヘッダーを許可する | 透明なヘッダーを表示できるようにします。 この設定は、このセクションが最初のセクションである場合にのみ適用されます。 | |
| コレクション画像を表示 | コレクション画像を表示できるようにします。 最良の結果を得るには、アスペクト比 16:9 の画像を使用してください。 もっと詳しく知る。 | |
| 画像 | 断面画像を選択/アップロードします。 デフォルトはコレクション画像です。 | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングを0px から 120px まで 4px 刻みで調整できます。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 視差効果を有効にすると、2 次元の画像またはシーンに奥行きの錯覚が生まれます。 視差方向は次の 3 つのオプションから選択できます。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 1.1 コレクションのタイトル
- 1.2 コレクションの説明
- 1.3 ブレッドクラム
- 1.4 空きスペース
1.1 コレクションの表題欄の設定。
テキスト サイズは次のオプションのいずれかに設定できます。
1.2 コレクション記述ブロックの設定。
| 説明 | ||
|---|---|---|
| コレクションの説明 | ||
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまで、算術的に 2 ピクセルずつ増加する任意の値に設定できます。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次色を表示できるようにします。 | |
1.3 ブレッドクラムブロックの設定。
ブレッドクラムリストにコレクションページを表示できるようにします。
1.4 空きスペースブロックの設定。
| 説明 | ||
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 40px です。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 28 ピクセルです。 | |
2. 製品グリッド
| セクション設定 | 設定 | 説明 |
|---|---|---|
| 製品グリッド | ||
| ページごとの商品 | ページに表示される商品の数が 6 から 50 に調整されました。 | |
| デスクトップ上の列の数 | ページに表示される列の数は 1 ～ 5 に調整されます。 | |
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| フィルタリングと並べ替え | ||
| フィルタリングを有効にする | 顧客はナビゲーション設定のフィルターに基づいてコレクション内の製品をフィルターできます。 Search & Discovery アプリを使用してフィルターをカスタマイズします。 もっと詳しく知る。 | |
| フィルターを折りたたむ | 折りたたみフィルターを有効にします。 | |
| デスクトップフィルターレイアウト | 最も好みのデスクトップ フィルタ レイアウト (サイドバーまたはドロワー )を選択します。 | |
| 色見本を有効にする | カラー見本を有効にします。セットアップ手順を表示します。 | |
| 並べ替えを有効にする | 顧客は以下に基づいてコレクション内の製品を並べ替えることができます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 2.1 コレクションの説明
- 2.2 サブコレクション
- 2.3 プロモーション
2.1 コレクション記述ブロックの設定。
カスタマイズ可能な設定はありません。
2.2 サブコレクション ブロックの設定。
| ブロック設定 | 説明 | |
|---|---|---|
| サブコレクション メニューからコレクションへのリンクがここに表示されます。もっと詳しく知る。 | ||
| メニュー | 表示するメニューを選択/選択します。 | |
| 行ごとのサブコレクション | 行ごとに表示するサブコレクションの数を 2 ～ 5 から選択します。 | |
| コレクション数を表示 | 各コレクション内の製品の数を表示します。 | |
2.3 プロモーションブロックの設定。
| ブロック設定 | 説明 | |
|---|---|---|
| プロモーション 十分な商品が表示されない場合、ブロックが非表示になる場合があります。 | ||
| グリッド内の位置 | グリッド内のブロックの座標 (左から右、上から下)。 | |
| 画像 | ブロック画像を選択/アップロードします。 | |
| アイコン | アイコン画像を選択/アップロードします。 | |
| 見出し | ブロックのタイトル。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| モバイルレイアウト | ||
| モバイル画像 | モバイルブラウザ上のセクションの画像。 | |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
3. テキスト付き画像
このセクションでは、最大 5 つの画像を同時に表示できるため、ページのデザインの柔軟性が高まります。
| セクション設定 | 説明 | |
|---|---|---|
| テキストオーバーレイを含む画像 | ||
| 透明なヘッダーを許可する | この設定は、このセクションが最初のセクションである場合にのみ適用されます | |
| デスクトップの高さ | デスクトップ上で表示されるときの画像の高さを決定します。
| |
| デスクトップコンテンツの幅 | デスクトップで表示するときの画像の幅を決定します。 | |
| デスクトップのコンテンツの位置 | デスクトップ上のコンテンツの位置を設定します。 | |
| デスクトップコンテンツの配置 | デスクトップ上のコンテンツの配置を設定します。 | |
| 画像 #1 #2 #3 #4 #5 | デスクトップブラウザ上のセクションの画像。 | |
| モバイルレイアウト | ||
| モバイルの高さ | モバイルで表示するときの画像の高さを決定します。
| |
| モバイルコンテンツの位置 | モバイルブラウザ上のコンテンツの位置を設定します。 | |
| モバイルコンテンツの調整 | モバイルブラウザでのコンテンツの配置を設定します。 | |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| 視差効果を有効にする | 2 次元の画像またはシーンに奥行きの錯覚を生み出す視差効果を表示できるようにします。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
利用可能なブロック:
- 3.1 見出し
- 3.2 小見出し
- 3.3 テキスト
- 3.4 ボタン
- 3.5 リンク
- 3.6 画像
- 3.7 カスタムリキッド
- 3.8 空きスペース
3.1 見出しブロックの設定。
| 説明 | ||
|---|---|---|
| 見出し | ||
| 見出し | ブロックのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
3.2 小見出しブロックの設定。
| 説明 | ||
|---|---|---|
| 小見出し | ||
| 小見出し | 見出しの小見出し。 | |
| 小見出しのサイズ | 小見出しのサイズ: | |
| 二次色を使用する | 文字の色に基づいて少し明るい色を適用します。 | |
3.3 テキストブロックの設定。
| 説明 | ||
|---|---|---|
| 文章 | ||
| 文章 | テキストを追加します。 | |
| 文字サイズ | テキスト サイズは次のオプションのいずれかに設定できます。 カスタム オプションを使用すると、テキスト サイズを 12 ピクセルから 128 ピクセルまで、算術的に 2 ピクセルずつ増加する任意の値に設定できます。 | |
| テキストフォント | テキストの書式設定として、本文または見出しの2 つのオプションから選択します。 | |
| 二次色を使用する | 二次カラーを有効にします。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
3.4 ボタンブロックの設定。
| 説明 | ||
|---|---|---|
| ボタン | ||
| ボタンラベル | ボタンに表示されるテキスト。 | |
| ボタンリンク | ボタンの URL。 | |
| ボタンのサイズ | ボタンのサイズを 3 つのオプションで調整します: 小、中、または大 | |
| アウトラインボタンスタイルを使用する | ボタンのアウトライン スタイルを使用します。 | |
3.5 リンクブロックの設定。
| 説明 | ||
|---|---|---|
| リンク | ||
| 文章 | ボタンのすぐ横に配置されるリンクのテキスト。 | |
| リンク | リンクしたいURLを追加します。 | |
3.6 画像ブロックの設定。
| 説明 | ||
|---|---|---|
| 画像 | ||
| 画像 | ブロックする画像を選択します。 | |
| 画像の幅 | 2 つの画像幅オプションのいずれかを選択します。
| |
3.7 カスタム液体ブロックの設定。
独自の Liquid コードを追加してカスタム ブロックを作成できます。
3.8 空きスペースブロックの設定。
| 説明 | ||
|---|---|---|
| 空きスペース | ||
| デスクトップの高さ | デスクトップ上で表示されるときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 40px です。 | |
| モバイルの高さ | モバイルで表示するときの空きスペースの高さを決定します。 0px ～ 120px の範囲で、算術的に 4px ずつ増加します。デフォルトは 28 ピクセルです。 | |
4. 最近閲覧したもの
顧客が以前にアクセスしたことのある製品を見つけて購入を促すのに役立ちます。これにより、顧客はナビゲーション メニューから道を見つけるよりも、再度見つけやすくなります。
| 説明 | ||
|---|---|---|
| 最近見た | ||
| 最近の製品の数 | 相補積の数は 2 ～ 12 の範囲です。 | |
| デスクトップ上の列の数 | デスクトップブラウザに表示される列数を1列から5列までカスタマイズします。 | |
| デスクトップでカルーセルを有効にする | コレクションの製品のカルーセルをデスクトップ ブラウザーに表示します。 | |
| モバイルレイアウト | ||
| モバイルの列数 | モバイルブラウザに表示される列の数をカスタマイズします: 1 列または2 列。 | |
| モバイルでスワイプを有効にする | 水平スワイプでモバイル表示を 1 行に設定します。 | |
| 見出し | ||
| 見出し | セクションのタイトル。 | |
| 見出しのサイズ | 見出しのサイズは、 Small 、 Medium 、 Large 、またはExtralargeのいずれかのオプションに設定できます。 | |
| 見出しの配置 | 見出しは、 Left 、 Center 、またはRightに揃えることができます。 | |
| 見出しタグ | SEO のためにコンテンツを構造化および整理するための見出しタグを選択します。 | |
| 小見出し | 見出しの小見出しは見出しの上に配置されます。 | |
| 説明 | 見出しの説明テキストは見出しの下に配置されます。 | |
| ハイライトされたテキスト | ||
| ハイライトされたテキスト | 次の 6 つのオプションから 1 つを選択して、テキストの書式を設定します。
| |
| ハイライトされた落書き 強調表示されたテキスト スタイルを[手書きの落書き] に設定する必要があります。 | この設定では、テキストを強調表示する 5 つの方法が提供されます。
| |
| 色 | 必要に応じて、次のセクションの色をカスタマイズできます。
| |
| セクション | ||
| 上部パディングと下部パディングのパディングを 0px から 120px まで調整でき、算術的に 4px 増加します。 | ||
| セクション区切り線を表示 | このセクションの上に行区切りを表示します。 | |
| セクションを全幅にする | コンテナを全幅にします。 | |
| 断面を丸くする | 上の 2 つの角に丸いエッジを適用します。 | |
| カスタムCSS | このセクションにカスタム CSS を追加します。 | |
このセクションではブロックの追加はサポートされていません。
この記事がお役に立てば幸いです。この機能についてご質問やご不明な点がございましたら、お気軽に弊社チームのサポートまでお問い合わせください。
