2026.10.26 開発

Shopifyテーマのカスタマイズ手順：テーマエディタ・カスタムCSS・コード編集の範囲と更新対策

Shopifyテーマのカスタマイズは、テーマエディタ、カスタムCSS、カスタムLiquid、コードエディタの4段階に分かれ、どこで直すかによって「テーマの更新で消えるかどうか」が変わります。本記事では、テーマを複製して作業用の下書きを作る手順から、セクションとブロックの上限、商品ごとに別のテンプレートを割り当てる方法、カスタムCSSの字数上限と使えない記法、Shopify CLIでのバックアップと未公開テーマへの反映までを、コマンドと設定例つきで解説します。テーマの更新でコード編集が引き継がれなかったときの差分の移し方も、2026年10月時点の公式資料に沿って整理しました。

まとめ：Shopifyテーマのカスタマイズはエディタ・CSS・コードの順に広げる

色、フォント、セクションの並び、商品ページの構成は、テーマエディタだけで変えられます。エディタでの変更は、テーマの更新版にも引き継がれます。最初に試すのはここです。

エディタの設定で届かない見た目はカスタムCSSで、メタフィールドの表示のような小さな処理はカスタムLiquidのセクションで足します。コードエディタでテーマファイルを書き換えるのは最後の手段にしてください。コード編集は更新と競合すると更新版から消え、手で移し直す作業が残ります。

どの段階でも、先にテーマを複製し、公開中のテーマには直接手を入れないことが前提です。開発者が関わるならShopify CLIで手元にファイルを保存し、変更を記録しながら進めます。

テーマを複製して本番を触らずにカスタマイズを始める作業用テーマの準備

カスタマイズの作業は、公開中のテーマのコピーに対して行います。コピーで確認してから公開を切り替えれば、作業中の崩れた画面が買い物客に見えることはありません。

管理画面でのテーマ複製と最大20個のテーマ数上限を前提にした運用

Shopifyヘルプのテーマの複製の解説では、管理画面の「オンラインストア」で対象テーマの「…」から「複製」を選ぶと、「Copy Of」と元の名前が付いたテーマが一覧に追加されます。

注意したいのは、管理画面に置けるテーマが最大20個という上限です。作業のたびに複製を増やすと上限に達し、新しい複製の前に削除が必要になります。削除は取り消せないため、古いコピーは名前に日付を入れて管理し、不要になったものはダウンロードしてから消す運用にします。

Shopify CLIのtheme pullで公開中テーマを手元へ保存するコマンド

開発者が作業に入る場合は、管理画面の複製に加えて、手元にもファイルを残します。theme pullのリファレンスとtheme duplicateのリファレンスにあるフラグで、保存と複製を続けて実行できます。

# 1. テーマの一覧とIDを確認する
shopify theme list --store your-store

# 2. 公開中のテーマを日付つきのフォルダへ保存する
shopify theme pull --live --store your-store --path ./backup-20261026

# 3. 公開中のテーマ（IDは手順1の値）を作業用に複製する
shopify theme duplicate --theme 123456789 --name "作業用 2026-10" --store your-store

--storeには、myshopify.comの前の部分か完全なURLを渡します。手順2のフォルダをGitで管理しておくと、後の章で扱うテーマの更新時に、自分たちが何を変えたかを差分で示せます。

テーマエディタでセクションとブロックを追加し商品ページを組み替える手順

テーマエディタは、ページをセクションの並びとして扱います。セクションの中にブロックがあり、どちらも追加、並べ替え、非表示、削除をドラッグとボタンで操作できます。

セクション25個・ブロック1250個・8階層までのエディタ上の上限

セクションとブロックの解説によると、1つのテンプレートに置けるセクションは最大25個、ブロックは全セクション合計で最大1250個、ネストできるブロックは8階層までです。ブロックには、アプリが追加するアプリブロック、特定のセクション専用のセクションブロック、テーマ全体で定義するテーマブロックの3種類があり、1つのセクションでは後の2つを混ぜられません。

実務で上限に当たるのは、トップページに25個を超えるセクションを積んだときです。キャンペーンのたびにセクションを足すのではなく、非表示にした古いセクションを削除してから追加します。非表示はストアに出ないだけで、上限の数には入ったままです。

商品ごとに別レイアウトを出す代替テンプレートの作成と割り当て

一部の商品だけサイズ表や比較表を出したい場合は、商品ページのテンプレートを分けます。テンプレートの解説の手順では、テーマエディタ上部のドロップダウンで「商品」を選び、「テンプレートを作成」で名前とベースにする既存テンプレートを指定します。作られたテンプレートに入っているのは、ベースと同じセクションです。

割り当ては、テーマエディタではなく管理画面の商品詳細にある「テーマテンプレート」で行い、複数商品なら一括編集で「テンプレート」の列を追加して変えられます。落とし穴は、選択肢に出るのが公開中のテーマのテンプレートだけという点です。作業用テーマで作ったテンプレートは、そのテーマを公開するまで商品に割り当てられません。テンプレートは1テーマで合計1,000個までです。

代替テンプレートのJSONファイルで確認するsectionsとorderの対応

エディタで作ったテンプレートの実体は、templates/product.wholesale.jsonのようなJSONファイルです。JSONテンプレートの仕様では、sectionsとorderが必須で、ファイル名は<テンプレートの種類>.<接尾辞>.jsonの形をとります。Dawnの商品セクションにカスタム Liquid のセクションを1つ足した状態は、次のようになります。

{
  "sections": {
    "main": {
      "type": "main-product",
      "settings": {}
    },
    "size_chart": {
      "type": "custom-liquid",
      "settings": {
        "custom_liquid": "{{ product.metafields.custom.size_chart | metafield_tag }}"
      }
    }
  },
  "order": ["main", "size_chart"]
}

typeはsectionsフォルダのファイル名（拡張子なし）で、orderの並びがそのまま表示順になります。同じ名前のLiquidテンプレート（product.liquidなど）があるとJSON版は作れないため、古いテーマではまずこの点を確かめます。

カスタムCSSとカスタムLiquidでコードエディタを開かずに直せる範囲

テーマエディタには、CSSとLiquidを直接書ける入力欄があります。テーマファイルを書き換えないので、コードエディタより安全に小さな変更を足せます。

テーマ全体1500字・セクション500字のカスタムCSSの書き方と制約

カスタムCSSの追加の解説によると、テーマ全体のCSSは「テーマ設定」の「カスタムCSS」に1500字まで、セクション単位のCSSは各セクションの設定欄の下に500字まで書けます。セクション単位のCSSはそのセクションの中だけに効きます。

/* テーマ設定 > カスタムCSS（テーマ全体・1500字まで） */
.price-item--regular {
  font-size: 2.4rem;
}
@media screen and (max-width: 749px) {
  .price-item--regular {
    font-size: 2rem;
  }
}

/* セクションのカスタムCSS（そのセクション内だけ・500字まで） */
h2 {
  letter-spacing: 0.1em;
}

使えないものも決まっています。@importなどのアットルール、shopify-sectionクラスを狙うセレクタ、contentプロパティ、cdn.shopify.com以外のURLです。チェックアウトにも効きません。上の.price-item--regularはDawnのクラス名なので、テーマの更新でクラスが変わると効かなくなります。更新後は、狙ったセレクタが残っているかを確かめてください。

カスタムLiquidセクションでメタフィールドを表示する50KBまでの記述

Dawnにはカスタム Liquid のセクションがあり、設定欄に書いたLiquidをそのまま出力します。商品に登録したメタフィールドの表示や、条件つきの注意書き程度なら、テーマファイルを増やさずに済みます。

{% if product.metafields.custom.size_chart != blank %}
  <div class="size-chart">
    <p><strong>サイズ表</strong></p>
    {{ product.metafields.custom.size_chart | metafield_tag }}
  </div>
{% endif %}

設定の入力タイプの仕様では、このliquid型の設定は50KBまでで、sectionやsettings、content_for_headerなどにはアクセスできません。productのようなテンプレート固有のオブジェクトは商品テンプレートの中で使えます。設定欄が長くなってきたら、それはセクションとして作り直す合図です。

コードエディタとShopify CLIでテーマファイルを編集して戻せる状態を保つ手順

エディタとカスタムCSSで届かない変更だけを、コードの編集で扱います。テーマコードの編集の解説でも、テーマエディタやアプリで実現できないときに限ると案内されています。有料テーマは購入するまでコードを編集できず、試用版では触れません。

タイムライン履歴で1ファイルずつ戻す方法とassets配下の例外

同じ解説によると、コードエディタのタイムライン表示で、ファイルを過去の版に戻せます。戻せるのは1ファイルずつで、テーマ全体を一度に戻す機能はありません。履歴の保存期間にも限りがあります。

見落としやすいのは例外の2つです。assetsフォルダの画像、CSS、JavaScript、フォントには履歴がありません。削除したファイルも復元できません。CSSやJavaScriptを直接書き換えるなら、編集前に複製したテーマか手元の保存フォルダが、唯一の戻し先になります。

theme devのプレビューからtheme pushで未公開テーマへ反映する流れ

開発者が複数ファイルを変えるなら、管理画面のコードエディタより、手元で編集してCLIで送るほうが記録が残ります。shopify theme devで開発用テーマとしてプレビューし、確認できたらtheme pushのリファレンスのフラグで未公開テーマへ送ります。

# 手元のファイルを開発用テーマとしてプレビューする
shopify theme dev --store your-store

# 新しい未公開テーマを作って送る（名前は --theme で指定）
shopify theme push --unpublished --theme "作業用 2026-10" --store your-store

# 既存の作業用テーマへ、変えたセクションだけを送る
shopify theme push --theme 123456789 --only "sections/custom-*.liquid" --nodelete --store your-store

--nodeleteを付けないと、手元に無いファイルはテーマ側から消えます。公開中のテーマへの送信は、非対話の環境では--allow-liveを明示しないと実行されない設計です。この安全装置を外す運用は避けてください。

GitHub連携で管理画面の保存がコミットされる仕組みと上書きの注意

テーマのGitHub連携の解説によると、連携したブランチとテーマは双方向に同期し、管理画面での保存はそのままブランチへのコミットになります。約10秒以内の保存は1つのコミットにまとめられ、この同期は止められません。

運用で事故になるのは、コードエディタでの保存です。テーマエディタは新しいGitHub側の変更を上書きしそうなときに警告を出しますが、コードエディタには警告が無く、GitHub上のファイルを上書きします。連携を使うなら、コードの変更はGitHub側に一本化し、管理画面のコードエディタは使わないという取り決めが必要です。一度切断したブランチは再接続できない点も、作業前に共有しておきます。

テーマの更新でカスタマイズを失わないための更新前の保存と差分の移し方

テーマストアのテーマは、新しい版が出ると更新できます。更新しても公開中のテーマはすぐには変わらず、確認用のコピーが追加される仕組みです。

Updated copy ofに引き継がれる設定と引き継がれないコード編集

テーマの更新の解説では、更新版は「Updated copy of」を名前の頭に付けた下書きとして追加され、確認して公開した時点で切り替わります。テーマ設定、セクションとブロックの追加や並べ替え、各設定値、新しいテンプレート、アプリ埋め込みの設定は引き継がれます。

コードエディタやアプリによるコード編集は、更新と競合しない場合に限って含まれます。結果はテーマの欄に「code edits successfully included」か「code edits could not be included」で示されます。更新できるのはテーマストアから入れたテーマだけで、アップロードしたテーマは対象外です。制作会社が独自に組んだテーマは、この更新の仕組みに乗らないことを契約の前に確認してください。

コード編集が引き継がれなかった更新版へ差分を移すdiffの手順

「could not be included」と出たら、自分たちの変更を更新版へ手で移します。公開中のテーマと更新版を別々のフォルダに保存し、Gitで比べると、移す対象を絞り込めます。

# 公開中のテーマ（自社の変更あり）と更新版を別々に保存する
shopify theme pull --theme 111111111 --path ./current --store your-store
shopify theme pull --theme 222222222 --path ./updated --store your-store

# 変更のあるファイルの一覧を出し、sectionsとsnippetsから中身を比べる
git diff --no-index --stat ./current ./updated
git diff --no-index ./current/sections ./updated/sections

この差分には、テーマ作者による更新も混ざります。自社の変更だけを見分けるには、第1章で保存したフォルダをGitで管理し、変更のたびにコミットしておくことです。カスタムCSSは引き継がれていても、狙ったセレクタが更新版で消えていれば効きません。更新版の公開前に、カスタムCSSを入れたページを目で確かめます。

テーマのカスタマイズを自社で済ませる範囲と開発会社へ任せる判断の線引き

ここまでの4段階のうち、どこまでを自社で持つかで、更新時の作業量と外注費が決まります。線を引く基準を示します。

テーマエディタとカスタムCSSで止めてコードに手を入れない場面

テーマストアのテーマを使っていて、変えたいのが色、文字の大きさ、セクションの並び、商品ごとのレイアウト程度なら、コードには手を入れません。エディタとカスタムCSS、カスタムLiquidの範囲に収めれば、更新版への引き継ぎは自動で、作業はセレクタの確認だけです。

逆に、カートの動きを変える、テーマに無い入力項目を商品ページに足す、といった要件をコードエディタの直接編集で済ませるのは勧めません。更新のたびに移し直しが発生し、編集した担当者が辞めると誰も更新できなくなります。

セクション自作やアプリ開発へ進む条件と依頼前に整理する4項目

エディタで組めない部品が繰り返し要るなら、セクションを自作して設定項目を持たせます。schemaの書き方とShopify CLIでの開発はShopify Liquidのテーマ開発とShopify CLIでの始め方を解説した記事にまとめています。管理画面の業務機能や外部システムとの連携が要るなら、テーマではなくアプリの担当で、Shopifyアプリ開発の配布方法と実装手順を解説した記事が開発を始める際の入口です。

開発会社に相談する前に、次の4つを決めておくと見積もりの前提がそろいます。

使っているテーマ：テーマストアのテーマか、アップロードしたテーマか（更新の対象になるか）
変更の範囲：エディタで済む部分と、コードが要る部分の切り分け
管理の方法：GitHub連携を使うか、手元の保存とCLIで管理するか
更新の担当：テーマの更新が出たときに、差分の移し替えを誰が行うか

一創では、Shopifyのストア構築に加えて、既存テーマのセクション追加や、更新を前提にしたテーマの管理体制づくりも受託しています。どこまでをテーマで、どこからをアプリで作るかの切り分けから相談したい場合は、ECサイト制作・Shopify構築のサービスをご覧ください。ストア構築全体の工程と外注範囲はShopify構築の進め方を解説した記事で整理しています。