この記事の対象: Shopify のテーマファイルを直接編集してカスタマイズする制作者
読了時間: 約12分
Dawn テーマを直接書き換えてカスタマイズすると、公式のテーマアップデートを適用した瞬間に変更が消える。管理画面に「テーマの更新があります」と表示されても、怖くて押せない――そんな状態は避けたい。この記事では、Dawn のカスタマイズを「元のファイルに触れず、新しいファイルを足す」形を基本にして進める方針を、ファイルパスとコード付きで解説する。どうしても本体のファイルを編集しなければならない場面での記録の残し方もあわせて扱う。
前提：この記事で扱う環境
- Shopify Online Store 2.0 のテーマ（Dawn を想定）
- JSON テンプレートに対応している Dawn のバージョン
- テーマファイルの編集は、管理画面の「コードを編集」または Shopify CLI で行う
- HTML / CSS / Liquid の基礎がある読者を想定
Dawn は Shopify が無料で提供している公式テーマで、テンプレートが JSON 形式になっている。セクションとブロックの組み合わせでページを構成する Online Store 2.0 の設計に沿って作られている。
テーマ選びの段階から検討したい場合は、こちらが参考になる。
Dawn更新で上書きされるファイルと残るファイル
テーマ更新が入ったとき、すべてのファイルが一律に書き換わるわけではない。どこが上書きされ、どこが残るのかを把握しておくことで、カスタマイズの置き場所を判断しやすくなる。
上書き対象になるファイル
Dawn が公式に管理しているファイルは、アップデートで新しいバージョンに置き換えられる。
| ディレクトリ | 主なファイル | 上書き |
|---|---|---|
layout/ |
theme.liquid, password.liquid |
される |
sections/ |
header.liquid, footer.liquid など既存セクション |
される |
snippets/ |
Dawn が元々持つスニペット | される |
assets/ |
base.css, component-*.css など既存アセット |
される |
config/ |
settings_schema.json |
される |
上書きされないファイル
自分で新規に追加したファイルは、Dawn の公式ファイル一覧に含まれないため、更新で削除されない。
assets/custom.css（自分で追加したファイル）assets/custom.js（自分で追加したファイル）sections/custom-*.liquid（自分で追加したセクション）snippets/custom-*.liquid（自分で追加したスニペット）config/settings_data.json（テーマエディタの設定値）
重要なのは、Dawn が元から持っていないファイル名で作ること。base.css を編集するのではなく、custom.css を新しく作ってそこに書く。
残る（自分で追加）
- assets/custom.css
- assets/custom.js
- sections/custom-*.liquid
- snippets/custom-*.liquid
上書きされる（Dawn本体）
- layout/theme.liquid
- sections/header.liquid
- assets/base.css
- snippets/card-product.liquid
カスタマイズはできるだけ「追加」で済ませる。これがアップデートに耐える方針の核になる。
独自のCSS・JSを安全に追加する手順
Dawn の見た目を調整したいとき、base.css や既存コンポーネントの CSS を直接書き換えるのは避ける。専用のファイルを作り、それを読み込む形にする。
カスタムCSSファイルを作る
管理画面の「オンラインストア」→「テーマ」→「…」→「コードを編集」で assets/ フォルダを開き、「新しいアセットを追加」→「空のファイルを作成」を選ぶ。
ファイルパス: assets/custom.css
/* ===========================================
カスタムCSS — Dawn テーマ用
このファイルはテーマ更新で上書きされない
=========================================== */
/* ヘッダーの背景色を変更 */
.header {
background-color: #1a1a2e;
}
/* 商品カードのホバー時にシャドウを追加 */
.card-wrapper:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: box-shadow 0.2s ease;
}
/* フッターのリンク色を変更 */
.footer a {
color: #e0e0e0;
}
背景色 #1a1a2e やリンク色 #e0e0e0 は、自分のストアのブランドカラーに合わせて書き換える。
カスタムJSファイルを作る
同じ要領で JavaScript ファイルも追加する。
ファイルパス: assets/custom.js
/*
カスタムJS — Dawn テーマ用
このファイルはテーマ更新で上書きされない
*/
document.addEventListener('DOMContentLoaded', function () {
// スクロール量に応じてヘッダーに影をつける
var header = document.querySelector('.section-header');
if (!header) return;
window.addEventListener('scroll', function () {
if (window.scrollY > 50) {
header.classList.add('header-scrolled');
} else {
header.classList.remove('header-scrolled');
}
});
});
window.scrollY > 50 の数値はスクロール量（px）。ヘッダーの高さに応じて変える。
あわせて custom.css にスクロール時のスタイルを追記する。
/* スクロール時のヘッダーシャドウ */
.header-scrolled {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.2s ease;
}
theme.liquid で読み込む
作成したファイルをページに読み込ませるには、layout/theme.liquid を編集する。これは本体ファイルへの変更になるが、追加するのは2行だけなので、アップデート後の再適用も容易。
ファイルパス: layout/theme.liquid
</head> の直前に以下を追加する。
{{ 'custom.css' | asset_url | stylesheet_tag }}
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
</head>
</head> の直前に置く理由は、Dawn 本体の CSS より後に読み込ませて、カスタム CSS の詳細度が同じでも後勝ちになるようにするため。
ファイル自体はアップデートで消えないが、theme.liquid への2行の追記はアップデート後に再度必要になる。この「再適用が要る箇所」を後述の方法で記録しておく。
CSSの詳細度が足りないとき
Dawn 本体の CSS にセレクタの詳細度で負けてスタイルが効かないことがある。!important を安易に使うのではなく、親要素を含めたセレクタで対応する。
/* NG: !important の乱用は後の変更が効かなくなる原因 */
.header {
background-color: #1a1a2e !important;
}
/* OK: 親要素を含めて詳細度を上げる */
body .section-header .header {
background-color: #1a1a2e;
}
ブラウザの開発者ツール（Chrome なら右クリック→「検証」→「Styles」タブ）で、どの CSS ルールが優先されているかを確認できる。打ち消されているルールには取り消し線が引かれるので、そこから原因を特定する。
独自セクションを追加してレイアウトを拡張する
既存のセクション（header.liquid や main-product.liquid）を編集する代わりに、新しいセクションファイルを作ってページに追加する。この方法なら、Dawn のアップデートに影響されない。
セクションファイルの構造
Dawn のセクションは Liquid テンプレートで書く。HTML 部分と、テーマエディタの設定項目を定義する {% schema %} ブロックの2つで構成される。
以下は、任意のページに追加できる CTA バナーセクションの例。
ファイルパス: sections/custom-cta-banner.liquid
<section
class="custom-cta-banner"
style="
background-color: {{ section.settings.bg_color }};
padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;
"
>
<div class="page-width">
<div class="custom-cta-banner__inner">
{% if section.settings.heading != blank %}
<h2 class="custom-cta-banner__heading">
{{ section.settings.heading }}
</h2>
{% endif %}
{% if section.settings.text != blank %}
<p class="custom-cta-banner__text">
{{ section.settings.text }}
</p>
{% endif %}
{% if section.settings.button_label != blank %}
<a
href="{{ section.settings.button_link }}"
class="custom-cta-banner__button button"
>
{{ section.settings.button_label }}
</a>
{% endif %}
</div>
</div>
</section>
{% stylesheet %}
.custom-cta-banner__inner {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.custom-cta-banner__heading {
font-size: 1.8rem;
margin-bottom: 0.8rem;
}
.custom-cta-banner__text {
font-size: 1rem;
margin-bottom: 1.5rem;
line-height: 1.7;
}
.custom-cta-banner__button {
display: inline-block;
padding: 12px 32px;
text-decoration: none;
border-radius: 4px;
}
{% endstylesheet %}
{% schema %}
{
"name": "カスタムCTAバナー",
"settings": [
{
"type": "text",
"id": "heading",
"label": "見出し",
"default": "お問い合わせはこちら"
},
{
"type": "textarea",
"id": "text",
"label": "本文"
},
{
"type": "text",
"id": "button_label",
"label": "ボタンテキスト",
"default": "詳しく見る"
},
{
"type": "url",
"id": "button_link",
"label": "ボタンリンク"
},
{
"type": "color",
"id": "bg_color",
"label": "背景色",
"default": "#f5f5f5"
},
{
"type": "range",
"id": "padding_top",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "上の余白",
"default": 40
},
{
"type": "range",
"id": "padding_bottom",
"min": 0,
"max": 100,
"step": 4,
"unit": "px",
"label": "下の余白",
"default": 40
}
],
"presets": [
{
"name": "カスタムCTAバナー"
}
]
}
{% endschema %}
presets を定義しておくと、テーマエディタの「セクションを追加」の一覧に「カスタムCTAバナー」が表示される。見出し・本文・背景色などはすべてテーマエディタのサイドバーから変更できる。
CSS は {% stylesheet %} ブロック内に書く。このブロックに書いた CSS は、Shopify がセクション単位で自動的に読み込んでくれるため、theme.liquid に追記する必要がない。セクション固有のスタイルはここに書くのが一番安全な置き場所になる。
セクションをページに配置する
ファイルを作っただけでは表示されない。テーマエディタ（カスタマイザー）から配置する。
- 管理画面で「オンラインストア」→「テーマ」→「カスタマイズ」を開く
- 上部のドロップダウンで、配置したいページ（トップ、商品ページなど）を選ぶ
- 左サイドバーの「セクションを追加」をクリック
- 一覧から「カスタムCTAバナー」を選ぶ
- 見出し・ボタンテキスト・背景色を入力して「保存」する
テーマエディタでの操作結果は config/settings_data.json に保存される。このファイルはテーマ更新時も保持されるため、セクションの配置順や入力内容は維持される。
既存セクションの見た目をCSSで上書きする
商品ページのレイアウトを変えたいときでも、sections/main-product.liquid を直接編集するのではなく、custom.css で上書きするほうが安全。
ファイルパス: assets/custom.css に追記
/* 商品ページ：画像とテキストの幅比率を変更 */
@media screen and (min-width: 750px) {
.product--medium:not(.product--no-media) .product__media-wrapper {
width: 55%;
}
.product--medium:not(.product--no-media) .product__info-wrapper {
width: 40%;
}
}
/* 商品ページ：価格の文字サイズと太さを調整 */
.price__regular .price-item--regular {
font-size: 1.6rem;
font-weight: 700;
}
画像エリア 55%、テキストエリア 40% は、デザインに応じて調整する。合計を 100% 以下にすると間に余白が入る。
CSS だけでは対応できないカスタマイズの範囲については、Shopifyでできないこと｜依頼前に知るカスタマイズの限界【2026年】に整理している。
本体ファイルを編集するときの記録の残し方
「新しいファイルを追加する」だけでは対応できない場面もある。ヘッダーの HTML 構造を変えたい、カートの挙動を変えたいなど、既存ファイルの直接編集が避けられないケースだ。
そのときに備えて、変更内容を確実に追跡できる仕組みを作っておく。
Shopify CLI と Git で差分を管理する
Shopify CLI を使えば、テーマファイルをローカルに取得して Git で管理できる。
# テーマをローカルに取得
shopify theme pull --store your-store.myshopify.com
# Git リポジトリを初期化してオリジナルの状態をコミット
cd your-theme-directory
git init
git add .
git commit -m "Dawn オリジナルの状態"
your-store.myshopify.com は自分のストアの URL に置き換える。
この最初のコミットが「元の状態」になる。カスタマイズのたびにコミットしていけば、どのファイルのどの行を変えたかが差分で確認できる。
# カスタマイズ後にコミット
git add .
git commit -m "ヘッダーにお知らせバーの表示領域を追加"
テーマの更新が入ったら、新バージョンを別ブランチに pull して差分を確認する。
# 現在の作業を別ブランチに退避
git checkout -b my-customizations
# main ブランチで新バージョンを取得
git checkout main
shopify theme pull --store your-store.myshopify.com
# 差分を確認
git diff my-customizations
変更箇所にコメントを残す
Git を使っていても、ファイルの中にもコメントを残しておくと検索しやすい。プレフィックスとして CUSTOM を統一的に使う。
Liquid ファイルの場合:
{% comment %} CUSTOM: お知らせバーを追加 — 2026-09 {% endcomment %}
<div class="custom-notice-bar">
<p>{{ settings.notice_text }}</p>
</div>
{% comment %} /CUSTOM {% endcomment %}
CSS ファイルの場合（本体ファイルをやむを得ず編集するとき）:
/* CUSTOM: ヘッダーのフォントサイズ変更 — 2026-09 */
.header__heading-link {
font-size: 1.4rem;
}
/* /CUSTOM */
開始と終了の両方にコメントを入れることで、変更した範囲が明確になる。アップデート後に同じ変更を再適用するとき、コピーすべき範囲がひと目で分かる。テーマ全体を CUSTOM で検索すれば、変更箇所の一覧も取れる。
変更一覧をファイルにまとめる
ローカルの Git リポジトリに CUSTOMIZATIONS.md を作り、何をどこで変えたかを記録しておく。Shopify にアップロードする必要はない。
# Dawn カスタマイズ記録
## 本体を編集したファイル（更新後に再適用が必要）
### layout/theme.liquid
- </head> 直前に custom.css / custom.js の読み込みを2行追加
### sections/header.liquid
- ファイル冒頭にお知らせバーの HTML を追加
## 新規追加したファイル（再適用不要）
- assets/custom.css
- assets/custom.js
- sections/custom-cta-banner.liquid
テーマ更新後は、この一覧の「本体を編集したファイル」だけを確認して再適用すればよい。新規追加したファイルは消えないため、再作業は不要。
カスタマイズとあわせて URL 構造の制約も把握しておくと、テンプレート設計がスムーズに進む。詳しくは ShopifyのSEO対策｜URL構造の制約とその回避策【2026年】 を参照。
うまくいかないとき
カスタムCSSが反映されない
原因として多いのは、Dawn 本体の CSS にセレクタの詳細度で負けているケース。前述の「CSSの詳細度が足りないとき」で解説した方法で対応する。あわせて、custom.css の読み込み位置が </head> 直前になっているか（Dawn 本体の CSS より後ろか）を確認する。
作ったセクションがテーマエディタに出てこない
{% schema %} の JSON に構文エラーがあると、セクション一覧に表示されない。原因として最も多いのは、カンマの過不足。JSON のバリデーター（VS Code の拡張機能や jsonlint.com など）でチェックする。presets の配列が空になっている、または presets 自体が定義されていない場合も一覧に出ない。
テーマ更新後にサイトの表示が崩れた
theme.liquid への追記が消えて、custom.css が読み込まれなくなっている可能性が高い。CUSTOMIZATIONS.md を見て、本体ファイルへの変更を再適用する。再適用前にテーマのプレビュー機能で表示を確認すると安全。
shopify theme pull でローカルの変更が消えた
shopify theme pull はサーバー上のファイルでローカルを上書きする。必ず先に git commit で現状を保存してから pull すること。上書きされてしまった場合は git checkout . で直前のコミットに戻せる。
custom.js がコンソールでエラーを出す
Dawn は一部のコンポーネントを Web Components（カスタム要素）で実装している。ページの読み込みタイミングによっては、対象の要素がまだ DOM に存在しないことがある。DOMContentLoaded イベント内で処理を書き、操作対象の要素が取得できたかどうかを if (!element) return; でチェックしてから実行する。
よくある質問
Dawnのアップデートは自動で適用されますか？
自動では適用されない。管理画面の「オンラインストア」→「テーマ」に更新通知が表示されたとき、手動で「更新」ボタンを押す必要がある。更新前にテーマを複製してバックアップを取っておくと、問題が起きたときに切り戻せる。
CSSだけで対応できるカスタマイズの範囲はどこまでですか？
色・サイズ・余白・表示と非表示の切り替えなど、見た目の調整はほぼ CSS で対応できる。一方、HTML 構造の変更、入力フォームの追加、カートやチェックアウトの挙動変更は CSS だけでは対応できず、Liquid や JavaScript の編集が必要になる。
WordPressの子テーマのような仕組みはShopifyにありますか？
WordPress のような子テーマの仕組みは Shopify にはない。この記事で解説した「新しいファイルを追加して、本体への編集を最小限にする」やり方が、実質的に子テーマに近い運用になる。Shopify の GitHub 連携を使えば変更の追跡と復元がしやすくなる。
Shopify CLIを使わずに管理画面だけで作業できますか？
管理画面の「コードを編集」からブラウザ上でファイルの追加・編集ができるため、CLI なしでもこの記事の内容は実行できる。ただし Git での差分管理やローカルプレビューが使えないため、本体ファイルを複数箇所編集するような案件では CLI を導入したほうがよい。
カスタマイズ内容が多くなったらDawn以外のテーマに切り替えるべきですか？
本体ファイルの編集箇所が増えすぎると、アップデートのたびに再適用の手間が膨らむ。目安として、CUSTOMIZATIONS.md の「本体を編集したファイル」が10ファイルを超えるようであれば、有料テーマの導入やオリジナルテーマの開発を検討したほうが長期的なコストは下がる場合がある。テーマ選定の判断基準は Shopifyテーマの選び方｜無料・有料・オリジナルの判断基準【2026年】 にまとめている。
まとめ
Dawn テーマのカスタマイズで最も大事なのは、元のファイルを上書きせず、新しいファイルを追加するという方針を徹底すること。
- 見た目の調整は
assets/custom.cssに書く。base.cssは触らない - JavaScript は
assets/custom.jsに書く。既存の JS ファイルは触らない - レイアウトの追加は
sections/custom-*.liquidを新規作成して対応する - CSS は
{% stylesheet %}ブロックに書けば、theme.liquid の編集なしで読み込まれる - 本体ファイルを編集した箇所は
CUSTOMコメントで範囲を囲み、一覧をCUSTOMIZATIONS.mdに記録する - Shopify CLI と Git を組み合わせれば、アップデート時の差分確認と再適用がスムーズになる
この方針で進めておけば、テーマの更新通知が来ても安心して適用できる。
