ノーコードでできるShopifyテーマカスタマイズ｜エディタ操作の全手順

「コードを一行も書かずに、ストアの見た目はどこまで変えられるのか」。テーマエディタを開いてはみたものの、どこを触れば何が変わるのかわからない。お客様の画面が崩れるのが怖くて、保存ボタンを押せないまま閉じてしまう。Shopifyを使い始めたばかりの時期には、よくある光景です。

セクションの配置、色とフォント、文字や画像の差し替えまでは、テーマエディタだけで完結します。コードの知識は不要です。

作業の流れは「複製→全体設定→ページ編集→確認・公開」の4段階です。この順番なら、作業中はお客様が見ている画面に一切触れず、仕上がりを確かめてから切り替えられます。

---

1.ノーコードで変えられるのは、配置と見た目まで

テーマエディタを開くと、左側に設定項目がずらりと並びます。スマホで見たときだけ見出しを小さくしたい、商品画像の横にもう1つ説明の枠を並べたい。やりたいことははっきりしているのに、どの項目を開いても見つからない。

その設定は、もともとエディタに用意されていない可能性があります。ノーコードで変えられる範囲には、はっきりとした境目があるからです。

テーマエディタで変えられること

テーマエディタで変えられるのは、「セクション」「ブロック」「テーマ設定」の3つです。この3つを押さえておけば、変えたい箇所をどこから開けばいいかがすぐにわかります。

セクションは、ページを上から下へ区切っている大きな部品です。トップページなら、いちばん上の大きなメイン画像、その下のおすすめ商品の一覧、さらに下のお知らせ欄。これらが1つずつのセクションで、追加・並べ替え・非表示・削除ができます※1。

ブロックは、セクションの中に入っている文字や画像、ボタンのことです。メイン画像のセクションなら、画像の上に載っている見出しやボタンがブロックにあたります。見出しの文言を書き換える、ボタンをもう1つ足すといった細かな編集は、ブロック単位で行います※2。

テーマ設定は、ストア全体に反映される設定です。色、フォント、レイアウトなど、全ページに共通する見た目をまとめて管理します※1。

やりたいことを3つの単位に当てはめると、開く場所は次のように分かれます。

アプリの埋め込みやアプリブロックも、同じ画面で扱えます。たとえば、レビューアプリの星評価を商品ページのどこに出すかといった配置も、エディタ上で決められます※2。

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/features-overview
※2 https://help.shopify.com/ja/manual/online-store/themes/theme-structure/sections-and-blocks

ノーコードでは変えられないこと

カートから購入手続きに進んだ先の、住所やカード番号を入力する決済手続き（チェックアウト）の画面は、テーマエディタをどれだけ探しても出てきません。この画面はテーマの外にあり、ロゴや色は管理画面の「設定」→「チェックアウト」から開く専用のエディタで調整します※1。

もう1つは、テーマが用意した選択肢を超える見た目の変更です。ボタンの形や影を、選択肢にないデザインにしたい。特定の見出しだけ、ほかと違う文字の装飾にしたい。こうした変更にはカスタムCSSやテーマのコード編集が必要になります※2。

変えたい箇所のセクションやブロックをサイドバーで開き、設定の中に該当する項目がなければ、そのテーマではノーコードで変えられない変更です。

※1 https://help.shopify.com/ja/manual/checkout-settings/customize-checkout-configurations
※2 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/theme-settings

自分のテーマで、この手順が使えるかを確かめる

自分のテーマで本記事の手順が使えるかどうかは、商品ページに「セクションを追加」ボタンが出るかでわかります。ボタンが表示されれば、この先の手順はそのまま使えます※1。

1. 管理画面で「オンラインストア」→「テーマ」を開く
2. 確認したいテーマの「テーマを編集」をクリックする
3. メニューバー中央のページ切り替えで、「商品」→「デフォルトの商品」を選ぶ
4. サイドバーで、セクション一覧の下に「セクションを追加」があるかを確かめる

わざわざ商品ページで調べるのは、トップページだけなら古い形式のテーマでもセクションを追加できるものがあるからです。すべてのページでセクションを扱えるかどうかは、商品ページを開いてはじめて見分けられます※1。

ボタンが出てこない場合は、「ビンテージテーマ」と呼ばれる古い形式のテーマの可能性があり、本記事の手順は使えません※1。

テーマの選び方や切り替え方は「Shopifyテーマ完全ガイド」で扱っています。

ボタンが表示された場合でも、項目の名前や並び方はテーマによって異なります。本記事の表記と違うときは、近い名前の項目を探してください。

※1 https://help.shopify.com/ja/manual/online-store/themes/managing-themes/versions

---

2.まずテーマを複製し、エディタ画面の構成を知る

テーマエディタで最初に開くのは、複製したテーマです。準備そのものは短い操作ですが、ここを飛ばすと、失敗したときに戻れる場所がなくなります。

テーマを複製してエディタを開く

公開中のテーマは、保存した瞬間にお客様の画面へ反映されます。複製したテーマなら、何度保存してもお客様の画面は変わりません※1。編集は、必ず複製したテーマで行います。

1. 管理画面で「オンラインストア」→「テーマ」を開く
2. 公開中のテーマの「…」ボタンをクリックする
3. 「複製」を選ぶ
4. 下書きテーマの一覧に追加された「Copy Of（元のテーマ名）」の「…」ボタンをクリックする
5. 名前の変更を選ぶ
6. 作業内容がわかる名前を入力する
7. 名前を付け直したテーマの「テーマを編集」をクリックする

名前を付け直すのは、複製を重ねると「Copy Of」で始まるテーマがいくつも並び、どれが何の作業用なのかわからなくなるからです。「〇月リニューアル作業用」のように付けておけば、公開するときや元に戻すときに取り違えずに済みます。

作業の途中で大きく作り変えるときは、複製したテーマをさらに同じ手順で複製し、その時点の状態を残します。保存したあとで失敗に気づいても、その複製から作業を再開できます。

※1 https://help.shopify.com/ja/manual/online-store/themes/managing-themes/duplicating-themes

エディタ画面の3つのエリアと、それぞれでできること

エディタ画面は、上のメニューバー、左のサイドバー、右のプレビューの3つに分かれます。サイドバーで編集する場所を選び、プレビューで仕上がりを見て、メニューバーで保存する。この往復が基本の動きです。

プレビュー上をクリックして、その場所の設定を開くこともできます。この操作は「プレビューインスペクター」という機能がオンのときに使えるもので、メニューバー右側でオンとオフを切り替えます※1。クリックしても設定が開かない場合は、オンに切り替えてください。

ブラウザの幅が1600ピクセル以上あると、サイドバーが左右2つのパネルに分かれ、左に画面構成、右に選んだ項目の設定が並びます※1。解説と画面の見た目が違っても、ウィンドウの幅による表示の違いなので心配はいりません。

プレビューに変更が映っていても、「保存」を押すまで変更は確定しません。区切りのいいところで、こまめに保存を押してください。

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/features-overview

---

3.色とフォントは、テーマ設定でまとめて変える

「ボタンの色を変えたいのに、どのページを開いても色の設定が見つからない」。エディタを触り始めたころに、つまずきやすいポイントです。探していた場所が、そもそも違います。

テーマ設定を開いて目的の項目を見つける

色はテーマ設定の中の「色」（「カラー」と表示される場合もあります）、フォントは「タイポグラフィ」という項目にあります。

1. 複製したテーマの「テーマを編集」でエディタを開く
2. メニューバー左側の「テーマ設定」アイコンをクリックする
3. サイドバーに並んだ項目から、「色」または「タイポグラフィ」を開く

この2つは、ページの編集より先に済ませておきます。テーマ設定の変更は、ストアの全ページに反映されるからです※1。先にページごとの文字や画像を整えてから色を変えると、写真と文字色の組み合わせを全ページで見直すことになります。

サイドバーには、レイアウト、SNS、カートなど、ほかの項目も並びます※1。本記事で扱うのは色とフォントの2つだけです。

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/theme-settings

色｜配色かカラーパレットかで手順が分かれる

「色」を開いて「配色」の欄があれば配色方式、「＋」から色を登録する欄があればカラーパレット方式です※1。どちらでもなく、ボタン・背景・文字などの色の項目が1つずつ並んでいる場合は、項目ごとに色を選んで保存します。

配色は、背景、テキスト、ボタンなどの色をひとまとめにしたグループです。1つの配色を直せば、その配色を割り当てたセクションの色がまとめて変わります※1。

1. テーマ設定の「色」を開く
2. 「配色」の欄で、既存の配色をクリックするか、「配色を追加」をクリックする
3. 変えたい項目（背景、テキスト、ボタンなど）のカラー見本をクリックする
4. カラーコードを入力するか、カラーピッカーで色を選ぶ
5. 「保存」をクリックする

作った配色は、各セクションの設定にある「配色」の項目から選んで割り当てます※1。 

カラーパレットは、ブランドの色をあらかじめ登録しておき、セクションやブロックの色の欄で選んで使う方式です。パレットの色を変えると、その色を使っている設定がすべて新しい色に切り替わります※1。

1. テーマ設定の「色」を開く
2. 「＋」をクリックする
3. パレットに加える色を選ぶ
4. 「保存」をクリックする

登録した色は、各セクションやブロックの色の欄で選びます。その場でパレット以外の色を指定して上書きすることもできます※1。

どの方式でも、ボタン、背景、文字に使う色のカラーコード（「#」から始まる6桁の英数字）を手元に控えておくと、入力がすぐに終わります。

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/theme-settings

フォント｜見出しと本文を別々に選ぶ

フォントは、テーマ設定の「タイポグラフィ」で、見出しと本文をそれぞれ選びます。選んだフォントは、全ページの見出しと本文にまとめて反映されます※1。

選ぶ前に知っておきたいのが、日本語の表示です。一覧に並ぶのはShopifyのフォントライブラリの書体で※1、フォントの設定には、代わりに使う書体の指定も含まれています※2。英字用のフォントを選んだ場合、日本語の部分はお客様の端末の標準の書体で表示されます。英字と日本語で書体が分かれるため、並べたときの印象がそろわないことがあります。

1. テーマ設定の「タイポグラフィ」を開く
2. 「見出し」または「本文」の欄で「変更」をクリックする
3. 使いたいフォントの名前をクリックする
4. 「選択」をクリックする
5. 「保存」をクリックする

フォントを決めたら、パソコンとスマホの両方で商品説明を1つ表示し、英数字と日本語の並びに違和感がないかを見比べます。標準の書体はパソコンやスマホの種類によって違うため、端末ごとに見え方が変わります※1。

日本語に使える書体の選び方は「Shopifyの日本語テーマ完全ガイド」で解説しています。

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/theme-settings
※2 https://shopify.dev/docs/api/liquid/objects/font

---

4.セクションとブロックで、ページの構成と文字・画像を編集する

ある商品の説明の下に、よくある質問のセクションを足した。保存して別の商品のページを開くと、そこにも同じ質問が並んでいた。エディタで起きやすい「思ったより広く変わった」の典型です。

商品ページのページ構成は、商品1つずつではなく、「デフォルトの商品」というテンプレートにひも付いています。テンプレートを編集すると、そのテンプレートを使うすべてのページに変更が反映されます※1。ヘッダーとフッターは、さらに広く全ページで共通の部品です※2。どのページ（テンプレート）を編集するかは、メニューバー中央の切り替えで選びます。特定の商品だけ別のデザインにするテンプレートの作成は、本記事では扱いません。

※1 https://help.shopify.com/ja/manual/online-store/themes/theme-structure/templates
※2 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/using-the-theme-editor

セクションとブロックを追加する

セクションはサイドバーの「セクションを追加」から、ブロックは追加したいセクションの「ブロックを追加」から足します※1。

1. メニューバー中央の切り替えで、編集するページ（トップページ、商品ページなど）を選ぶ
2. サイドバーの「セクションを追加」をクリックする
3. 一覧から追加したいセクションを選ぶ（「セクションを検索」で名前から探すこともできる）
4. 追加されたセクションの設定と中身を編集する
5. 「保存」をクリックする

ブロックを足すときは、サイドバーでブロックを足したいセクションにカーソルを合わせ、「ブロックを追加」をクリックして一覧から選びます※1。セクションごとに追加できるブロックの種類や数には上限があり、上限に達すると「ブロックを追加」はグレー表示になって押せなくなります※1。

たとえば、トップページに「メール登録」のセクションを1つ足し、そこに見出しのブロックを加えて「新作のお知らせを受け取る」と入れます※1。セクションが入れ物、ブロックがその中身という関係です。

※1 https://help.shopify.com/ja/manual/online-store/themes/theme-structure/sections-and-blocks

並べ替え・非表示・削除で構成を整える

順番を入れ替えるならドラッグ、画面から消すなら非表示か削除です。消すときは、また使う予定があるかどうかで選び分けます。

ブロックも同じ操作で並べ替え・非表示・削除ができます※1。操作が終わったら「保存」をクリックします。

年末セールのバナーを1月に消す場面を考えてみてください。削除してしまうと、次の年末には画像の選び直しから文言の入力まで、一から作り直し。非表示にしておけば、アイコンを押し直すだけで去年の設定のまま戻せます。

迷ったら、まず非表示を選びましょう。削除は、二度と使わないと言い切れるものだけに絞ります。

※1 https://help.shopify.com/ja/manual/online-store/themes/theme-structure/sections-and-blocks

セクションとブロックの文字や画像を差し替える

文字や画像を差し替えたいときは、サイドバーで対象のセクションかブロックをクリックします。開いた設定の入力欄に新しい文言を入れたり、画像を選び直したりすれば完了です※1。

1. サイドバーで、差し替えたい画像が入っているセクションかブロックをクリックする
2. 画像の欄で「画像を選択」をクリックする
3. アップロード済みの画像から選ぶか、新しい画像をアップロードする
4. 「保存」をクリックする

見出しや本文、ボタンの文言は、入力欄を書き換えるとプレビューにすぐ反映されます。

ロゴの差し替えは、テーマ設定の「ロゴ」から行います。「画像を選択」で新しいロゴを選び、「保存」をクリックする流れです※2。テーマ設定に「ロゴ」の項目が見当たらない場合は、メニューバー中央のテーマ名をクリックし、「ドキュメントを表示」から、使っているテーマのドキュメントで設定の場所を確かめてください※3。 

画像を差し替えたら、メニューバー右のスマホのアイコンでスマホ表示に切り替えます。もう一度押すと、パソコンの表示に戻ります※3。パソコンでは収まっていた横長の画像が、スマホでは左右の端が切れて、写っている文字や商品が欠けることがあります。画像を1枚入れ替えるたびに、スマホ表示で1回見る習慣をつけると安心です。

※1 https://help.shopify.com/ja/manual/online-store/themes/theme-structure/sections-and-blocks
※2 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/theme-settings
※3 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/features-overview

---

5.公開前のプレビュー確認と、公開後に元のテーマへ戻す方法

公開前にやることは、お客様と同じ目線で見え方を点検することです。点検で崩れが見つかっても、編集中の失敗ならボタン1つで取り消せます。

スマホ表示とプレビューリンクで確認する

公開前の確認は2つです。エディタのスマホ表示で自分の目で見ること、プレビューリンクを共有してほかの人にも見てもらうことです。

スマホ表示では、トップページから商品ページ、カートまで、お客様がたどる順にページを切り替えて見ていきます。見出しが不自然な位置で折り返していないか、ボタンが指で押しやすい大きさか。ページ単位の確認では気づきにくい崩れも、流れで見ると目に留まります。

ほかの人に見てもらうのは、作った本人ほど見慣れた画面の崩れに気づきにくいからです。プレビューリンクは、次の手順で作ります。

1. 管理画面で「オンラインストア」→「テーマ」を開く
2. 複製したテーマの「…」ボタンをクリックする
3. 「プレビュー」を選ぶ
4. 画面上部のプレビューバーにあるリンクのアイコンをクリックする（リンクがコピーされる）

コピーしたリンクは、URLを知っていれば誰でも見られ、作成から2日で期限が切れます※1。期限が切れても、同じ手順でいつでも新しいリンクを作り直せます※1。なお、公開中のテーマのプレビューは共有できません※1。共有するのは、必ず複製したテーマのほうです。

※1 https://help.shopify.com/ja/manual/online-store/themes/adding-themes

複製したテーマを公開する

複製したテーマを公開すると、その瞬間からお客様が見る画面が切り替わります。操作は、テーマの一覧で「公開する」を押すだけです。

1. 管理画面で「オンラインストア」→「テーマ」を開く
2. 下書きテーマの一覧で、複製したテーマの「公開する」をクリックする

エディタで作業している場合は、画面上部の「公開」をクリックし、表示された画面でもう一度「公開」をクリックしても公開できます※1。

公開と同時に、それまで公開していた元のテーマは下書きテーマの一覧に移ります。元のテーマの設定はそのまま残るので、あとから戻すこともできます※1。 

別のテーマに替えるときの手順は「Shopifyテーマの変更・アップデートでカスタマイズを消さない移行手順」で解説しています。

ただし、管理画面に置いておけるテーマの数には上限があります。Basic・Grow・Advancedプランでは最大20個、Shopify Plusプランでは最大100個です※2。複製を重ねて上限が近づいたら、使わなくなったテーマを削除します。

公開のタイミングは、注文やアクセスが少ない時間帯を選ぶと、万一崩れていたときの影響を小さく抑えやすくなります。

※1 https://help.shopify.com/ja/manual/online-store/themes/managing-themes/publishing-themes
※2 https://help.shopify.com/ja/manual/online-store/themes/adding-themes

編集中の取り消しと、公開後の戻し方

戻し方は、どの時点で失敗に気づいたかで変わります。

「元に戻す」は、キーボードならWindowsはCtrl＋Z、Macは⌘＋Zでも操作できます※1。

公開後に元のテーマへ戻す手順は次のとおりです。

1. 管理画面で「オンラインストア」→「テーマ」を開く
2. 下書きテーマの一覧で、元のテーマの「公開する」をクリックする※2

※1 https://help.shopify.com/ja/manual/online-store/themes/customizing-themes/theme-editor/features-overview
※2 https://help.shopify.com/ja/manual/online-store/themes/managing-themes/publishing-themes

---

6.まとめ

複製で作業場所をつくり、テーマ設定で全体の色とフォントを決める。セクションとブロックでページごとの構成と中身を整え、スマホ表示とプレビューリンクで見え方を点検してから公開する。どの手順にも、コードを書く場面はありません。

公開したあとも、元のテーマは下書きテーマの一覧に残ります。まずは、公開中のテーマを1つ複製するところから始めてみてください。