2023年9月時点2024年9月更新のDawnのホームページ（TOPページ）のテンプレートで利用できるセクション全17個をノンブレスで説明します！
全17セクションの利用方法説明
| セクション名 | セクション説明と挿入イメージ | 内包 ※ | |
| 有無 | 備考 | ||
| 特集コレクション | 特定のコレクションの商品群を表示 | 無 | – |
| 特集商品 | 特定の1商品を表示 | 有 | ブロック |
| コレクションリスト | 指定したコレクションページへの誘導を表示 | 有 | コレクション |
| リッチテキスト | テキストのみを表示 | 有 | ブロック |
| テキスト付き画像 | 画像とテキストがセットになった表現 | 有 | ブロック |
| 画像バナー | 画像バナーを表示 | 有 | ブロック |
| スライドショー | スライドショーを表示 | 有 | スライド |
| コラージュ | 画像 / 1商品 / コレクションページへのリンク/ 動画から選択した3つを表示 | 有 | ブロック |
| マルチカラム | 横並びのコンテンツを並べる表示（PC） スワイプでの表示（モバイル）  | 有 | 列 |
| 複数列 | 縦並びのコンテンツを並べる表示 | 有 | 行 |
| 折りたたみ可能なコンテンツ | 情報を折りたたみできるコンテンツを表示 | 有 | 折りたたみ可能な行 |
| メール登録 | メルマガ登録のエリアを表示 | 有 | ブロック |
| お問い合わせフォーム | お問い合わせフォームを表示 | 無 | – |
| 動画 | 動画を表示 | 無 | – |
| ブログ記事 | ブログを表示 | 無 | – |
| カスタムLiquid | LiquidやHTMLなどのコードを入れ表示 | 無 | – |
| ページ | ページで作成された内容を表示 | 無 | – |
特集コレクション
ある特定のコレクションを選択し、そのコレクション内の商品の一覧を表示します
見出し：初期設定に「特集コレクション」と入力されている箇所
見出しのサイズ：「小」「中」「大」「特大」「4L」から選択
説明：初期設定には入っていないが、ここに文章を設定すると見出しと商品一覧の間に表示される
「管理画面からコレクションの説明を表示する」のチェックボックスにチェックを入れることでコレクションページの説明に入っている文章を呼び出すことができる
説明のスタイル：「本文」「サブタイトル」「大文字」から選択（微妙に字体が変わる）
コレクション：ここから選択するコレクションの商品一覧が表示される
表示する最大の商品：2~25商品まで設定可能
デスクトップの列数：横に並ぶ商品数の設定。1~6まで設定可能
「商品を全幅にする」のチェックボックスにチェックを入れると、画面の最大幅で商品群が表示されるようになる
「コレクションに表示されているよりも多くの商品がある場合、「すべてを表示」を有効にします」のチェックボックスはチェックを入れることで商品点数が多い場合コレクションページへの遷移先を表示する（初期設定済み）
「すべてを表示」のスタイル：上記の遷移先の表示の表現を「リンク」「アウトラインボタン」「ソリッドカラーのボタン」の3つから選択できる
「デスクトップでカルーセルを有効にする」のチェックボックスにチェックを入れると、表示する最大の商品で設定した数字がデスクトップの列数よりも大きく、かつ列数よりも多くの商品が存在する場合に商品群が横にスライドして表示することができる
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
商品カードの画像比：商品一覧で表示される画像の比率を「画像に合わせる」「ポートレート」「正方形」の3つから選択できる
商品カードの画像の形状：「デフォルト」「アーチ」「塊」「左向き山形印」「右向き山形印」「ダイヤモンド」「平行四辺形」「丸」の8つから商品画像の形を選択できる ※「塊」と「丸」はマウスオーバー時に動くのでかわいい
「マウスオーバー時に2番目の画像を表示する」にチェックを入れることで商品画像に2枚目を設定している場合に表示される（初期設定済み）
「販売元を表示する」にチェックを入れると、商品タイトルと商品価格の間に販売元が表示される
「商品の評価を表示」にチェックを入れ、かつレビューアプリを入れることでレビュー表示ができる
クイック追加：「なし」「スタンダード」「一括」と設定ができ、「スタンダード」ではそれぞれの商品情報の下に「カートに追加する」ボタンが表示され、「一括」では2個以上まとめてカートに追加できる
どちらも商品詳細ページに遷移することなくカートにまとめて入れることができる
モバイル設定は以下
モバイルでの列数：「1列」「2列」から選択
「モバイルでスワイプを有効にする」にチェックを入れると、横一列で商品群が表示されスワイプで商品群の確認ができる
セクションの余白は特集コレクションのセクションの前後を「上部の余白」「下部の余白」としてどの程度の（0〜100pxの値の幅）余白を空けるかの設定ができます
上記の補足として「デスクトップでカルーセルを有効にする」と商品カードの画像の形状を「丸」にしてマウスオーバーしたときのアクションを載せています
「「クイック追加」ボタンを有効にする」にチェックを入れてカートへのボタンも表示しています
特集商品
ある特定の商品を選択し、その商品の情報を確認・購入まで行なえます
上図の「特集商品」の箇所をクリックした後の設定内容が下記の動画になります
「特集コレクション」との重複する内容は割愛します
商品：ここから選択する商品情報が表示される
配色：「サブ背景を表示する」にチェックを入れるとメインの背景設定はそのままに、サブ背景として配色スキームで選択された色味が適用される
メディアのデスクトップメディアの幅：「小」「中」「大」から選択
「メディアを画面の高さに制限する」にチェックを入れることで極端に横もしくは縦に長い画像を切り取って表示する
メディアの適合したメディア：「メディアを画面の高さに制限する」にチェックを入れた上で、「オリジナル」「塗りつぶし」から選択すると画像の切り取られかたが変わる（おそらく後者はメディアの高さを制限した幅いっぱいに画像を表示させる、といったような指定）
メディアのデスクトップのメディア位置：「左」「右」から選択。画像の表示位置
メディアの画像ズーム：「Lightboxを開く」「クリックしてカーソルを合わせる」「ズームなし」から選択
「バリエーションを選択した後、他のバリエーションのメディアを非表示にする」※違いがわからないため要調査
「ビデオループを有効にする」にチェックを入れておくと動画を商品画像に入れている場合に1度再生を押すと動画が終了したら自動ではじめから再生される（対象はmp4の拡張子のファイル）
「特集商品」で使用できるブロックについて
特集商品のセクションで使用できるブロックの種類は11あります
- テキスト [デフォルト]
- タイトル ※ [デフォルト]
- 価格 ※ [デフォルト]
- SKU ※
- 数量セレクター ※ [デフォルト]
- バリエーションピッカー ※ [デフォルト]
- 購入ボタン ※ [デフォルト]
- 共有 ※ [デフォルト]
- カスタマイズされたLiquid
- 商品評価 ※
- テキスト付きアイコン
※1つのセクションに1度しか適用できないブロック
[デフォルト] セクション適用時に初期で設定されているブロック
※に関しては商品で設定した商品情報が表示されます
それ以外のブロックは必要時応じて追加が可能ですが、調査の結果20以上のブロック適用が確認できました
追加ができるとはいえ、商品情報の目的で使用するならばそこまで多くのブロックは必要としないと考えられます
購入されるお客様に取ってわかりやすい情報追加という目線で考えるとそれなりの数のブロック数になっていくかなと思っています
コレクションリスト
選択したコレクションへの遷移先を表示します
上図の「コレクションリスト」の箇所をクリックした後の設定内容が下記の動画になります
設定は「特集コレクション」と重複していますのでそちらを参照ください
「コレクションリスト」で使用できるブロックについて（コレクション）
コレクションリストでは内包されるパーツは「コレクション」です
どのコレクションページに遷移させたいかをここで設定します（最大15のコレクションを設定可能）
コレクションを選択すると表示される画像は、それぞれのコレクション編集ページの「画像」の箇所が適用されます
リッチテキスト
お店のお知らせやブランドストーリーなど様々な場面で使用できる「リッチテキスト」セクションです
上図の「リッチテキスト」の箇所をクリックした後の設定内容が下記の動画になります
デスクトップのコンテンツ位置：セクションの位置の調整。「左」「中央」「右」から選択
コンテンツアラインメント：文章をどのように揃えるかの設定。「左」「中央」「右」から選択
上記の補足で、コンテンツアラインメントとコンテンツ位置の関係性です
文章の始まりとそれらを包括するエリアの位置を調整することでサイトの収まりが変わります
「リッチテキスト」で使用できるブロックについて
リッチテキストのセクションで使用できるブロックの種類は4あります
- 見出し（最大3つまで）
- キャプション（最大3つまで）
- テキスト（最大3つまで）
- ボタン（最大2つまで）
上記、各ブロックで1セクションあたりで使用できる個数に制約があります
また、これら4つの合計数の11までブロック追加が可能です
テキスト付き画像
テキストと画像をセットで表示できます
上図の「テキスト付き画像」の箇所をクリックした後の設定内容が下記の動画になります
画像：表示する画像を設定
画像の高さ：「画像に合わせる」「小」「中」「大」から選択
デスクトップ画像の幅：「小」「中」「大」から選択。画像とテキストの比率の調整
デスクトップ画像の配置：「右」「左」から選択。逆なので注意
デスクトップのコンテンツ位置：コンテンツのレイアウトにオーバーラップを適用している際の表現。文章のエリアの配置をどこにするかの設定。「上」「中位」「下」から選択
デスクトップのコンテンツアラインメント：文章をどのように揃えるかの設定。「左」「中央」「右」から選択
コンテンツのレイアウト：画像の上にテキストが被さる表現。「オーバーラップなし」「オーバーラップ」から選択
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
アニメーションの画像の挙動：「なし」「周囲の挙動」「スクロールで拡大する」から選択
モバイル設定は以下
モバイルのコンテンツアライメント：文章やパーツの配置、揃え方の設定。「左」「中央」「右」から選択。
上記の補足で、コンテンツのレイアウトで「オーバーラップ」を適用させたときのデスクトップのコンテンツ位置の違いです
アニメーションの画像の挙動も「周囲の挙動」としていますので併せて参考にしてください
「テキスト付き画像」で使用できるブロックについて
テキスト付き画像のセクションで使用できるブロックの種類は4あります
- 見出し
- テキスト
- キャプション
- ボタン
これらはそれぞれ1つずつ使用できます（最大ブロック数4）
画像バナー
選択した画像を画面いっぱいに表示でき（最大2枚）、その画像の上に文章やボタンを表示させ、任意のページにリンクさせることができます
上図の「画像バナー」の箇所をクリックした後の設定内容が下記の動画になります
最初の画像：画像の設定。2番目の画像を設定した場合、PCでは左側に表示される
2番目の画像：画像の設定。設定しないことも可能
画像のオーバーレイ不透明率：最初の画像と2番目の画像の透明度を調整する。テキストやボタンを画像上に表示する際に可読性を上げることやそのほかデザインの表現をするために使用
バナーの高さ：「最初の画像に合わせる」「大」「中」「小」から選択
デスクトップのコンテンツ位置：画像の上にテキスト・ボタンを表示する場合のそれらのエリアの表示位置
「デスクトップ上にコンテナを表示」にチェックを入れるとテキストやボタンの背景に配色で適用された色が表示される
デスクトップのコンテンツアラインメント：画像の上にテキスト・ボタンを表示した場合の文章の揃えかたやボタンの配置位置。「左」「中央」「右」から選択
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
アニメーションの画像の挙動：「なし」「周囲の挙動」「背景位置の固定」「スクロールで拡大する」から選択
モバイル設定は以下
モバイルのコンテンツアライメント：文章やパーツの配置、揃え方の設定。「左」「中央」「右」から選択。
「モバイルで画像を重ねる」にチェックを入れると2枚の画像を設定した場合、上下に画像が配置される。チェックを外すと2枚の画像が並列して横に配置される
「モバイル上にコンテナを表示」にチェックを入れるとテキストやボタンの背景に配色で適用された色が表示され、かつ画像＋コンテナ＋画像という順番で表示される
上記の補足で、画像バナーで表示される各ブロックの名称や「コンテナ」部分の説明が下図です
上記を踏まえて「コンテナ」箇所に関わる設定の変化をデスクトップとモバイルそれぞれの画面を確認ください
また、これらの動画はアニメーションの画像の挙動の「背景位置の固定」の設定の挙動として設定しています
「画像バナー」で使用できるブロックについて
画像バナーのセクションで使用できるブロックの種類は3あります
- 見出し
- テキスト
- ボタン
これらはそれぞれ1つずつ使用できます（最大ブロック数3）
スライドショー
選択した画像の上に文章やボタンを表示できたり複数画像を設定することにより設定画像を前後にスライドして表示します
上図の「スライドショー」の箇所をクリックした後の設定内容が下記の動画になります
レイアウト：「全幅」「グリッド」から選択
スライドの高さ：「最初の画像に合わせる」「小」「中」「大」から選択
ページネーションのスタイル：「ドット」「カウンター」「数字」から選択
「スライドの自動切り替え」にチェックを入れることで下記の設定を適用できる
スライドを変更する間隔：次の画像に切り替える間隔を3~9秒で設定できる
アニメーションの画像の挙動：「なし」「周囲の挙動」から選択
モバイル設定は以下
「モバイルで画像の下にコンテンツを表示する」はテキストやリンクボタンを表示している場合に、チェックを入れることで画像の下にそれらを表示します（初期設定）チェックを外すと画像の上に表示されます
アクセシビリティのスライドショーの説明：スクリーンリーダーの読み上げ機能のために簡潔な説明を記入できる
「スライドショー」で使用できるブロックについて（スライド）
スライドは最大5枚設定可能です
コラージュ
商品へのリンクや動画、画像を複合して載せることができます
店舗説明を動画などを通じ表現したり、ブロックとしてテキストのパーツがないため、画像にテキストを入れて画像化して使用するとデザインの幅を広げることができます
上図の「コラージュ」の箇所をクリックした後の設定内容が下記の動画になります
「特集コレクション」との重複する内容は割愛します
デスクトップのレイアウト：「左側の大きなブロック」「右側の大きなブロック」から選択
モバイルのレイアウト：「コラージュ」「列」から選択。初期値は「列」
カードスタイル：「個別のカードスタイルを使用する」「すべてを商品カードとする」から選択。初期値は「すべてを商品カードとする」
上記の補足ですが、カードスタイルはブロックに「商品」または「コレクション」を設定した場合、カードスタイル（デザイン）をどこから継承するか？ という設定です
その設定は、テーマ設定の記事でまとめたこの箇所を継承して表示されます
「コラージュ」で使用できるブロックについて
コラージュのセクションで使用できるブロックの種類は4あります
- 画像
- 商品
- コレクション
- ビデオ
これらはそれぞれ1つずつ使用できます（最大ブロック数3）
「ビデオ」に関しては、YouTubeなどのリンクを設定するか、Shopifyのファイルとしてアップロードした動画の適用はGIF形式のみ適用できます
マルチカラム
複数コンテンツを横並びで表示できるエリアです
上図の「マルチカラム」の箇所をクリックした後の設定内容が下記の動画になります
「特集コレクション」との重複する内容は割愛します
画像の幅：「列の幅の3分の1」「列の半分の幅」「列の全幅」から選択
画像比：「画像に合わせる」「ポートレート」「正方形」「丸」の4つから選択できる
デスクトップの列数：横に並ぶ列を1~6列で設定
列の配置：「左」「中央」から選択
サブ背景：「なし」「列の背景を表示する」から選択
ボタンのラベル：ボタンに表示される文言を設定
ボタンのリンク：ボタンのリンク先を設定
モバイル設定は以下
モバイルでの列数：「1列」「2列」から選択
「モバイルでスワイプを有効にする」にチェックを入れると縦に長い表現にならず、スワイプで内容の確認が可能（初期はチェックが外れているためコンテンツが多い場合、縦に並ぶ）
「マルチカラム」で使用できるブロックについて（列）
マルチカラムのセクションでは「列」の追加をしていきます
列は確認する限り40以上設定はできます（それ以上は未検証）が、現実的ではありません
表現したい内容にそって伝えたいことを簡潔にまとめて伝えるようにしましょう
列に設定できる内容は下記です
- 画像
- 見出し
- 説明
- リンクラベル
- リンク
複数列
複数コンテンツを縦並びで表示できるエリアです
「マルチカラム」との違いは、マルチカラムは画像を表示させない場合でも違和感なく利用できます
それに対しこちらは画像とテキストなどの要素をセットとして表示するほうが見た目に違和感が生じません
上図の「複数列」の箇所をクリックした後の設定内容が下記の動画になります
これまでに説明したセクションと重複する箇所もありますが以下にまとめます
画像の高さ：「画像に合わせる」「小」「中」「大」から選択
デスクトップ画像の幅：「小」「中」「大」から選択
見出しのサイズ：「小」「中」「大」「特大」「4L」から選択
テキストスタイル：「本文」「サブタイトル」から選択
ボタンのスタイル：「アウトラインボタン」「ソリッドカラーのボタン」から選択
デスクトップのコンテンツ位置：「上」「中央」「下」から選択
デスクトップのコンテンツ配置：「左」「中央」「右」から選択
デスクトップ画像の配置：「左から交互に」「右から交互に」「左寄せ」「右寄せ」の4つから選択
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
コンテナの配色：テーマ設定で設定した配色スキームを利用しコンテナ部分に適用することができる
モバイル設定は以下
モバイルのコンテンツ配置：「左」「中央」「右」から選択
「複数列」で使用できるブロックについて（行）
複数列のセクションでは「行」の追加をしていきます
「マルチカラム」と同じく行の追加は40以上可能です（それ以上は未検証）
ただし、現実的ではないため追加数はそれぞれの店舗内容に応じた数で設定をしてください
行に設定できる内容は下記です
- 画像
- キャプション
- 見出し
- テキスト
- ボタンのラベル
- ボタンのリンク
表示の参考までに以下の様な設定表現が可能です
折りたたみ可能なコンテンツ
Q&Aなど情報を折りたたんで表示できます
上図の「折りたたみ可能なコンテンツ」の箇所をクリックした後の設定内容が下記の動画になります
キャプション：見出しの上に表示される
見出し：初期設定に「折りたたみ可能なコンテンツ」と入力されている箇所
見出しのサイズ：「小」「中」「大」「特大」「4L」から選択
見出しの配置：「左」「中央」「右」から選択
レイアウト：「コンテナー」「行のコンテナー」「セクションのコンテナー」の3つから選択
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
コンテナの配色：テーマ設定で設定した配色スキームを利用しコンテナ部分に適用することができる
「最初の折りたたみ可能な行を開く」にチェックを入れると最初の行が開かれた状態となる
画像のレイアウトの画像：画像を設定すると、折りたたみ可能なコンテンツの横に画像を表示できる（デスクトップ）モバイルでは折りたたみ可能なコンテンツの上に表示される
画像のレイアウトの画像比：「画像に合わせる」「小」「大」から選択
画像のレイアウトのデスクトップのレイアウト：「画像1」「画像2」から選択。「画像1」は画像が左、「画像2」は画像が右（デスクトップに限る）
「折りたたみ可能なコンテンツ」で使用できるブロックについて（折りたたみ可能な行）
折りたたみ可能なコンテンツのセクションでは「折りたたみ可能な行」の追加をしていきます
追加は20以上可能です（それ以上は未検証）
行に設定できる内容は下記です
- 見出し
- アイコン
- 行のコンテンツ
- ページからの行のコンテンツ
ページを指定してその内容を折りたたまれたコンテンツとして表示することもできます
表示の参考までに以下の様な設定表現が可能です
メール登録
メルマガ登録ができるエリアを表示します
上図の「メール登録」の箇所をクリックした後の設定内容が下記の動画になります
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
「セクションを全幅にする」にチェックを入れると画面幅いっぱいのコンテンツ表現となる
「メール登録」で使用できるブロックについて
メール登録のセクションで使用できるブロックの種類は3あります
- 見出し
- 小見出し
- メールフォーム
お問い合わせフォーム
お問い合わせフォームを表示します
動画
MP4形式のファイルもしくはYouTubeなどURLから動画を表示することができます
セクションを全幅にすることも可能です
ブログ記事
Shopifyで登録したブログを表示することができます
見出し：初期設定に「ブログ記事」と入力されている箇所
見出しのサイズ：「小」「中」「大」「特大」「4L」から選択
ブログ：表示したいブログを選択
表示するブログ記事数：2~4から選択
デスクトップの列数：1~4列から選択
配色：テーマ設定で設定した配色スキームを利用しそのセクションに適用することができる
「記事のサムネイルを表示する」チェックを入れるとブログ記事の「記事のサムネイル」に設定された画像が表示される
「日付を表示する」にチェックを入れると公開日が表示される
「執筆者を表示する」にチェックを入れるとブログ記事の「著者」部分に表示された名前が表示される
「ブログに表示されているよりも多くのブログ記事が含まれている場合、「すべてを表示」ボタンを有効にします」にチェックを入れると表示するブログ記事数で設定した記事数以上の投稿がブログ内にある場合、「すべてを表示」ボタンからブログの全記事を確認できるようになる
カスタムLiquid
LiquidやHTMLなどコードを追加し、高度な表現をすることができます
ページ
ページで作成した内容を呼び出して表示することができます
注意しておきたいのが、表示される内容はページのタイトルとコンテンツのみが反映されます
テンプレートで設定した内容は反映されませんのでその点確認が必要です
セクション追加後の運用に役立つこと
セクション同士ドラッグアンドドロップで前後替えられる
作成したセクションはドラッグアンドドロップで位置を変更することができます
また、セクションの削除・非表示も簡単になりました！（以前は削除は1階層潜らなければ削除できなかった）
季節に応じたセクション、緊急セクションは非表示でいつでも出せるように
非表示を利用することで季節に応じた内容やセールなど工数をかけることなく運用することができます
作成したセクションを複製することもできます
使用セクションも数に限りがあるので注意！
セクションは最大25セクションまでの追加が可能ですので、その範囲に収めるかもしくはそれ以上の再現をしたい場合はテーマのLiquid編集が必要となります
最後に
いかがでしたでしょうか
Shopifyの無料テーマDawnでも設定が充実しており日々改善も繰り返されて素敵なページを実現できるようになっています
Shopifyのテーマ設定も行い、オリジナルなサイトを作成しましょう！
