Shopify無料テーマ「Dawn」のカスタマイズ方法を画像付きで徹底解説！

Shopifyの無料テーマである「Dawn」は、豊富な機能やデザイン性のよさから人気のテーマです。しかし「機能が多すぎてカスタマイズ方法がわからない」とお悩みの方もいるのではないでしょうか。

今回の記事では「Dawn」の基本的なカスタマイズ方法である”テーマ設定”を徹底解説します。画像付きで網羅的に解説しますので、Dawnテーマでストアを構築する際の参考資料としてご利用ください。

Shopifyのテーマ選びに迷っている方は、Shopifyでおすすめのテーマを紹介しているこちらの記事をごらんください。

2024年5月28日【2025最新】おすすめShopifyテーマ無料8選・有料17選！選び方やポイントを徹底解説

Shopifyテーマの基本「テーマ設定」とは？

Shopifyテーマのカスタマイズ画面には「テーマ設定」という項目があります。テーマ設定とは、Shopifyストア全体に適用される設定のことです。テーマの管理画面左上の歯車マークをクリックすることで、テーマ設定の一覧を確認できます。

テーマ設定は設定項目数が多いため「この設定はストア内のどこに反映されているの？」という疑問が生じやすいですが、次項で詳しく解説します。

Shopify・ECサイトの集客・運用でお困りですか？

Shopify・ECサイトの集客・運用・制作まで、お困り事にプロ集団がご支援させていただきます。

Shopify・ECサイトの悩みを相談

Shopify Dawnのテーマ設定を徹底解説

Dawnのテーマ設定は、合計23項目あります(2024年6月時点)。すべて設定する必要がある方は少ないと思いますので「わからない部分だけ確認する」というように、辞書代わりに活用するのがおすすめです。

以下、画像付きで詳しく解説します。

Shopify Dawn「ロゴ」

「ロゴ」では、ストア左上に表示されるロゴ画像と、ファビコン画像を設定できます。ロゴとファビコンの表示位置は、下記画像を参照してください。

画像をアップロードするとプレビュー画面に表示されますので、プレビューを見ながら最適なサイズの画像を設定しましょう。

Shopify Dawn「色」

「色」はストア全体の色を設定する項目です。「スキーム」とは、細かい色の設定を保存できるフォルダのようなものです。色の組み合わせをスキームとして登録しておけば、各ページやパーツの設定時にスキームを選択するだけで簡単に適用できます。

スキームは最大21個作成できるため、よく使う色の設定は保存しておきましょう。

Shopify Dawn「タイポグラフィー」

「タイポグラフィー」では、ストア内のフォントに関する設定ができます。

フォントは複数用意されていますが、読み込み速度が速い下記3つのフォントが推奨されています。

ストアの読み込み速度は、離脱率を低減させるうえで重要です。特別な理由がない限り、上記3つのフォントを選択するとよいでしょう。

Shopify Dawn「レイアウト」

「レイアウト」では、ストア内におけるページの幅やセクション間のスペースなどを調整できます。「セクション」とは、Shopifyのテーマ内で使用されるレイアウトの構成要素(画像ギャラリー、商品コレクションなど)のことです。

具体的には、下記画像の赤枠や赤線スペースの調整が可能です。

無料テーマとは思えないほど細かく調整可能なので、プレビュー画面を見ながらストアを整えましょう。

Shopify Dawn「アニメーション」

「アニメーション」は、商品が表示されている部分である”カード”や、商品購入時の”ボタン”などにアニメーションを加えるための設定項目です。

「スクロールでセクションを表示する」という部分にチェックを入れると、フワッとしたアニメーションでカードやボタンを表示できます。ストア内の要素にさりげない動きがあると、より本格的な印象を与えられるため、設定しておくとよいでしょう。

Shopify Dawn「ボタン」

「ボタン」では、各ボタンの罫線の太さや不透過率、角の半径や影のカスタマイズができます。「ボタンが丸みを帯びているか四角いか」「影がついているかどうか」などで、ストアの印象がガラッと変わるため、ブランドイメージに合わせて調整してみましょう。

Shopify Dawn「バリエーションのピル型ボタン」

「バリエーションのピル型ボタン」では、商品ページ内のバリエーションボタン(色やサイズを選択する項目)をカスタマイズできます。ボタンと同様、罫線の太さや不透過率、角の半径や影の調整が可能です。

Shopify Dawn「入力」

「入力」では、お問い合わせフォームの入力要素やストア内の検索バーをカスタマイズできます。ボタンやバリエーションと同様の設定項目となっているので、統一しておくとよいでしょう。

Shopify Dawn「商品カード」

「商品カード」では、ストアのトップページに表示される商品カードを調整できます。商品カードのスタイルや画像の余白、配色や罫線の太さなど、かなり細かく設定可能です。

配色を変更する際は「色」の項目であらかじめ設定しておいたスキームを利用するとよいでしょう。

Shopify Dawn「コレクションカード」

「コレクションカード」では、コレクションリストのカスタマイズができます。コレクションリストとは、商品グループを作るためのセクションのことで「新製品」や「セール品」などをまとめて表示させ、目立たせる目的で使われることが多いです。

コレクションリストを追加する方法ですが、カスタマイズ画面の「セクション」から「テンプレート」の下にある「セクションを追加」というボタンをクリック。「コレクションリスト」という項目があるので、クリックするとストアに追加できます。

商品の整理や、特定のプロモーションを実施している際に活用するとよいでしょう。

Shopify Dawn「ブログカード」

「ブログカード」では、ブログ記事カードのカスタマイズができます。Shopifyでブログ記事を更新している方は、調整しておくとよいでしょう。

Shopify Dawn「コンテンツコンテナー」

「コンテンツコンテナー」では、マルチカラムのカスタマイズが可能です。「マルチカラム」とは、ページを複数のカラム（列）に分割することを指します。情報を視覚的に整理し、ユーザーがコンテンツをより簡単に見つけられるように使用されることが多いです。

マルチカラムは、セクションの管理画面を開いて「テンプレート」→「セクションを追加」から追加できます。

Shopify Dawn「メディア」

「メディア」では、ストア内の画像や動画に関するさまざまな設定をカスタマイズできます。

例えば、画像の比率を調整できたり、動画の自動再生やループ設定の調整ができたり、メディア(画像や動画)に関する細かい調整が可能です。

各メディアは商品を魅力的に演出するために重要な部分なので、細かく設定しておきましょう。

Shopify Dawn「ドロップダウンとポップアップ」

「ドロップダウンとポップアップ」では、ナビゲーションメニューやポップアップウィンドウの表示方法をカスタマイズできます。例えば下記画像のように、商品をカートに入れたときに表示されるポップアップメニューなどのカスタマイズが可能です。

Shopify Dawn「ドロワー」

「ドロワー」では、サイドバーの形で表示されるナビゲーションメニューや情報ウィンドウをカスタマイズできます。

例えば、モバイルデバイスでは左上のメニューアイコンをタップすると、画面の端からスライドする形でメニュー画面が表示されます。「ドロワー」では、スライドして表示されたメニュー画面のカスタマイズが可能です。

Shopify Dawn「バッジ」

「バッジ」では、ストア内のバッジのデザインや位置をカスタマイズできます。「バッジ」とは、下記画像のように「セール」や「売り切れ」の状態を強調するときに使用され、ストア内のさまざまなページに表示されています。

位置や色などで印象がガラッと変わるため、細かく設定しておきましょう。

Shopify Dawn「ブランド情報」

「ブランド情報」では、フッターメニューに表示される”ブランド情報”をカスタマイズできます。ブランド情報をストアに追加するには、セクションメニューの「フッター」から「ブロックを追加」をクリックすると表示されます。

ブランドロゴ画像やブランドストーリーなどをフッターに追加することで、ブランドイメージを向上させやすいでしょう。

Shopify Dawn「SNS」

「SNS」では、各SNSのURLを設定することで、運営するSNSアカウントに遷移するボタンを設置できます。

対応しているSNSは下記のとおりです。

自社ブランドのSNSを運営している事業者は、必ず設定しておきましょう。

Shopify Dawn「検索行動」

「検索行動」では、ユーザーがサイト内で効率的に検索を行えるように、検索機能とオプションをカスタマイズ可能です。

上記画像のように、デフォルトでは「検索候補を有効にする」にチェックが入っています。ここにチェックが入っていると、ストア内で検索をする際、検索候補が表示されます。

検索候補が表示されるとユーザーの利便性は向上しやすいため、特別な理由がない限り、チェックは入れたままにしておくとよいでしょう。

Shopify Dawn「通過形式」

「通過形式」では、通貨コード表示の有無を設定できます。日本円だと値段の横に「JPY」と表示されますが、JPY表示が不要であればチェックを外しておくとよいでしょう。

Shopify Dawn「カート」

「カート」では、商品をカートに追加したときのカートの表示スタイルを設カスタマイズできます。カートの表示スタイルは、下記のとおりです。

カートの表示スタイルは成約率にも影響する部分です。プレビュー画面で確認しながら、自社ブランドに適したスタイルを設定しましょう。

Shopify Dawn「カスタムCSS」

「カスタムCSS」設定は、ストアのデザインをさらにカスタマイズしたい方向けの機能です。カスタムCSSを使用することで、Dawnの設定項目ではできなかった細部をカスタマイズできます。

ただし、CSSコードの入力には専門知識が必要です。不適切なコードを入力することで、ストア全体に悪影響を及ぼす可能性もあるため、知識がない方は触らないほうがよいでしょう。

Shopify Dawn「テーマスタイル」

「テーマスタイル」では、ストア内のコンテンツ情報を維持したままテーマスタイルを一括変更できます。ただ、Dawnで選択できるテーマスタイルは「Default」しかなく、Dawnでカスタマイズした一部の設定は失われてしまいます。

「Dawnでカスタマイズをしてみたものの、Defaultのデザインも見てみたい」などという場合に、テーマスタイルの変更を試してみてもよいでしょう。

Dawnのテーマ設定をマスターしよう！

今回の記事では「Dawn」のテーマ設定を徹底解説しました。

Dawnは無料であるにも関わらず、細部までデザインを変更できる便利なテーマです。もしもテーマ設定でわからない点があれば、今回の記事を見返してみてください。

Shopifyストアのテーマ選びに悩んでいる方は、おすすめの有料・無料テーマを紹介している下記の記事もごらんください。

2023年9月18日2025年最新版｜Shopify無料テーマのおすすめや特徴を紹介

2023年9月29日【2025年最新】Shopify有料テーマおすすめ6選！選び方を解説

スライドショー アプリを見る

株式会社プレイビット

Shopifyを活用したECサイトの構築・運用の支援サービスを提供しています。
Shopifyの制作・運用に特化したプロ集団が、トータルサポートさせていただきます。ご相談等ございましたら、下記フォームよりお気軽にお問い合わせください。

Shopify制作のご相談

Shopify制作・運用に関するご相談等は、こちらからお気軽にご連絡ください。新規構築から、システム移行まで幅広く対応しております。