Shopifyのコードを編集するには？Shopifyテーマをカスタマイズするための手順と7つのフォルダ構成を解説
Shopifyのテーマコードは、管理画面の「オンラインストア」>「テーマ」から「コードを編集」を選択するとコードエディタが開き、直接編集できます。HTMLやCSSを使ったデザイン調整から、Liquidを活用した動的な表示制御まで、幅広いカスタマイズが可能です。
コード編集にはHTML/CSSの基礎知識が必要です。Shopifyのテーマは独自のテンプレート言語「Liquid」で構築されているため、基本的な構文も把握しておくとスムーズに作業できます。
また、編集前には必ずテーマの複製（バックアップ）を取ることが重要です。誤って削除や上書きをしてしまっても、複製したテーマがあれば元の状態に戻せます。
テーマコードを編集する手順（バックアップから公開まで）
コード編集を始める前に、現在公開中のテーマを複製しておくことが最初のステップです。複製しておけば、編集中にミスが起きても元のテーマをすぐに復元できます。本番テーマに直接手を加えるのではなく、複製したテーマ側で作業を進めることが安全なワークフローの基本です。
この章では、バックアップの取得からコードの編集、本番への反映までを以下の順序で説明します。
-
テーマを複製してバックアップを取る
-
コードエディタを開いてファイルを編集する
-
プレビューで確認して本番に反映する
1. テーマを複製してバックアップを取る
Shopify管理画面の「オンラインストア」>「テーマ」を開くと、現在公開中のテーマとテーマライブラリの一覧が表示されます。テーマ名の右側にある「…」アイコンをクリックし、メニューから「複製する」を選択します。
複製が完了すると、テーマライブラリに「[テーマ名] のコピー」という名前で新しいテーマが追加されます。この複製テーマが、実際にコード編集を行う作業スペースになります。以降の手順では、この複製テーマを操作します。問題なく仕上がったことを確認してから本番に切り替えるので、公開中の店舗には一切影響しません。
2. コードエディタを開いてファイルを編集する
複製したテーマの「…」メニューから「コードを編集」を選択すると、コードエディタ画面が開きます。画面は左右に分かれており、左ペインにはテーマのフォルダツリー、右ペインには選択したファイルのコード編集エリアが表示されます。
Shopify公式のテーマアーキテクチャドキュメントによると、コードエディタの左ペインにはLayout・Templates・Sections・Snippets・Assets・Config・Localesの7つのフォルダが表示されます。各フォルダの詳細な役割については次の章で説明しますが、CSSの調整であれば主にAssetsフォルダ、ページの構成変更であればSectionsフォルダを操作することが多くなります。
たとえば独自のCSSスタイルを追加したい場合、Assetsフォルダに新しい.cssファイルを作成し、layout/theme.liquidの<head>タグ内で{{ 'custom.css' | asset_url | stylesheet_tag }}のように読み込む構成が一般的です。既存のCSSファイルに直接追記する方法もありますが、管理しやすさの観点からは独立したファイルにまとめる方が後々便利です。
3. プレビューで確認して本番に反映する
コードを編集したら、エディタ右上の「保存」ボタンをクリックして変更を保存します。保存しただけでは公開中の店舗には影響しません。
次に、テーマ一覧画面に戻り、複製テーマの「…」メニューから「プレビュー」を選択します。プレビュー画面では実際の店舗と同じ表示で各ページを確認できるので、商品ページやカートページなど変更の影響が及ぶページを一通りチェックします。
表示に問題がなければ、複製テーマの「…」メニューから「公開する」を選択します。これで複製テーマが本番テーマとして切り替わり、来店したユーザーに変更後のデザインが届きます。元のテーマはテーマライブラリにそのまま残るため、問題が発生した場合は元のテーマを再度「公開する」にすることで即座に戻せます。
テーマファイルのフォルダ構成と編集対象の見つけ方
コードエディタを開いた際に最初に悩むのが「どのファイルを編集すればよいか」という点です。Shopifyテーマのフォルダ構成を理解しておくと、目的のファイルへの見当をつけやすくなります。
7つのフォルダと各ファイルの役割
Shopify公式のテーマアーキテクチャドキュメントによると、Shopifyテーマはlayout・templates・sections・snippets・assets・config・localesの7つのディレクトリで構成されています。それぞれの役割を把握することが、編集対象のファイルを素早く見つけるための出発点です。
以下に各フォルダの役割をまとめます。Sections・Assetsは特に編集頻度が高いフォルダです。
|
フォルダ名 |
主な役割 |
よく編集するか |
|
Layout |
すべてのページの外枠を定義する共通レイアウトファイル（theme.liquidなど）を格納します |
変更頻度は低め |
|
Templates |
商品ページ・コレクションページ・カートページなど、各ページタイプのテンプレートを格納します |
ページ構成変更時に使用 |
|
Sections ★ |
テーマエディタから設定・並び替えが可能な再利用モジュールを格納します。ヘッダーやフッター、商品カードなどが含まれます |
よく編集する |
|
Snippets |
テンプレートやセクションから呼び出して再利用する小さなコード部品（パーツ）を格納します。テーマエディタからは直接設定できません |
部品の細かい調整時に使用 |
|
Assets ★ |
CSS・JavaScript・フォントなどの静的ファイルを格納します |
よく編集する |
|
Config |
テーマエディタで設定可能な項目の定義ファイル（settings_schema.json）と設定値の保存ファイル（settings_data.json）が入っています |
テーマ設定のカスタマイズ時 |
|
Locales |
多言語対応のための翻訳文字列ファイルを格納します |
テキスト変更時に使用 |
SectionsとSnippetsは混同しやすいフォルダです。Sectionsに含まれるファイルはテーマエディタの「セクション」として管理画面から設定や並び替えができますが、Snippetsはコード内で明示的に呼び出してのみ使用される小さな部品です。テーマエディタから操作したい場合はSections、コードベースで部品化したい場合はSnippetsという使い分けになります。
デザインのスタイル調整（色・フォント・余白など）はAssetsフォルダのCSSファイルを編集するケースが多く、特定セクションのレイアウト変更や機能追加はSectionsフォルダのLiquidファイルを編集することになります。
編集したいファイルを特定する方法
「変更したい箇所はわかっているが、どのファイルに書かれているかわからない」という状況は、Shopifyのコード編集でよく直面します。そのような場合は、ブラウザの開発者ツールを使ってファイルを特定する方法が効率的です。
まず、編集したいページをブラウザで開き、変更したい要素の上で右クリックして「検証」を選択します。開発者ツールのHTMLパネルに、該当要素のクラス名や属性が表示されます。data-section-type属性や特徴的なクラス名が確認できたら、そのテキストをコピーしておきます。
次に、Shopifyのコードエディタ画面で、左ペインの上部にある検索ボックスにコピーしたクラス名やセクション名を入力します。ファイル横断検索が機能するため、そのクラス名が含まれるファイルが一覧表示されます。目的のファイルをクリックして開けば、編集箇所をすぐに見つけられます。
テーマエディタを使う方法もあります。管理画面の「テーマをカスタマイズ」からテーマエディタを開き、該当セクションを選択するとセクション名が確認できます。そのセクション名をもとにSectionsフォルダ内のファイルを探すと、対応するLiquidファイルを見つけやすくなります。
コード編集に必要なLiquidの基本構文
Shopifyテーマのファイルを開くと、HTMLの中にShopify独自の記述が混在していることに気づきます。この記述に使われているのが「Liquid」です。Shopify公式のLiquid基礎ドキュメントによると、LiquidはShopifyが開発したテンプレート言語で、商品情報や顧客情報などの動的なデータをHTMLに埋め込むために使われます。
Liquidは3つの構成要素で成り立っています。コードを読む際は、HTML部分とLiquid部分を区別して把握することが理解の第一歩です。
オブジェクトは二重波括弧{{ }}で囲んで記述し、変数やデータの値を出力します。たとえば{{ product.title }}と書くと、その位置に現在の商品名が表示されます。{{ shop.name }}でストア名、{{ cart.item_count }}でカート内の商品数を出力するといった使い方が典型的です。
タグはパーセント付き波括弧{% %}で囲んで記述し、条件分岐やループなどのロジックを担います。たとえば以下のように使います。
{% if product.available %}在庫あり{% else %}売り切れ{% endif %}
このように{% if %}と{% endif %}で条件分岐を作れます。{% for %}タグを使えば商品やコレクションをループ処理で繰り返し表示することも可能です。
フィルターはパイプ記号|を使って値を加工します。たとえば{{ product.price | money }}と記述すると、価格の数値が通貨形式（¥1,000など）に変換されて出力されます。| upcaseで大文字変換、| dateで日付フォーマットなど、多様なフィルターが用意されています。
既存のテーマファイルを読む際は、まずHTMLの骨格を把握し、その中に埋め込まれたLiquidのオブジェクト・タグ・フィルターを識別していくと構造を把握しやすくなります。Liquidの詳しい仕様はShopify公式のLiquidリファレンスに網羅されているので、構文について疑問が生じた際は参照してください。
コード編集前に知っておきたい4つの注意点
コード編集は自由度が高い反面、知っておかないと後々困るリスクがいくつかあります。特にテーマのアップデートへの影響と本番環境の取り扱いは、事前に理解しておくことで大きなトラブルを防げます。
1. テーマの自動アップデートが無効になる
Shopify公式のテーマアップデートドキュメントによると、settings_data.jsonとtemplatesディレクトリ内のJSONファイルを除くいずれかのファイルを編集した時点で、テーマの自動アップデートが無効になります。つまり、CSSファイルを1行変更しただけでも、以降はShopifyがテーマの新バージョンを自動で適用しなくなります。
自動アップデートが止まると、テーマの機能改善やセキュリティ修正を受け取れなくなるリスクがあります。特定のデザイン変更だけを目的とする場合は、既存のファイルを直接書き換えるのではなく、Assetsフォルダに新しいCSSファイルを追加してスタイルを上書きする方法を検討してください。この方法であれば、テーマのコアファイルには手を加えずにカスタマイズできます。
2. 変更が画面に反映されないときの確認ポイント
コードを保存したのに変更が見えない場合は、以下の点を順番に確認してください。
- ファイルの保存を実行したか（保存ボタンのクリック漏れは頻繁に起こります）
- ブラウザキャッシュが残っていないか（Ctrl+Shift+R または Cmd+Shift+R で強制リロードします）
- コード内に全角スペースが混入していないか（特に日本語入力切り替え時に入り込みやすく、CSSでは無効な値として扱われます）
- CSSファイルを新規追加した場合、theme.liquidなどに読み込みタグを記述しているか
全角スペースの混入は原因として見落とされやすいため、変更が効かない場合は特に注意して確認してください。
3. 本番テーマの直接編集はリスクが大きい
本番テーマを直接コード編集する場合、保存した瞬間に変更が公開中の店舗に反映されます。構文エラーや意図しないレイアウト崩れがあれば、そのまま来店中のユーザーの目に触れることになります。
安全なワークフローとして、この記事で紹介したテーマの複製が基本の手段です。より本格的な開発環境が必要な場合は、Shopify CLIのテーマ開発ドキュメントで紹介されているshopify theme devコマンドを使う方法があります。このコマンドを実行すると、ストアに紐づいた一時的な開発テーマが生成されます。ローカルのコードをリアルタイムで同期しながら確認できるため、チーム開発や大規模なカスタマイズには特に有効です。
4. 有料テーマはサポート対象外になる可能性がある
Shopifyテーマストアで購入した有料テーマは、コードを編集した後はテーマ制作者によるサポートの対象外となるケースがほとんどです。編集後に不具合が生じてもサポートへの問い合わせが受け付けられない可能性があるため、有料テーマを使用している場合は購入前やコード編集前にサポートポリシーを確認しておくことをお勧めします。
コード編集が難しいときの選択肢
カスタマイズの要件によっては、コードを書かずともShopifyアプリで対応できる場合があります。また、要件が複雑で自力での実装が難しい場合は、Shopifyの専門パートナーに依頼することも合理的な選択です。
Shopifyアプリで対応できるケース
ページレイアウトの変更やセクションの追加には、ページビルダー系のアプリが活用できます。ドラッグ&ドロップでページを構成できるため、コードの知識がなくても視覚的にレイアウトを調整できます。商品レビューの表示、お問い合わせフォームのカスタマイズ、ポップアップの設置なども、それぞれ対応したアプリが多数存在します。
ただし、アプリには月額費用がかかるものが多く、複数のアプリを導入すると固定コストが積み上がります。また、テーマの深いカスタマイズやブランド固有のデザイン実装には対応できないアプリも多く、アプリ間の相互干渉が発生するケースもあります。コスト面と柔軟性のバランスを考慮しながら判断してください。
Shopify専門パートナーに依頼するケース
サイトの全面リニューアル、数万点規模の商品データ移行、独自の受注・在庫管理システムとの連携など、要件が大きくなるほどコード編集の範囲も広がり、維持管理の負荷も増します。このような場合は、Shopify専門のパートナーに依頼することで品質とスピードを両立できます。
国内でShopify構築を手がけるパートナーの一つに、TUNAがあります。TUNAは国内上位1%のShopify Plusパートナーである株式会社RESORTが提供するECサイト構築パッケージです。多数の有名企業への支援実績から得たナレッジをもとに、プロのECマーケッターと有名デザイン会社が監修したオリジナルテーマと厳選機能を提供しています。
TUNAを活用したカンロ株式会社の事例では、サービス導入から1年半で前年比200%の売上成長を達成しています。フロント・バックエンドの両面に対応する技術力を持ち、複雑なデータ移行や数万点規模のSKUにも対応できます。
|
項目 |
内容 |
|
運営会社 |
株式会社RESORT |
|
パートナーレベル |
国内上位1%のShopify Plusパートナー |
|
対応プラットフォーム |
Shopify / Shopify Plus |
|
構築期間 |
最短2ヶ月 |
|
主な機能 |
サブスクリプション、在庫管理・複数拠点対応、配送システム連携、カスタムアプリ開発、AI機能による自然言語検索など |
|
料金体系 |
売上に応じた変動費モデル |
詳細はTUNA公式サイトで確認できます。
Shopifyのコード編集まとめ
この記事で解説した内容を振り返ります。
-
コード編集は必ずテーマを複製してから行います。複製テーマで作業し、プレビューで問題がないことを確認してから「公開」に切り替えることで、本番店舗への影響を最小化できます。
-
テーマファイルは7つのフォルダで構成されています。デザイン調整にはAssetsフォルダのCSSファイル、ページ構成の変更にはSectionsフォルダのLiquidファイルを編集するケースが多くなります。編集対象がわからない場合は開発者ツールとコードエディタの検索機能を組み合わせて特定できます。
-
Liquidはオブジェクト・タグ・フィルターの3つの構成要素で成り立っています。HTML部分とLiquid部分を区別して読めるようになると、既存のテーマコードを読み解きやすくなります。
-
コードを1つでも編集するとテーマの自動アップデートが無効になります。変更範囲は必要最小限に抑え、カスタムCSSの追加など既存ファイルへの影響が少ない手法を優先することをお勧めします。
-
編集範囲が大きくなるほど保守の負荷も増します。アプリで代替できる要件はアプリを活用し、大規模なカスタマイズが必要な場合はShopify専門パートナーへの依頼も検討してください。
まずは現在のテーマを複製し、小さな変更から試してみることが、Shopifyコード編集の第一歩です。
ECサイトの構築にはECプラットフォームが欠かせません。こちらの資料では合計10社のプラットフォームの導入費用や機能について簡単に比較できるようにまとめました。
これからECサイトの構築やリプレイスを検討されているご担当者様は、こちらのボタンからECカオスマップ資料をダウンロードいただき、ぜひ比較検討にお役立てください！
