この記事の対象: Shopify Dawnを直接編集してカスタマイズしている制作者・運用担当
読了時間: 約12分
Dawnのカスタマイズでつまずく場所は、ほぼ1つに絞られます。「どこに書けば、テーマ更新で消えないのか」。答えを先に書きます。assets/custom.css と assets/custom.js と sections/custom-*.liquid を新しく作って、そこだけに書く。Dawn本体のファイル名で既にあるものは開かない。本体に触るのは layout/theme.liquid の2行だけで、それも記録の残し方まで決めておけば更新のたびに5分で戻せます。
この記事では、上書きされるファイルと残るファイルの線引きから、コピペできるCSS・JS・セクションの実物、更新後の再適用手順までを順に出します。設計の考え方より先に、置き場所の結論を置く構成にしています。
Dawnカスタマイズの結論：上書きされる場所と残る場所
テーマ更新で全ファイルが一律に書き換わるわけではありません。Dawnが公式に管理しているファイルだけが新バージョンに置き換わり、自分で足したファイルは触られません。ここの線が分かれば、置き場所の判断は一瞬で終わります。
残る（自分で追加したファイル）
- assets/custom.css
- assets/custom.js
- sections/custom-*.liquid
- snippets/custom-*.liquid
- config/settings_data.json
上書きされる（Dawn本体）
- layout/theme.liquid
- sections/header.liquid / footer.liquid
- assets/base.css / component-*.css
- snippets/card-product.liquid
- config/settings_schema.json
右側のファイルを開いて書き換えた分は、更新のたびに全部やり直しになります。
左側に入れられるかどうかだけを毎回判定する、という運用にします。判定できないまま右側を編集し始めると、あとから「どこを直したか」が追えなくなります。
上書き対象になるファイル
| ディレクトリ | 主なファイル | 更新時 |
|---|---|---|
layout/ |
theme.liquid, password.liquid |
上書きされる |
sections/ |
header.liquid, footer.liquid など既存セクション |
上書きされる |
snippets/ |
Dawnが元から持つスニペット | 上書きされる |
assets/ |
base.css, component-*.css など既存アセット |
上書きされる |
config/ |
settings_schema.json |
上書きされる |
上書きされないファイル
assets/custom.css（自分で追加）assets/custom.js（自分で追加）sections/custom-*.liquid（自分で追加したセクション）snippets/custom-*.liquid（自分で追加したスニペット）config/settings_data.json（テーマエディタで入れた設定値）
肝は、Dawnが元から持っていないファイル名で作ることです。base.css を開くのではなく custom.css を新規作成する。この1点を守るだけで、更新で消える範囲がほぼゼロになります。
WordPressの子テーマとの違い
WordPressに慣れていると「子テーマを作ればいい」と考えますが、Shopifyに子テーマの仕組みはありません。親子の継承がないので、上書きを避ける唯一の方法が「別名のファイルを足す」になります。この記事の方針が、実質的な子テーマの代わりです。
この記事で前提にしている環境
- Shopify Online Store 2.0 のテーマ（Dawn）
- JSONテンプレートに対応したDawnのバージョン
- 編集は管理画面の「コードを編集」またはShopify CLI
- HTML / CSS / Liquid の基礎がある読者
CSSとJSを足してDawnをカスタマイズする手順
ここが実作業の中心です。base.css を触らずに見た目を変える手順を、ファイルパスとコードで出します。
本体に触るのは2ステップ目の2行だけです。ここだけが更新後に再適用の対象になります。
カスタム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 は自店のブランドカラーに差し替えます。色の方向で迷ったら、業種ごとの効き方をまとめたグレー系Webデザイン配色事例8選｜業界別の使い方とトーンの選び方が判断材料になります。
カスタム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）です。ヘッダーの高さに合わせて変えます。if (!header) return; を入れているのは、Dawnが一部のコンポーネントをWeb Componentsで実装しており、タイミングによって対象要素がまだDOMにない場合があるためです。
あわせて 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
</head> の直前に2行を足します。
{{ 'custom.css' | asset_url | stylesheet_tag }}
<script src="{{ 'custom.js' | asset_url }}" defer="defer"></script>
</head>
</head> の直前に置く理由は、Dawn本体のCSSより後に読み込ませることです。詳細度が同じなら後に書いたほうが勝つので、上書きが素直に効きます。
ファイル自体は更新で消えませんが、この2行だけは更新後に書き直しが必要です。後述の CUSTOMIZATIONS.md に残しておけば、作業は数分で終わります。
CSSが効かないときは詳細度を上げる
Dawn本体のセレクタに詳細度で負けて、書いたのに効かないことがあります。!important で押し切るのは後の変更が効かなくなる原因になるので、親要素を含めて勝ちます。
/* NG: !important の乱用は後の変更を潰す */
.header {
background-color: #1a1a2e !important;
}
/* OK: 親要素を含めて詳細度を上げる */
body .section-header .header {
background-color: #1a1a2e;
}
どのルールが優先されているかは、Chromeの右クリック→「検証」→「Styles」で確認できます。打ち消されたルールには取り消し線が入るので、そこから原因を特定します。
既存セクションの見た目も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%未満なので、あいだに余白が入ります。商品ページの幅比率は、見せたいものが写真なのか仕様なのかで変わります。ECの構成パターンはECサイト・オンラインショップの参考事例8選｜構成パターンと費用感に型でまとめています。
独自セクションを追加してDawnのレイアウトを拡張する
header.liquid や main-product.liquid を書き換える代わりに、新しいセクションファイルを作ってページに置きます。この方法なら更新の影響を一切受けません。
セクションファイルの構造
Dawnのセクションは、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 に保存されます。このファイルは更新時も保持されるため、配置順や入力内容は維持されます。
セクションの並びをどう設計するか
セクションを足せるようになると、今度は「どの順に積むか」が問題になります。商品数の多いストアはグリッドを基調に、ブランドの世界観を見せたいストアは1カラムで縦に読ませる構成が合います。レイアウトの向き不向きは実例で見たほうが早いので、下の2本が参考になります。
1カラムで縦に読ませる構成のほうが向いている場合は、1カラムWebデザインレイアウトの実例8選｜向いているケースと作り方に判断軸をまとめています。
セクション設計の判断軸
独自セクションを増やすかどうかは、ファーストビューの作り方で決まります。写真1枚・短いコピー・ボタン1つで成立する構成なら、Dawn標準の image-banner セクションの枠内でほぼ再現できます。この範囲に収めれば、独自セクションを増やさずに済み、更新のたびの点検箇所も少なくなります。
反対に、トップで複雑な動きや重ね合わせを作り込もうとすると、本体ファイルの編集箇所が増えやすくなります。見栄えは出ますが、運用フェーズでテーマ更新を止める判断とセットになる点は先に理解しておく必要があります。どちらが正しいという話ではなく、更新に追従し続けたいなら標準セクションの表現力の範囲でデザインを決めるという順序が効きます。
業種ごとのデザインの作り込み方の傾向は、アパレル・ファッションのWebサイトデザイン事例5選｜傾向を分類してわかったことで分類しています。ブランドサイトとECを分けるか一体化するかで、カスタマイズの重さも変わります。その判断軸はブランドサイトとECサイト統合の判断軸｜分離すべきか一体化すべきかにまとめています。
本体を編集するときの記録の残し方
ヘッダーのHTML構造を変えたい、カートの挙動を変えたい。追加だけでは届かない場面はあります。そのときは「編集してよい」と決めたうえで、どこを編集したかを必ず3重に残す運用にします。
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 "ヘッダーにお知らせバーの表示領域を追加"
更新が来たら、新バージョンを別ブランチで取って差分を見ます。
# 現在の作業を別ブランチに退避
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-10 {% endcomment %}
<div class="custom-notice-bar">
<p>{{ settings.notice_text }}</p>
</div>
{% comment %} /CUSTOM {% endcomment %}
CSSファイルの場合（本体をやむを得ず編集するとき）
/* CUSTOM: ヘッダーのフォントサイズ変更 — 2026-10 */
.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> 直前にあるか（本体CSSより後ろか）を確認します。
作ったセクションがテーマエディタに出てこない
{% schema %} の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; で要素の取得を確認してから実行します。
対応ブラウザ — この記事のCSS・JSはChrome / Edge / Safari / Firefox の現行版で動きます。defer 属性、classList、window.scrollY、:not() セレクタ、@media screen and (min-width:) はいずれも全モダンブラウザで標準対応です。IE11は対象外です。
よくある質問
Dawnのカスタマイズでテーマ更新に消されないのはどのファイルですか？
自分で新しく作ったファイルです。assets/custom.css、assets/custom.js、sections/custom-*.liquid、snippets/custom-*.liquid は、Dawn公式のファイル一覧に含まれないため更新で削除されません。逆に base.css や header.liquid のようにDawnが元から持つ名前のファイルは、編集内容ごと上書きされます。
Dawnのアップデートは自動で適用されますか？
自動では適用されません。管理画面の「オンラインストア」→「テーマ」に更新通知が出たとき、手動で「更新」を押す必要があります。更新前にテーマを複製してバックアップを取っておけば、問題が起きても切り戻せます。
CSSだけで対応できるカスタマイズの範囲はどこまでですか？
色・サイズ・余白・表示と非表示の切り替えといった見た目の調整は、ほぼCSSで足ります。HTML構造の変更、入力フォームの追加、カートやチェックアウトの挙動変更はCSSでは届かず、LiquidやJavaScriptの編集が必要です。
WordPressの子テーマのような仕組みはShopifyにありますか？
ありません。親テーマを継承する仕組みがないため、上書きを避ける手段は「別名のファイルを足して本体への編集を最小限にする」になります。この記事の方針が実質的な子テーマの代わりです。Shopify の GitHub 連携を使うと、変更の追跡と復元がしやすくなります。
カスタマイズが増えたらDawn以外のテーマに切り替えるべきですか？
本体ファイルの編集箇所が増えると、更新のたびの再適用が膨らみます。CUSTOMIZATIONS.md の「本体を編集したファイル」が10ファイルを超えてきたら、有料テーマやオリジナルテーマを検討したほうが長期の手間は減ります。
まとめ
Dawnのカスタマイズは、置き場所を先に決めれば大半の事故が消えます。
- 見た目の調整は
assets/custom.cssに書く。base.cssは開かない - JavaScriptは
assets/custom.jsに書く。既存のJSファイルは触らない - レイアウトの追加は
sections/custom-*.liquidを新規作成する - セクション固有のCSSは
{% stylesheet %}ブロックに書けばtheme.liquidを触らずに読み込まれる - 本体に触った箇所は
CUSTOMコメントで範囲を囲み、一覧をCUSTOMIZATIONS.mdに残す - Shopify CLI と Git を組み合わせれば、更新時の差分確認と再適用が数分で終わる
本体に残る編集が theme.liquid の2行だけなら、更新通知が来ても押せます。そこまで整えるのが、この方針のゴールです。
