- Shopifyの「テーマ設定」とは
- Shopifyの無料テーマDawn「テーマ設定」用途一覧
- Dawnテーマ設定: ロゴ
- Dawnテーマ設定: 色
- Dawnテーマ設定: タイポグラフィー
- Dawnテーマ設定: レイアウト
- Dawnテーマ設定: アニメーション
- Dawnテーマ設定: ボタン
- Dawnテーマ設定: バリエーションのピル型ボタン
- Dawnテーマ設定: 入力
- Dawnテーマ設定: 商品カード
- Dawnテーマ設定: コレクションカード
- Dawnテーマ設定: ブログカード
- Dawnテーマ設定: コンテンツコンテナー
- Dawnテーマ設定: メディア
- Dawnテーマ設定: ドロップダウンとポップアップ
- Dawnテーマ設定: ドロワー
- Dawnテーマ設定: バッジ
- Dawnテーマ設定: ブランド情報
- Dawnテーマ設定: SNS
- Dawnテーマ設定: 検索行動
- Dawnテーマ設定: 通貨形式
- Dawnテーマ設定: カート
- Dawnテーマ設定: チェックアウト
- Dawnテーマ設定: カスタムCSS
- Dawnテーマ設定: テーマスタイル
Shopifyの「テーマ設定」とは
Shopifyの「テーマ設定」とは、オンラインストアのページのテーマのカスタマイズの箇所でできるテーマの大枠の設定のことです
カスタマイズの基本知識は以下の記事にまとめています
Dawnの各セクションの設定説明は以下の記事にまとめています
Shopifyの無料テーマDawn「テーマ設定」用途一覧
| ロゴ | 店舗（ブランド）ロゴとファビコンの設定 |
| 色 | キーカラーなど使用色の設定 |
| タイポグラフィー | フォントの大きさや種類の設定 |
| レイアウト | セクション間やグリッドの垂直・水平方向の余白設定 |
| アニメーション | スクロールやマウスオーバー時のアニメーション設定 |
| ボタン | ボタンの形状の設定 |
| バリエーションのピル型ボタン | バリエーションの形状の設定 |
| 入力 | フォームなどのフィールドの形状の設定 |
| 商品カード | 商品一覧の見せ方の設定 |
| コレクションカード | コレクション一覧の見せ方の設定 |
| ブログカード | ブログ一覧の見せ方の設定 |
| コンテンツコンテナー | コンテンツの形状や余白の設定 |
| メディア | 画像適用のあるセクションのイメージ部分の形状や余白の設定 |
| ドロップダウンとポップアップ | ドロップダウンやポップアップ時の見た目の設定 |
| ドロワー | ドロワー時の見た目の設定 |
| バッジ | 「売り切れ」表示などの形状の設定 |
| ブランド情報 | フッターに追加される内容の設定 |
| SNS | 店舗が運用するなど関連するSNSのリンク設定 |
| 検索行動 | サイト内検索時の表示設定 |
| 通貨形式 | 通貨コードの表示非表示設定 |
| カート | カートアクション・表示設定 |
| チェックアウト | 決済画面での表示設定 |
| カスタムCSS | CSSの設定 |
| テーマスタイル | テーマ内でのビジュアル一括変更 |
Dawnテーマ設定: ロゴ
店舗（ブランド）ロゴとそれを表示する大きさ、ファビコンを設定する箇所です
ロゴの反映は上図のように表示されます
デスクトップ上での表示サイズは横幅50px〜300pxまでで調整が可能です
また、トップページではこの箇所がh1の場所となりますのでロゴを入れる場合はalt設定にも注意が必要です
ファビコン画像はサイト訪問時のタブのマークに表示されたり、サイトをお気に入りした場合のマークとして使用されます
ブランド力を高め、お客様に他サイトとの識別をしてもらえるのに役立ちます
また、設定していない場合は以下のようにファビコン設定がない表示（地球マーク）となってしまうため独自のロゴを入れるほうがサイトへの信頼感が高まる効果もあります
↑ 一覧へ戻る
Dawnテーマ設定: 色
サイトに反映する色味の設定ができます
スキームとは固定の配色案とでも覚えておいたらわかりやすい気がしています
セクションに対してそれぞれのスキームを割り当てられるのでブランドカラーなど何パターンか設定しておくとサイトづくりに便利です
スキームは最大21案作成しておくことができます
詳細は別記事にでも書こうと思います
↑ 一覧へ戻る
Dawnテーマ設定: タイポグラフィー
サイトに使用するフォントの設定をする箇所です
フォントの種類や大きさの設定が可能です
反映される箇所は「見出し」「本文」と分かれています
「見出し」はカスタマイズ時に表示されている見出しというタイトルを参考にしてください
「本文」はそれ以外の内容に適用されます（商品ページでは商品名などを入れるタイトル部分が「見出し」にあたり、説明部分が「本文」にあたります）
フォントの種類に関してはブランドイメージなどもあるかと思いますが、サイトを閲覧しているお客様の利用環境にもよって表示速度が左右される可能性もあります
「他のフォント」よりも「システムフォント」から設定するほうが表示の読み込みは速いためおすすめです
↑ 一覧へ戻る
Dawnテーマ設定: レイアウト
特定の箇所の余白設定ができます
セクション間のスペースとは下記のように、カスタマイズでセクションを追加してサイトを作成していきますがそのそれぞれのセクションとの余白を設定できます
初期値は0pxから最大100pxまで設定可能です
グリッドとはカスタマイズで選択するセクションに「マルチカラム」「複数列」が存在しますが、これらを適用し、複数の列ないし行で構成される場合のそれぞれの要素の間の余白設定を実現します
「マルチカラム」の場合は列が複数に及ぶ場合、水平スペース（左右の余白）と垂直スペース（上下の余白）が適用されます。ただし、垂直スペースは2行以上とならない場合は適用されません
「複数列」は行が複数に及ぶ場合の垂直スペース（上下の余白）が適用されます
初期値は水平スペース・垂直スペースともに8pxで最小単位4px〜最大40pxまで設定が可能です
↑ 一覧へ戻る
Dawnテーマ設定: アニメーション
画面のスクロール時やマウスオーバー時の動きの設定ができます
「スクロールでセクションを表示する」にチェックが入っているとページをスクロールするときにセクションの読み込みが行われるのでふわっとした表示が実現できます
ホバー効果は「なし」「垂直リフト」「3Dリフト」で選択できます（初期値はなし）
それぞれの動きはデスクトップの場合にカーソルを要素に乗せたときのアクションが微妙に違います
↑ 一覧へ戻る
Dawnテーマ設定: ボタン
ボタンの形状の設定ができます
罫線の箇所で線の太さとその不透明度を決められます
角の半径を変えることで角丸のボタンを実現できます
（罫線の太さは1px刻み、不透過率は5%刻み、角の半径は2px刻みで刻んでいます）
上図のようにボタンに影の設定をすることもできます
不透過率で影の設定（初期値は不透過率が0%になっているので影が表示されていないことになります。表示したい場合は0以上の値にすればOK！）
水平または垂直オフセットで影の位置を調整できます
ぼかしは影をぼかすかどうかの設定です
（不透過率は5%刻み、水平オフセット・垂直オフセットは2px刻み、ぼかしは5px刻みで刻んでいます）
↑ 一覧へ戻る
Dawnテーマ設定: バリエーションのピル型ボタン
バリエーションのピル型ボタンというのは、商品ページでバリエーションがある場合かつ商品ページのバリエーションピッカーのタイプが「ピル型ボタン」を適用している場合の表示設定です
「ドロップダウン」形式では適用されませんので注意してください（「ドロップダウン」の場合はテーマ設定の「入力」箇所の設定で適用）
設定は「ボタン」の設定時と同じ要領です
罫線の箇所で線の太さとその不透明度を、角の半径を変えることで角丸のボタンを実現できます
（刻みは同じなので省略）
影も「ボタン」と同様に設定できます
↑ 一覧へ戻る
Dawnテーマ設定: 入力
「入力」の設定はフォームなどの入力部分の見た目の設定ができる箇所です
上図は商品ページの数量を調整する箇所です
ボタンやバリエーションと同じ設定ができるのでサイトの見た目の統一ができますね
お問合せフォームも同じ箇所で設定が適用されます
↑ 一覧へ戻る
Dawnテーマ設定: 商品カード
「商品カード」はトップページなどで商品を一覧で表示する箇所に適用する設定です
一覧として表示されている商品に関わる要素を総称してカードと言っているようですが、それらの見た目の設定を行えます
大きな見た目の変化としてスタイル箇所の適用が2パターンから行え、「スタンダード」「カード」というものがあります。この2つで適用される「配色」の色が大きく変わることがポイントです
その他にも画像の余白やテキストを左寄せ・中央寄せ・右寄せから選べます
罫線や影の設定もこちらから行えるので、サイトデザインの再現性が広がりますね
↑ 一覧へ戻る
Dawnテーマ設定: コレクションカード
「コレクションカード」とはトップページなどで表示できるセクションで「コレクションリスト」で表示される見た目の調整ができます
前述した商品カードと同じくスタイルと画像周りの余白、テキスト調整、配色を設定できます
罫線と影の設定も可能です
↑ 一覧へ戻る
Dawnテーマ設定: ブログカード
「ブログカード」はトップページなどで表示できるセクションの「ブログ記事」の箇所の調整ができます
こちらも商品カードやコレクションカードと同じ設定が可能です
↑ 一覧へ戻る
Dawnテーマ設定: コンテンツコンテナー
「コンテンツコンテナー」はトップページなどで表示できるセクションの「マルチカラム」や「複数列」のテキスト箇所の調整ができます
次に説明する「メディア」とセットで調整を行うほうがバランスが取れると思います
↑ 一覧へ戻る
Dawnテーマ設定: メディア
「メディア」はトップページなどで表示できるセクションの「マルチカラム」や「複数列」の画像箇所の調整ができます
先程の「コンテンツコンテナー」とのセットで調整するのがおすすめです
↑ 一覧へ戻る
Dawnテーマ設定: ドロップダウンとポップアップ
上図のようにドロップダウンやポップアップの表示を調整できます
ドロップダウンはメニューやコレクションで絞り込む場合に出現します
ポップアップはカートに追加した際の挙動により変わりますが、テーマ設定の「カート」設定の箇所でカートタイプが「ポップアップ通知」のときの設定となります
↑ 一覧へ戻る
Dawnテーマ設定: ドロワー
「ドロワー」の設定はモバイル操作のときのメニューの表示やテーマ設定の「カート」設定の箇所でカートタイプが「ドロワー」となっている場合に適用されるスタイルです
↑ 一覧へ戻る
Dawnテーマ設定: バッジ
「バッジ」は商品が一覧で並ぶ場合に、割引対象の商品と在庫がゼロの商品に対して表示されるバッジの形状を設定できます
カードでの位置でバッジの配置を左下・右下・左上・右上から設定できます
角の半径でバッジの形を調整でき、「販売バッジ」（割引対象の商品へのセールなどの表示）の配色、「完売バッジ」（在庫がゼロの商品への売り切れなどの表示）の配色が決められます
↑ 一覧へ戻る
Dawnテーマ設定: ブランド情報
「ブランド情報」で店舗に関する内容を設定しておくことができます
ヘッドラインや説明の欄があるので所在地や営業情報なんかを入れておくことができます
画像や画像の大きさも設定できます
画像はロゴや実店舗がある場合のアクセスや地図表示なんかにも使えます
画像幅は最小50px〜最大550pxまで調整できます
この設定を表示するためには、フッター部分で「ブランド情報」というセクションを追加する必要があります
↑ 一覧へ戻る
Dawnテーマ設定: SNS
「SNS」では各ソーシャルメディアのURLの設定をすることができます
2024年時点で設定できるSNSのURLは9つです
- YouTube
- TikTok
- X / Twitter
- Snapchat
- Tumblr
- Vimeo
設定だけではサイト上に表示はされず、フッターなどの設定にSNSのアイコンを表示する箇所があるのでそちらにチェックを入れることで上図のようなアイコンとともに設定したURLに飛ぶことができます
↑ 一覧へ戻る
Dawnテーマ設定: 検索行動
「検索行動」は検索時の設定ができます
検索候補を有効にするにチェックが入った状態ではサイト内での予測検索が可能となります
その下の商品の販売元を表示する、商品価格を表示するは検索候補有効時にそれらに表示される情報となります
↑ 一覧へ戻る
Dawnテーマ設定: 通貨形式
「通貨形式」では通貨コードを表示するかどうかを決めることができます
こちらにチェックを入れているとJPYのような通貨コードが表示されます
これは設定 > ストアの詳細のページの「ストア通貨」の箇所に予め設定している内容が表示されます
↑ 一覧へ戻る
Dawnテーマ設定: カート
「カート」ではカート追加した際の見た目とカートコンテンツまたはカートページに表示する内容を設定できます
カートタイプでは商品をカートに追加したときに表示する挙動を指定します
ドロワー：画面右からカート画面が現れます
ページ：カートページに遷移します
ポップアップ表示：ページ上部からひょっこり現れます
カートメモを有効にするにチェックを入れることで備考欄を表示することができます
また、カートタイプでドロワーを有効にした場合にはコレクションを表示することもできますのでおすすめの商品コレクションを設定して離脱防止に使いましょう
↑ 一覧へ戻る
Dawnテーマ設定: チェックアウト
※古い情報※
1ページチェックアウトにアップデートする以前に設定することができた箇所です
アップデート後はこの設定は上部の切替部分※1で変更が可能です
「チェックアウト」では決済画面での表示設定ができます
チェックアウト画面は大きく3つのパーツで分けられそれぞれに設定が可能です
- バナー：上図のロゴ部分
- メイン：上図の右側
- 注文内容：上図の左側
バナー部分は背景とロゴの設定ができます
ロゴは位置やサイズ（大中小から選択）できます
メインエリア・注文内容は背景画像もしくは背景色の設定・入力フォームがある場合入力欄を白とするか透過にして背景色になじませるかの設定ができます
フォントの設定まで可能です
上図にある通りアクセント・ボタン・エラーのカラーを設定できます
※1：アップデート後のチェックアウト設定箇所
↑ 一覧へ戻る
Dawnテーマ設定: カスタムCSS
「カスタムCSS」ではサイト全体のCSSの設定をすることができます
Shopifyのカスタマイズではそれぞれのセクションに対して設定できる「カスタムCSS」という箇所が存在しますが、こちらはサイト全体に関わる共通の設定を入れ込むようにし運用する際に管理しやすいようにしていくことが理想です
↑ 一覧へ戻る
Dawnテーマ設定: テーマスタイル
「テーマスタイル」はテーマに依存します
無料テーマの場合は現状選べるスタイルは存在しません
有料テーマであればいくつかのスタイルからテーマのデザイン感を選ぶことができます（大まかに言うと初期設定されているフォントの種類・キーカラーが違います）
↑ 一覧へ戻る
最後に
いかがでしたでしょうか
無料テーマでもこれだけ多くのテーマ設定から成り立っています
設定が多く大変な印象がありますが、裏を返せばデザインできる幅が広がっているという見方もできます
今回はそれぞれの設定に対する大まかな機能の紹介だったため、今後それぞれにフォーカスして関係性がわかるような内容もまとめられたらと思います
Shopifyの基本的なカスタマイズの知識は以下の記事を参照ください
Dawnのセクションの設定については以下の記事を参照ください
コメント
参考になりました。
一点教えてください。
トップページの画像（船に乗って夕陽を眺めている）の変更方法を教えて下さい。
また、デフォルト文字 Browse our latest products の変更方法も教えてください。
どうぞよろしくお願いします。
コメントありがとうございます。
こちらは「テーマ設定」ではなく、「セクション」の設定で変更が可能です。
セクション箇所で「画像バナー」をクリックすると画像をアップロードできますのでそこから変更できます。
テキストやリンク先の設定もできます。
「セクション」でできることも近いうちにまとめるようにします。
モバイル表示での左右の余白をなくしたいのですが、設定にはありませんか？
残念ながらDawnのテーマで設定から両端の余白は調整はできません。
Shopifyの無料テーマは現在すべてに余白が存在していると思います。
調整したいセクション一つ一つにそのセクションに応じたCSSを書き余白を打ち消すことはできそうです。
もしくは有料テーマで余白調整をできるテーマを使用することが代替案となりそうです。