Shopify Theme Customization Guide - Change Your Store Design Without Code
Shopifyでストアを開設して、テーマを選んだ。でも「もうちょっとここの色を変えたい」「ロゴの位置を調整したい」「セクションの順番を入れ替えたい」と思ったとき、どこから手をつければいいか迷いませんか。
わたし自身、初めてShopifyのテーマエディターを開いたときは「設定項目が多すぎて何から触ればいいのかわからない」と感じました。
でも実際に触ってみると、コードを一切書かなくても結構自由度が高く、デザインを変えられることに気づきました。
大きな変更や、微調整はやはりコードの知識が必要になってきますが、それなりの変更ならできるものも多そうです。
この記事では、Shopifyの テーマエディター を使ってコード不要でできるカスタマイズを、基本から順番に解説していきます。初めてテーマをいじる方でも迷わないように、わたしの実体験を交えながらまとめました。
まずは全体の流れをつかんでおきましょう。
- テーマエディターとは？
Shopify管理画面から開けるビジュアル編集ツールです。左側のパネルでセクションやブロックを追加・編集し、右側のプレビューでリアルタイムに変更を確認できます。コードを書かずにドラッグ&ドロップでページレイアウトを組み替えられるのが特徴です。
テーマエディターを開く方法
まずはテーマエディターへのアクセス方法から。
- 1
Shopify管理画面にログイン
ブラウザで Shopify管理画面 にアクセスしてログインします。 - 2
「オンラインストア」→「テーマ」を選択
左側メニューの 販売チャネル から オンラインストア → テーマ をクリックします。 - 3
「カスタマイズ」ボタンをクリック
現在のテーマの横にある 「カスタマイズ」 ボタンを押すと、テーマエディターが開きます。
テーマエディターが開くと、左側にセクションやブロックの一覧、右側にストアのプレビューが表示されます。ここがカスタマイズの作業場です。
テーマエディターで行った変更は、 「保存」 ボタンを押すまで公開されません。安心していろいろ試してみてください。気に入らなければ保存せずに閉じれば元に戻ります。
セクションとブロックを理解する
テーマカスタマイズで最初に押さえておきたいのが 「セクション」 と 「ブロック」 の概念です。この2つがわかると、テーマエディターの操作がぐっとスムーズになります。
イメージとしては、セクションが「棚」で、ブロックが棚の中に並べる「商品」のようなものです。棚ごと入れ替えることも、棚の中の商品を並べ替えることもできます。
セクションの追加・並べ替え
テーマエディターの左パネルで 「セクションを追加」 をクリックすると、利用可能なセクションの一覧が表示されます。追加したいセクションを選ぶだけでページに組み込まれます。
セクションの順番を変えたいときは、左パネルでセクション名の横にある ⋮⋮（ドラッグハンドル） をつかんで上下に移動させるだけ。プレビューにリアルタイムで反映されるので、完成イメージを確認しながら調整できます。
Online Store 2.0対応テーマ（Dawn、Taste、Senseなど現行の公式テーマはすべて対応）では、トップページだけでなく 商品ページやコレクションページなど、あらゆるページ でセクションの追加・並べ替えができます。
出典：Shopify Help Center — Sections and blocks
色とフォントを変更する
ストア全体の雰囲気をガラッと変える最も手軽な方法が、 テーマ設定 での色とフォントの変更です。
色の変更
テーマエディター左下の 歯車アイコン（テーマ設定） をクリックし、 「色」 を選択します。ここでストア全体のカラースキームを一括で変更できます。
- 背景色（メインの背景、セクションごとの背景）
- テキストの色（見出し、本文、リンク）
- ボタンの色（プライマリボタン、セカンダリボタン）
- アクセントカラー（セール表示、バッジなど）
カラースキーム
配色のセットを複数作っておき、セクションごとに切り替える仕組み。統一感を保ちながらメリハリのあるデザインを実現できます。
多くのテーマでは 「カラースキーム」 という仕組みが用意されていて、あらかじめ配色のセットを複数作っておき、セクションごとに切り替えることができます。たとえば「ヘッダーは白背景に濃紺テキスト」「フッターは濃紺背景に白テキスト」のように、セクションごとに雰囲気を変えられます。
フォントの変更
同じくテーマ設定の 「タイポグラフィ」 から、見出しと本文のフォントを変更できます。
Shopifyのテーマエディターで選べるフォントは英語フォントが中心です。日本語部分はブラウザのデフォルトフォント（ゴシック体・明朝体）で表示されることが多いため、プレビューで必ず 日本語テキストの見え方 を確認してください。日本語フォントを細かく指定したい場合は、CSSの編集やフォントアプリの導入が必要になります。
出典：Shopify Help Center — Customizing Theme Settings
ヘッダーとフッターをカスタマイズする
ヘッダーとフッターはすべてのページに共通で表示される要素なので、ストアの印象を大きく左右します。
ヘッダーの設定
テーマエディターの左パネルで 「ヘッダー」 セクションをクリックすると、以下の項目を設定できます。
- 01
ロゴ画像
ストアのロゴ画像をアップロードして表示できます。推奨サイズはテーマによって異なりますが、横幅200〜400pxで透過PNGがきれいに表示されます。 - 02
メニュー（ナビゲーション）
表示するメニューを選択します。メニューの内容は オンラインストア → メニュー で事前に作成しておきます。 - 03
お知らせバー
ヘッダー上部に「送料無料キャンペーン中」「新商品入荷」などのお知らせを表示できるテーマが多いです。
フッターの設定
フッターにはストアの基本情報やリンクをまとめるのが一般的です。
- 会社情報・ストア概要のテキスト
- メニューリンク（特定商取引法、プライバシーポリシーなど）
- SNSアイコン（テーマ設定のソーシャルメディアで連携先を入力）
- メール購読フォーム（ニュースレター登録）
特定商取引法に基づく表記やプライバシーポリシーのページへのリンクは、フッターに必ず入れておきましょう。日本のECサイトでは法律上の義務であると同時に、お客さまの安心感にもつながります。
よく使うセクションの活用例
テーマにはたくさんのセクションが用意されていますが、特によく使うものをいくつか紹介します。
わたしがストアのトップページを組むときは、だいたいこんな順番にしています。
- 画像バナー（キャンペーンや世界観の訴求）
- 特集コレクション（人気商品をすぐ見せる）
- テキスト付き画像（ブランドストーリー）
- お客様の声（信頼感の醸成）
- ニュースレター登録（リピーターづくり）
もちろんこれはあくまで一例です。扱う商品やターゲットによって最適な構成は変わるので、セクションを入れ替えながらしっくりくる並びを探してみてください。
モバイル表示を確認する
日本のECサイトではスマホからのアクセスが7割を超えるとも言われています。カスタマイズしたら必ず モバイル表示の確認 をしましょう。
テーマエディターの右上にある スマホアイコン をクリックすると、モバイルプレビューに切り替わります。
- 画像バナーのテキストがスマホで読みやすいか
- ボタンがタップしやすいサイズになっているか
- セクション間の余白が詰まりすぎていないか
- メニュー（ハンバーガーメニュー）が正常に動作するか
- 商品画像が適切なサイズで表示されているか
PC表示では見栄えがよくても、スマホではテキストが小さすぎたりボタンが押しにくかったりすることがあります。特に画像バナーに文字を重ねている場合、モバイルでは文字が読めなくなっていないか注意してください。
カスタマイズで迷ったときのコツ
最後に、テーマカスタマイズで迷ったときに役立つ考え方をいくつか共有します。
テーマの複製（バックアップ）は、 テーマ一覧画面 で「アクション → 複製」から作れます。大きな変更をする前には必ず複製を取っておくと安心です。
出典：Shopify Help Center — Customizing Sections in the theme editor
まとめ
Shopifyのテーマエディターは、コードを書かなくてもかなり自由にストアのデザインを調整できる強力なツールです。
- テーマエディターは「オンラインストア → テーマ → カスタマイズ」から開く
- ページは「セクション」と「ブロック」の2層構造で成り立っている
- 色・フォントはテーマ設定で一括変更できる
- ヘッダー・フッターは全ページ共通なので最初に整える
- カスタマイズ後はモバイル表示を必ず確認する
- 変更前にはテーマを複製してバックアップを取る
最初は設定項目の多さに圧倒されるかもしれませんが、触っていくうちに「ここを変えるとこう変わるんだ」という感覚がつかめてきます。まずは色の変更やセクションの並べ替えなど、かんたんなところから始めてみてください。
テーマ選びがまだの方は、日本語ストアに合うテーマをまとめた記事も参考にどうぞ。
ストアの表示速度が気になる方は、こちらの記事で改善方法をまとめています。
これからShopifyを始める方は、開設から販売までの流れをまとめたガイドもどうぞ。
よくある質問
いいえ、テーマエディターで変更した内容は 「保存」ボタンを押すまで公開されません。 保存前であればいくらでもやり直せるので、安心して試してみてください。
日本語Webフォントの指定、テーマにないレイアウトの作成、独自のアニメーション追加などはコード編集が必要です。ただし、多くのストアでは テーマエディターだけで十分なカスタマイズが可能 です。まずはノーコードでできる範囲を試してから、必要に応じてコード編集を検討するのがおすすめです。
テーマを切り替えると、前のテーマに設定したセクション構成やテーマ設定は引き継がれません。ただし、前のテーマはライブラリに残るので いつでも戻すことができます。 新しいテーマに切り替える前にテーマを複製しておくと安心です。
Shopify公式の無料テーマ（Dawn、Taste、Senseなど）はOnline Store 2.0に対応しており、セクションの追加・並べ替え、色・フォント変更、ヘッダー・フッター編集などひと通りのカスタマイズが可能です。まずは 無料テーマで始めて、物足りなくなったら有料テーマを検討 する流れが無駄がありません。
保存前なら、ブラウザをリロードすれば変更前の状態に戻ります。保存後に戻したい場合は、テーマの 複製（バックアップ） を使って以前の状態に復元できます。大きな変更をする前には、テーマの複製を取る習慣をつけておくと安心です。
Shopify予約アプリ
まるっと予約
無料プランあり・日本語サポート
Shopifyストア構築もお任せください！
「自分でShopifyを設定するのは不安」という方に、アプリ開発者本人がShopifyストア構築＋まるっと予約の導入をまるごとサポートいたします。
