- ShopifyのDawnテーマについて知りたい
- Dawnテーマの導入方法は？
- Dawnテーマはどのようなセクションが用意されているか知りたい
早速ShopifyのDawnテーマについて解説していきます。
Shopify Dawnテーマの概要
「Dawn」は、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表された「オンラインストア2.0」の機能が組み込まれた最初の公式テーマで、オープンソースで利用可能なリファレンステーマとなっています。
今回のイベントで紹介された待望の「Sections Everywhere」や新しい「メタフィールド」をはじめ、オンラインストア2.0の強力な機能が備わっています。
Shopify Dawnテーマの特徴
Dawnは、パフォーマンス・柔軟性・使いやすさを重視して構築されているとのことで、以下でご紹介する機能やさまざまな利点が備わっています。
Shopifyテーマ構築のベストプラクティスをもとに設計されています。
Sections Everywhere
これまで動的セクション（ドラック＆ドロップで編集できるセクション）はホームページでのみでしか利用できませんでした。
しかし、今後はJSONテンプレートを含むオンラインストア2.0機能を使用して、全てのページのカスタマイズが可能となりました。
デフォルトで用意されているセクションであれば、コードの編集なしにコンテンツの追加や編集・削除を行うことができ、Dawnテーマにはこれらのセクションがデフォルトで用意されています。
もちろん、コードの編集でセクションを自由に追加することも可能です。
パフォーマンスの向上
新テーマのDawnは、コンバージョンのために構築された美しく高速なストアフロントという、私たちの取り組みの結晶です。
さらに、Dawnは高速です。Dawnは最も人気のあるテーマよりも35％も速く読み込れるのです。
Dawnはパフォーマンスを念頭に置いて構築されている、超軽量のモバイルファーストなテーマです。
必要な時だけJavaScriptを使うという開発方法で、これまでにないスピードを重視して作られています。
最小限のJavaScriptで構築されており、必要に応じてJSライブラリやポリフィルではなくブラウザのネイティブ機能を利用しています。
現在半数以上のマーチャントが利用しているDebutテーマよりも35%も高速化されているとのことで、お客様の体験をより向上させることが期待できます。
デザイン
Dawnは、あらゆるブランドを表現するために使用できる柔軟なデザインで、お客様に素晴らしい購買体験を提供します。画像を中心とした商品ページ、美しい商品グリッド、スマートなカラーシステムなど、美しさを考慮して作られています。
Dawnは強力なブランド表現と直感的なインターフェイスとともに、柔軟性と使いやすさを兼ね備えています。
Shopify Dawnテーマの導入方法
Dawnテーマは、2021年6月29日以降に作成されたストアでは、デフォルトのテーマとしてセットされています。（非公開になっているため公開にする必要あり）
テーマエディタの更新も、2021年6月29日以降（日本だと6月30日以降）に作成された開発ストアにのみに適用されています。→ 2021年6月28日以前に作成されたストアでも、2021年7月9日現在新しいテーマエディタが適用されています。
ただDawnテーマは現時点では管理画面の「無料のテーマ」からは追加できないため、Shopify CLIを使ってテーマを新規作成するなどして、自分でテーマを追加する必要があります。
既存のテーマでオンラインストア2.0の機能を使用するためには、以下の手順で移行する必要があります。
Shopify Dawnテーマで用意されているセクション
それでは、実際にDawnテーマにて用意されているセクションの項目と、実際の表示について見ていきます。
※画面は2021年7月現在のものです
Dawnテーマのトップページの編集・カスタマイズ方法
管理画面の「オンラインストア」→「カスタマイズ」を選択すると、トップページ（ホームページ）の編集画面が開きます。
こちらの画面の左側から、HTML/CSSの知識がなくても、簡単にセクションを追加したり、順番を変えたり、表示をカスタマイズしたりできます。
Dawnテーマで利用できるセクション一覧
編集できる項目は以下です。
- お問い合わせフォーム
- カスタマイズされたLiquid
- コラージュ
- コレクションリスト
- テキスト付き画像
- ブログ記事
- ページ
- マルチカラム
- メール登録者
- リッチテキスト
- 特集コレクション
- 画像バナー
それではそれぞれのセクションについてみていきます。
お問い合わせフォーム
お問い合わせフォームを埋め込みたい場合に使用します。
実際の表示は以下のようになります。
用意されている項目は以下の通り。
- 名前
- メール（必須）
- 電話番号
- コメント
- 送信ボタン
こちらは特にカスタマイズ可能な設定項目はなく、規定のフォームが挿入されます。
カスタマイズされたLiquid
こちらは直接Liquidのコードを簡単に挿入できます。
コラージュ
コラージュは、ビデオ・商品・コレクションを組み合わせて配置できるセクションです。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「デスクトップのレイアウト」の「左側の大きなブロック」「右側の大きなブロック」から、大きなブロックを左にするか右にするかを選択できます。
「モバイルのレイアウト」からは、「コラージュ」にするか、「列」で縦に積むかを選択できます。以下は「コラージュ」を選択したときのモバイル表示です。
もちろん、ブロックをドラック＆ドロップして順番を入れ替えることも可能です。
コレクションリスト
コレクションリストは、コレクションを一覧表示します。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
画像比は、「画像に合わせる」「ポートレート」「正方形」から選択可能。
コレクションを実際に選択すると以下のようになります。カラースキームは「アクセント1」を選択しています。コレクションの画像がない場合は中央のようになります。
「画像の余白を追加する」にチェックすると、以下のように画像の周りにパディングが設定されます。
「モバイルでスワイプを有効にする」「リストに表示されているよりも多くのコレクションが含まれている場合、「すべてを表示」ボタンを有効にします」にチェックすると、モバイル表示の際に、以下のようになります。（デスクトップでは特に変わらない）
各コレクションをドラック＆ドロップして順番を入れ替えることももちろん可能です。
テキスト付き画像
テキスト付き画像は、画像＋見出し＋テキスト＋ボタンのセットです。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「画像比」は「画像に合わせる」「小」「大」から選択できます。
カラースキームは5種類の中から選択でき、「見出し＋テキスト＋ボタン」部分の背景色が変わります。
「デスクトップのレイアウト」は「最初の画像」「最初のテキスト」（日本語がおかしい）から選択ができ、「最初の画像」の場合は画像が左に、「最初のテキスト」の場合は画像が右になります。
モバイル表示は以下。
「見出し」「テキスト」「ボタン」はドラック＆ドロップで順番を入れ替えたり、削除することが可能です。
ブログ記事
ブログ記事は、指定したブログの記事を一覧で表示します。
実際の表示は以下のようになります。（日付表示がデフォルトでエラーになっているようです）
カスタマイズ項目は以下。
「ブログ記事」は、3つまで指定可能。1つや2つの場合は全幅でかなり大きく表示されます。
「ブログに表示されているよりも多くのブログ記事が含まれている場合、「すべてを表示」ボタンを有効にします」は、「ブログ記事」で指定した数よりも記事数が多い場合に、「すべてを表示」ボタンを表示します。
「記事のサムネイルを表示する」は、オフにすると画像が非表示になります。
「サブ背景を表示する」は、オンにするとセクション全体にグレーの背景色が設定され、テキスト部分のエリアの背景色が白になります。
モバイル表示は以下のようにスワイプ表示となります。
ページ
ページは指定したページの「Title」「コンテンツ」をそのまま埋め込みます。
フォームを含むページのフォームは表示されないため、埋め込みたい場合はページではなく「お問い合わせフォーム」を使います。
カスタマイズ項目はなく、ページを選択するのみ。
マルチカラム
マルチカラムは、「画像」「見出し」「テキスト」を含む列を、横に複数並べる場合に使用します。
実際の表示は以下のようになります。
「画像の幅」は、「列の幅の1/3」「列の半分の幅」「列の全幅」から選択可能。以下は「列の幅の1/3」の表示です。
「画像比」は、「ポートレート」「正方形」「円形」が選択可能。以下は「円形」の表示。
「列の配置」は、「左」「中央」から選択可能。テキストの水平方向の配置を設定します。
「サブ背景」は、「なし」「列の背景を表示する」「セクションの背景を選択する」から選択可能。「セクションの背景を選択する」にすると、セクション全体にグレーの背景色が設定され、テキスト部分のエリアの背景色が白になります。
それぞれの列には「画像」「見出し」「テキスト」を設定可能。
列はドラック＆ドロップで順番を入れ替えたり、削除することが可能。
モバイルの場合は縦に積まれて表示されます。
メール登録者
メール登録者は、メール購読の登録フォームを表示します。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「カラースキーム」は5種類用意されており、背景色が変わります。
「セクションを全幅にする」はオンにするとブラウザの横幅いっぱいまで表示されます。
各ブロック「見出し」「小見出し」「メールフォーム」の順番は、ドラック＆ドロップで変更可能です。
リッチテキスト
リッチテキストは、「見出し」「テキスト」「ボタン」のセットです。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「カラースキーム」は5種類用意されており、背景色が変わります。
「セクションを全幅にする」はオンにするとブラウザの横幅いっぱいまで表示されます。
特集コレクション
特集コレクションは、特定のコレクションの商品を一覧で表示します。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「表示する最大の商品」は、最大12まで選択可能。
「コレクションに表示されているよりも多くの商品がある場合、「すべてを表示」ボタンを有効にします」「モバイルでスワイプを有効にする」は、モバイルで以下のような表示になります。（デスクトップでは特に変わらない）
※販売という翻訳のデフォルトが変ですね。（SALEのことです）
以下は「商品カード」の設定。
「画像比」は、「画像に合わせる」「ポートレート」「正方形」が選択可能。
「マウスオーバー時に2番目の画像を表示する」は、2枚目の画像がある場合にマウスオーバー時に表示されます。
「余白を追加する」は、オンにすると画像の周りにパディングが設定されます。
「販売元を表示する」は、オンにすると画像と商品名の間に販売元が表示されます。
画像バナー
画像バナーは、大きなバナー画像の上に、見出し・テキスト・ボタンを配置できる、メインビジュアルなどに使用できるセクションです。
カルーセルではないため、複数の画像をスライド表示することはできません。
実際の表示は以下のようになります。
カスタマイズ項目は以下。
「最初の画像」は、この画像のみを設定した場合は、1枚が背景全体に大きく表示されます。「2番目の画像」も設定した場合は、この「最初の画像」は左側50％に表示されます。
「2番目の画像」は、右側50％に表示されます。
「デスクトップのテキスト位置」は、「上」「中央」「下」から選択でき、「見出し・テキスト・ボタン」が含まれる四角いエリアの縦位置が設定できます。
「カラースキーム」は、5種類から「見出し・テキスト・ボタン」が含まれる四角いエリアの背景色を設定できます。
「モバイルで画像を重ねる」は、「最初の画像」「2枚目の画像」をどちらも設定した際に、最初の画像は上に、2枚目の画像は下にして、テキスト部分を挟むように画像を表示することができます。
「セクションの高さを最初の画像サイズに合わせる」は、その名の通りセクションの高さが1枚目の画像の高さになります。
各ブロック「見出し」「テキスト」「ボタン」の順番は、ドラック＆ドロップで変更可能です。
ボタンは2つまで表示可能で、設定画面は以下になります。
以上です。
いくつかエラーがあったり表示がおかしい部分がありますが、おそらく近いうちに修正されるのかと思います。
セクションの種類的にはDebutよりも少ないですが、カスタマイズすることでセクションは追加可能です。
https://torublog.com/shopify-metafields/
