ヘルプ
ログイン

テーマコードの編集

コードエディタを使用すると、テーマコードを編集してオンラインストアに詳細な変更を加えることができます。テーマを構成するほとんどのファイルには、Shopify のテンプレート言語である Liquid が含まれています。テーマファイルには、HTML、CSS、JSON、JavaScript も含まれています。HTML と CSS の知識があり、Liquid の基本を理解している場合にのみ、テーマのコードを編集してください。

テーマのコードは、購入後にのみ編集できます。これには、テーマエディタで AI コードジェネレーターを使用することも含まれます。有料テーマのトライアル版を使用している場合は、コードを変更する前にテーマを購入する必要があります。

コードエディタには、テーマのファイルのディレクトリと、ファイルを表示および編集するためのスペースが表示されます。ディレクトリ内のファイルをクリックすると、そのファイルがコードエディタで開きます。複数のファイルを同時に開いて編集することができます。また、複数のファイルを同時に開いて確認することもできます。

テーマコードエディタのレイアウト

このページの内容

テーマコードを編集する

コードエディタを使用して、テーマのファイルを変更できます。

手順:

デスクトップ

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

モバイル

  1. Shopify アプリから、Menu アイコンをタップします。

  2. [販売チャネル] セクションで、[オンラインストア] をタップします。

  3. [テーマの管理] をタップします。

  4. 横長のメニュー > [コードを編集] をタップします。

変更を保存する

ファイルを編集すると、タブ名の横にドットが表示され、未保存の変更があることを示します。[保存] ボタンをクリックして変更を保存します。または、Mac では ⌘ + S、Windows では Ctrl + S を押して変更を保存することもできます。

保存ボタンの横に未保存のファイルが表示されているコードエディタの一部

テーマコードのフォーマット

コードのインデントを修正するには、Mac では ⌘ + Shift + P、Windows では Ctrl + Shift + P を押してコマンドパレットを開き、format と入力して、[ドキュメントをフォーマット] を選択します。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. フォーマットするファイルを開きます。

  4. Mac では ⌘ + P、Windows では Ctrl + P を押します。

  5. コマンドパレットで、format と入力し、キーボードの Enter キーを押します。

  6. ファイルを保存します。

コードのフォーマットオプションが選択されているコマンドパレット

ファイルの変更を追跡する

変更されたテーマファイルを以前のバージョンに復元するには、そのファイルのタイムラインビューを使用します。

タイムラインビューでは、既存のファイルを一度に 1 つずつ復元できます。テーマ全体を復元することはできず、削除されたテーマファイルを復元することもできません。タイムラインの履歴には限りがあるため、古いバージョンを利用できない場合があります。

復元すると、保持しておきたい変更点を含め、ファイルのコンテンツ全体が置き換えられます。変更を保持したい場合は、ファイルを復元する前に、現在のファイルのコンテンツを安全な場所にコピーしてください。

テーマエディタでのバージョン管理

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. 確認または復元する既存のファイルを開きます。

  4. オプション: 現在の変更を保持したい場合は、復元する前に現在のファイルのコンテンツを安全な場所にコピーしてください。

  5. タイムラインビューで、タイムライン内のエントリーをクリックして変更内容を比較します。

  6. ファイルのコンテンツ全体を選択した以前のバージョンに置き換えるには、タイムラインのエントリーを右クリックして、コンテンツを復元を選択します。

  7. [復元] をクリックします。

Theme Check

コードエディタには Theme Check という機能が搭載されています。この機能を使用すると、ライブテーマでエラーが見つかるのを待つのではなく、コードの記述中にリアルタイムでフィードバックが提供され、エラーを未然に防ぐことができます。

コードエディタでは、Theme Check によって編集済みのコードに含まれる以下のエラーを特定できます。

  • ストアフロントの表示速度を低下させる可能性のある、パーサーをブロックするスクリプト
  • 翻訳キーの欠落やロケールファイル内での翻訳の不一致など、翻訳ファイル間の不整合
  • テンプレートの欠落

エラーはコードの下に赤い線で示されます。エラーを確認するには、ハイライトされている行にマウスポインターを合わせます。

コードエディタでの検索と置換

コードエディタでは、以下のいずれかの方法で検索できます。

  • 特定のファイルのコードを検索する。
  • テーマのすべてのファイルのコードを検索する。

特定のファイル内、またはすべてのテーマファイルにわたってコードを置換できます。また、ファイル名で検索してファイルを開くこともできます。

ファイル内での検索

特定のファイル内のコードを検索して置換できます。矢印キーを使用して、コードの各インスタンスを確認します。

コードエディタのファイル内検索 UI

コードを検索した後、ファイル内のコードを置換できます。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. 検索するファイルを開きます。

  4. Mac の場合は ⌘ + F、Windows の場合は Ctrl + F を入力します。

  5. 「検索」フィールドに検索語を入力します。

  6. 任意：コードを置換するには、以下の操作を行います。

  • 検索モーダルで、右矢印 アイコンをクリックします。
  • 「置換」フィールドに置換後のコードを入力します。「大文字と小文字を維持」をクリックすると、置換後のコードの大文字と小文字の区別を既存のインスタンスに合わせることができます。
  • インスタンスを1つずつ置換するには「置換」アイコンを、すべてのインスタンスを一度に置換するには「すべて置換」アイコンをクリックします。

すべてのファイルにわたる検索

左側のサイドバーにある検索ボタンをクリックすると、すべてのテーマファイルを横断して検索できます。結果には、検索語のすべてのインスタンスと、それが表示されるファイルが表示されます。

コードエディタの検索サイドパネル

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. 検索 アイコンをクリックして、検索パネルを開きます。

  4. 「検索」フィールドに検索語を入力します。

  5. 任意：コードを置換するには、以下の操作を行います。

  • 検索モーダルで、右矢印 アイコンをクリックします。
  • 「置換」フィールドに、置換後のコードを入力します。
  • インスタンスを1つずつ、またはすべてのインスタンスを一度に置換します。

高度な検索オプション

検索結果を絞り込むには、以下の検索オプションを1つ以上使用します。

  • 「大文字と小文字を区別する」は、大文字と小文字を区別して検索語を返します。たとえば、product と入力すると、「product」と「Product」の両方のインスタンスがハイライト表示されます。「大文字と小文字を区別する」を選択すると、product のインスタンスのみがハイライト表示されます。
  • 「単語全体に一致」は、部分一致を除外し、完全に一致する単語の検索語を返します。たとえば、cart と入力すると、「carton」ではなく「cart」のインスタンスがハイライト表示されます。
  • 「正規表現を使用する」は、正規表現 (regex) に一致する検索結果を返します。regex とは、テキスト内の一致パターンを指定する文字列のことです。

「検索」パネルでは、ファイルやフォルダーを選択して、検索結果に含めたり除外したりすることもできます。

横長のメニュー をクリックして、高度なメニューを開きます。「含めるファイル」または「除外するファイル」の各フィールドに、任意のファイルパスまたはフォルダーパスを入力できます。複数のファイルやフォルダーを追加するには、スペースとコンマで区切ります。たとえば、sections フォルダー内のファイルを検索するには、「含めるファイル」フィールドに ./sections と入力します。

ファイルディレクトリービューから、特定のフォルダー内を検索することもできます。フォルダーを右クリックし、ドロップダウンメニューから 「フォルダー内を検索...」 を選択します。

テーマファイルを管理する

テーマコード内のファイルを管理できます。ファイルの削除、新しいファイルの追加、ファイル名の変更が可能です。また、以前のバージョンが利用可能な場合は、タイムラインビューから変更を加えた既存のコードファイルを復元できます。assets フォルダー内の画像、CSS、JavaScript、フォントなどのアセットファイルには、タイムラインの履歴がありません。

テーマファイルを開く

テーマファイルを開くには、フォルダーをクリックしてから、エクスプローラーでファイル名をクリックします。ファイル名や拡張子でファイルを検索して開くこともできます。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. Mac では ⌘ + P、Windows では Ctrl + P を押します。

  4. 検索バーにファイル名を入力してファイルを選択するか、「最近開いたファイル」リストからファイルを選択します。

新しいテーマファイルを追加する

ファイルを追加するには、フォルダーを選択し、「新しいファイル」アイコンをクリックした後、ファイル名とファイルの拡張子を入力します。

ファイル名には A～Z、0～9 の文字を使用できますが、スペース文字を含めることはできません。単語はダッシュかアンダースコアで区切ります。ファイルの拡張子は、ピリオド . と拡張子の種類によって定義されます (例: .liquid、.css)。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. 新しいファイルを追加するフォルダーをクリックします。

  4. フォルダー名を右クリックし、ドロップダウンメニューから 「新しいファイル...」 を選択します。

  5. ファイルに新しい名前を入力します。

  6. キーボードの Enter キーを押します。

新しいアセットをアップロードする

アイコンや画像ファイルなどの新しいアセットを、コードエディタの assets フォルダーにアップロードできます。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. assets フォルダーを右クリックします。

  4. 「アップロード...」をクリックします。

  5. アップロードするファイルを選択します。

  6. 「開く」をクリックします。

テーマファイルの名前を変更する

ファイルを右クリックすると、名前を変更できます。ファイルの拡張子は編集または削除しないでください。ファイルの拡張子は、ピリオド . と拡張子の種類で構成されます (例：.liquid、.css)。ファイル名には A～Z、0～9 の文字を使用でき、スペースを含めることはできません。単語は、ダッシュまたはアンダースコアで区切ってください。ファイル名が無効な場合、新しいファイル名は保存されません。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. ファイルを右クリックし、ドロップダウンメニューから 「名前を変更...」 を選択します。

  4. ファイルに新しい名前を入力します。

  5. キーボードの Enter キーを押します。

テーマファイルの削除

テーマ内のどのファイルでも削除できます。削除したテーマファイルは復元できません。

手順:

  1. 管理画面から、[オンラインストア] > [テーマ] の順に移動します。

  2. 横長のメニュー > [コードを編集] をクリックします。

  3. ファイルを右クリックし、ドロップダウンメニューから 「完全に削除」 を選択します。

  4. 「削除」をクリックします。