Shopifyのテーマカスタマイズ入門 — コード不要でデザインを変更する方法
Shopifyのテーマカスタマイズは、 管理画面のテーマエディターだけで8割方は完結します 。色もフォントもセクションの並びも、コードを書かずに変更できる設計になっていて、失敗しても元に戻す手段まで用意されています。ここでは、初めて触る方が迷いやすい6つの疑問に、ひとつずつ答えていきます。
この記事はShopifyアプリ開発の過程で、ストアオーナーの方から繰り返し受けてきた相談をベースにまとめました。2026年4月時点のDawnテーマを想定していますが、Online Store 2.0対応の公式テーマであればおおむね同じ流れで進められます。
このページでわかること
- テーマエディター
Shopify管理画面から開けるノーコードのビジュアル編集ツールです。左パネルでセクションやブロックを追加・編集し、右側のプレビューでリアルタイムに結果が確認できます。詳しくは Shopifyヘルプ — テーマエディター をご覧ください。
Q1. テーマエディターはどこから開ける？
「カスタマイズを始めよう」と思ったときに、まず迷うのが入口です。結論から言うと 3クリックで到達 できます。
- 1
Shopify管理画面にログイン
ブラウザで Shopify管理画面 にアクセスしてログインします。ストアが複数ある場合は、対象のストアを選択してください。
- 2
「オンラインストア → テーマ」を開く
左サイドバーの 販売チャネル から オンラインストア を展開し、 テーマ をクリックします。公開中のテーマが「現在のテーマ」として一番上に表示されます。
- 3
「カスタマイズ」ボタンを押す
現在のテーマの右側にある カスタマイズ ボタンをクリックすると、テーマエディターが起動します。左パネルにセクション一覧、右側にストアのプレビューが出れば成功です。
テーマエディターでの変更は 「保存」ボタンを押すまで公開されません 。心ゆくまで試して、気に入らなければ保存せずに閉じれば元の状態のままです。
Q2. 「セクション」と「ブロック」は何が違う？
テーマエディターの左パネルを見て、最初に詰まる言葉がこの2つです。 セクションは「棚」、ブロックは「棚の中の商品」 と覚えるのが一番早いです。
この違いがわかると、「ボタンの文言を変えたいだけなのに、セクションを丸ごと削除してしまった」といった事故が減ります。編集したい対象が セクションなのか、その中のブロックなのか を最初に見極めるクセをつけると、作業が一気に速くなります。
セクションを追加したいときは左パネルの 「セクションを追加」 から、並べ替えたいときは ⋮⋮ のドラッグハンドルをつかんで上下に動かします。プレビューに即反映されるので、完成形を見ながら調整できます。
Q3. 色とフォントはどう変える？
ストアの印象を一番手軽に変えられるのが、ここです。テーマエディター左下の 歯車アイコン（テーマ設定） から、色とタイポグラフィを一括で調整できます。
テーマ設定の 「色」 では、以下をまとめて変更できます。
- 背景色（ベース背景、セクションごとの背景）
- テキストの色（見出し・本文・リンク）
- ボタンの色（プライマリ・セカンダリ）
- アクセントカラー（セール表示・バッジなど）
- カラースキームの作成（配色セットをセクションごとに切替）
カラースキームは、配色のセットを複数作っておいて セクションごとに切り替えられる仕組み です。たとえば「ヘッダーは白背景に濃紺テキスト」「フッターは濃紺背景に白テキスト」のように、統一感を保ったままメリハリをつけられます。わたしが受託で触るときも、ブランドカラー+中間色+反転色の3パターンをまず作り、セクションごとに割り当てるやり方が一番きれいに収まります。
フォントは同じテーマ設定の 「タイポグラフィ」 から、見出し用と本文用を個別に選べます。ただし、ここに日本語ユーザーが気をつけるべき落とし穴があります。
Shopifyのテーマ設定で選べるフォントの大半は 英語圏のフォント です。日本語部分はブラウザの既定フォント（ゴシック体・明朝体）で表示されるケースが多く、英字では美しく見えた組み合わせが日本語では崩れて見えることがあります。日本語の見え方を必ずプレビューで確認してください。日本語Webフォントを細かく指定したい場合は、CSS編集かフォントアプリの導入が必要になります。
Q4. ヘッダー・フッターで最初に整えるべきポイントは？
ヘッダーとフッターは 全ページに共通で表示される ので、どのカスタマイズよりも先に整えるとストア全体の印象がまとまります。優先順位はこの順番で十分です。
- 01
ロゴ画像をアップロードする
テーマ設定または「ヘッダー」セクションから、ロゴ画像を差し込みます。透過PNGまたはSVGで、横幅200〜400pxを目安に。ロゴが暗い色なら明るい背景、明るい色なら暗い背景のカラースキームに載せると視認性が上がります。
- 02
メニュー（ナビゲーション）を選ぶ
ヘッダーに出すメニューを指定します。メニュー自体の中身は オンラインストア → メニュー で作成したものから選ぶ形です。トップ階層は4〜6項目に抑えると、モバイルでの視認性が落ちにくくなります。Shopifyヘルプ — メニューとナビゲーション
- 03
お知らせバーを設定する
ヘッダー上部に「送料無料キャンペーン」「ブラックフライデー開催中」といったお知らせを表示できるテーマがほとんどです。常設しないお知らせは、設定画面でこまめに書き換える前提で運用しましょう。
- 04
フッターに法定ページのリンクを必ず入れる
特定商取引法に基づく表記・プライバシーポリシー・利用規約・返品ポリシーは、日本のECでは フッターに固定で置く のが定石です。フッターメニューを作って、そこにリンクをまとめる形が一般的です。
- 05
SNS・ニュースレター登録を追加する
フッターの ソーシャルメディアアイコン は、テーマ設定側でアカウントURLを入力すると自動で表示されます。ニュースレター登録フォームも、フッターに置くのが定番です。
法定ページの整備が終わっていない方は、先にページ側を作ってからフッターでリンクを張るほうがスムーズです。Shopifyヘルプ — ストアポリシー に、テンプレートの自動生成機能が用意されています。
Q5. モバイルでおかしくなったらどうする？
日本のECはスマホ経由のアクセスが圧倒的に多く、 モバイルでの見え方を整えない限りカスタマイズは完了しません 。PCで作り込んでモバイルで崩れるのは、よくある失敗パターンです。
テーマエディター右上の スマホアイコン をクリックすると、モバイル表示に切り替わります。切り替えたら、以下を上から順にチェックしてみてください。
- 画像バナーに重ねた文字が小さすぎないか（最低でも16px相当）
- ボタンがタップしやすいサイズか（最低44px四方が目安）
- セクション間の余白が詰まりすぎて窮屈になっていないか
- ハンバーガーメニューが開閉するか、中身が読める階層か
- 商品画像が縦長になって商品全体が見切れていないか
- フッターの法定ページリンクが指で押しやすい間隔か
PCでは映えていた大きな画像バナーも、モバイルだと画像に載せたキャッチコピーが潰れて読めなくなっていることがあります。文字が画像に載っているタイプのバナーは、 モバイル用に別画像を指定できるセクション を使うか、文字をHTMLオーバーレイで乗せる方式を選ぶほうが安全です。
実機での確認もおすすめです。プレビューURLを自分のスマホで開くと、エディターのモバイル表示よりさらにリアルな見え方がわかります。
Q6. 失敗したら元に戻せる？
答えは「ほぼ全部戻せます」 。保存前と保存後で手順が違うだけなので、状況別にまとめます。
テーマエディターの画面内で 「元に戻す」ボタン（左上の矢印アイコン） を押すか、保存せずにブラウザを閉じれば、変更前の状態に戻ります。Ctrl/Cmd + Z のアンドゥも有効です。保存していない変更は公開されていないので、焦らなくて大丈夫です。
Shopifyには テーマの自動バージョン履歴 が用意されており、過去の状態にロールバックできます。テーマ一覧画面で対象テーマの「アクション → バージョン履歴」から、戻したい時点を選んで復元します。詳しくは Shopifyヘルプ — テーマのバージョン履歴 を参照してください。
テーマ一覧画面で 「アクション → 複製」 を選ぶと、現在のテーマの複製が作れます。大胆なカスタマイズは複製したテーマに対して行い、完成してから公開用テーマに差し替えるのが安全な進め方です。ライブラリは無料テーマなら何個でも保持できます。
テーマごとにセクション構成と設定値は独立しているため、 別テーマに切り替えるとカスタマイズは引き継がれません 。ただし前のテーマはライブラリに残っているので、切り替え元に戻せばカスタマイズはそのまま復活します。移行前に複製を取っておくと精神的にも楽です。
管理画面の 「アクション → コードを編集」 で変更した内容も、先ほどのバージョン履歴から巻き戻せます。無料テーマであれば、最悪の場合は同じテーマを 「テーマストア」から再インストール することで初期状態に戻せるのも心強いポイントです。
「元に戻せる手段が複数ある」と知っているだけで、思い切って触れる範囲が広がります。わたしも最初はこのセーフティネットを知らずに、毎回ヒヤヒヤしながら触っていました。
まだ迷っている方へ
Shopifyのテーマカスタマイズは、一度に全部変えようとすると挫折します。 「色だけ」「ヘッダーだけ」「モバイルの余白だけ」 というふうに、一回の編集で触る範囲を小さく区切って、保存→確認→次、を繰り返すのが結局は一番早道です。
最初の一歩として今日やるなら、 (1) テーマを複製してバックアップ → (2) カラースキームを1セット作成 → (3) ヘッダーのロゴとメニューを設定 → (4) モバイル表示を確認 、の4ステップがおすすめです。ここまでで30分くらい、ストアの印象が目に見えて変わります。
テーマ選びがまだの方は、日本語ストアで使いやすいテーマをまとめた記事も参考にしてください。
カスタマイズが一段落したら、次は表示速度の最適化にも目を向けてみてください。
これからShopifyを始める方は、開設から販売までの流れをまとめたガイドもどうぞ。
この記事を読んだ方におすすめ
Shopify予約アプリ
まるっと予約
ストアに予約機能を追加。日時・デポジット・キャンセルに対応。
💡 無料プランあり（月5件まで）
他のまるっとシリーズもチェック
Shopifyストア構築もお任せください
「自分でShopifyを設定するのは不安」という方に、アプリ開発者本人がShopifyストア構築＋まるっと予約の導入をまるごとサポートいたします。
