【Shopify Editions | Summer '25】Shopifyが新テーマコードエディタを発表！注目の機能と使い方を解説❕

changelog 公開日 July 24, 2025

2025年7月、Shopifyが「新しいテーマコードエディタ」を正式発表しました！
これまで以上に便利で、開発者にとって快適な編集体験が整っています👏

本記事では、新エディタの注目機能と、実際の使い方を初心者の方にも分かりやすくご紹介します🧭

 

🔍 新エディタの注目ポイント

新しいコードエディタでは、以下のような便利機能が搭載されています。

• 全ファイル横断の検索＆置換

• LiquidDocのサポート（コード補完・パラメータのバリデーション付き）

• エディタテーマの切り替え（ダークモードも可🌙）

• 自動インデントなどのコード整形機能

• 変更履歴の表示＆ロールバック対応

• Theme Checkによるエラー即時検知

VSCodeに慣れている方ならすぐに馴染めるUI設計になっており、本格的な開発でも快適に操作可能です。

 

🧪 さっそく試そう！操作手順

① テーマコードエディタを開く

1. Shopify管理画面で「オンラインストア → テーマ」を選択

2. 編集したいテーマの「…」メニューから「コードを編集」をクリック

従来であれば、以下のような画面が表示されていましたが、

今回のアップデートを受けて、従来のエディタ画面に代わり、VSCode風の新エディタUIが展開されるようになりました！（全プラン対象・順次ロールアウト中）

 

🔧 手動で新エディタを試す方法

まだ切り替わっていないストアでも、コードエディタを開いた際のURLの末尾に ?vs=1 を追加すれば新エディタが表示されます。

挿入イメージ：

https://admin.shopify.com/store/ストア名/themes/142127628450?vs=1

 

コードエディタでは、左側にテーマファイルが表示され、右側に編集領域が表示されます。

このコードエディタでは こちら のShopify VSCode拡張機能が動いているとのことで、

VSCodeならではの基本的なショートカットキーも利用可能との事◎

🛡️ Theme Checkでエラーも事前に防げる！

また、新エディタには「Theme Check」機能が搭載されており、コード作成している段階で即座にエラーを検出してくれます。

以下、Theme Checkによる検出対象の一例です：

• ストアフロントの処理速度を低下させる可能性のある解析機能
• 翻訳ファイルの不一致（例：翻訳キーの欠落）
• 必須テンプレートの欠落

エラー箇所は赤いアンダーラインで表示され、マウスホバーで詳細が確認できます。

✨まとめ

新しいShopifyテーマコードエディタは、
「使いやすさ」と「本格的な開発対応」の両立を実現した強力なツールです！

新しいコードエディタの利便性をぜひ確認してみてください！

 

参考

changelog new-theme-code-editor

dev docs  - コードエディタ