Shopifyのコードエディタでは、テーマのファイルを確認・編集できます。開く前に、設定で実現できる変更かを確かめ、編集するテーマを複製してください。公開テーマを選んだまま保存すると、変更が公開中の表示に影響するため、対象テーマの確認から進めます。
編集できるテーマと権限を確認する
管理画面でオンラインストアのテーマを開き、対象テーマの名前と公開状態を確認します。スタッフや外部担当者は、必要なテーマ編集の権限を持つかを確認してください。有料テーマの試用版はコード編集に購入が必要です。メニューが表示されない場合に、別のテーマへ無理に切り替えず、権限や購入状況から確認しましょう。
複製した対象からコードを編集する
テーマのメニューから複製を作成し、日付や作業内容が分かる名前を付けます。作業する複製側のメニューでコードを編集する項目を開いてください。公式案内ではオンラインストアからメニューを経由する経路が示されていますが、画面構成が異なる場合もあるため、必ず対象テーマの名前を照合します。
ファイル名と本文の検索を分ける
ファイルを開くには一覧から選ぶほか、WindowsではCtrl＋P、Macでは⌘＋Pで名前を検索できます。本文の検索は開いているファイル内と、全ファイルを対象にする検索を使い分けます。productなどの単語を検索すると多くの候補が出るため、表示される文言や実際のクラス、呼び出し元と組み合わせて絞り込んでください。
配置と読み込み元をたどって特定する
templatesからセクション、そこから部品やCSS等をたどると、対象を探しやすくなります。ヘッダーなら必ずheader.liquid、文字なら必ずbase.cssという名前とは限りません。JSONテンプレートは構成の情報を持つため、Liquidコードを直接貼り付けないでください。似た名前のファイルが複数あれば、現在のページで使われる方を確認します。
保存前の差分と指摘を確認する
一度の変更を小さくし、変更前後の内容を比較します。Theme Checkの指摘を確認したうえで保存し、複製テーマのプレビューで表示と操作を試してください。全ファイルを一括置換すると関係ない部品にも変更が及ぶため、出現箇所を一つずつ確認します。保存できたことと、意図したページで正しく動くことは別です。
復元できる範囲を理解して記録する
Timelineは利用可能な履歴から既存ファイル単位で内容を戻す仕組みで、テーマ全体の復元や削除済みファイルの回復を保証しません。assets内の画像、CSS、JavaScript等にはTimeline履歴がないと公式に案内されています。複製を残し、ファイル名、変更理由、追加箇所を記録してください。テーマ更新時には変更の引き継ぎも再確認しましょう。
導入前の確認事項
- 対象テーマ・権限・購入状態を確認した
- 複製側を開いていることを確認した
- ファイル検索と本文検索を使い分けた
- 保存前差分・プレビュー・戻し方を確認した
公式資料・関連記事
関連記事：Shopifyテーマの構造｜Liquid・HTML・CSS・JS、ShopifyのLiquid入門｜出力・条件・利用範囲の基本、ShopifyボタンのCSS変更｜色・余白と適用範囲の確認。
運用設計や確認項目の整理は、現在の業務と対象URLを添えて株式会社AOへご相談ください。
公式資料の確認日：2026年11月2日。記入例や手順は編集上の提案で、導入成果を保証するものではありません。
コメント