テーマコードの編集

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

テーマコードを自分で編集すると、自動アップグレードの対象外となってしまう場合があります。HTMLやLiquidの設定、あるいはShopifyアプリを使用して必要な変更を行うことができない場合に限り、テーマコードを編集します。

テーマをカスタマイズする前に

テーマをカスタマイズする前に、以下のタスクを実行することをおすすめします。

  • テーマを複製してバックアップコピーを作成します。これにより、変更を破棄して、必要に応じて再度開始しやすくなります。
  • 利用可能なサポートのレベルを必ずご確認ください。
  • 画像アップロードの要件とベストプラクティスについて確認してください。

テーマコードの編集

テーマのコードを編集できます。

手順:

  1. [アクション] > [コードを編集] をクリックします。

コードエディタには、左側にテーマファイルのディレクトリーが、右側にファイルを表示し編集するためのスペースが表示されます。

展開アイコンをクリックすると、コードエディタを展開して画面全体に表示させることができます。

展開アイコン

折りたたみアイコンをクリックすると、ページを通常に戻すことができます。

折りたたみアイコン

左側のディレクトリーにあるファイルをクリックすると、コードエディタで開きます。一度に複数のファイルを開いて編集できます。変更するファイルには、ファイル名の横に点が表示されます。

変更されたファイルの隣に紫色の点が表示されるテーマファイルのディレクトリー

変更箇所を常に把握するのに役立ちます。

テーマの旧バージョンにロールバックする

テーマファイルを変更して、ファイルを元に戻す必要がある場合、.liquidファイルを変更する前の日時に個別にロールバックすることができます。

  1. [テンプレート] ヘッダーの下で、最近編集した.liquidファイルのいずれかをクリックします。

    liquidファイルを開く

  2. .liquidのファイル名の横にある [旧バージョン] をクリックします。

    旧バージョン

  3. ドロップダウンメニューをクリックして旧バージョンを選択します。日付スタンプをクリックすると、コードは保存されているそのバージョンにロールバックされます。

    ロールバックの例

  4. オプション: [プレビュー] をクリックして、エラーが修正されたかどうか確認します。

ダークモード

コードエディタがフルスクリーンに展開されている間は、ページの下部にあるボタンをクリックして、ライトダークの間でエディタの配色を切り替えることができます。

ダークのエディタを使用するメリットについては、Shopify パートナーブログの「ダークサイドの力: ダークなユーザーインターフェイス」を参照してください。

テーマコードのカスタマイズチュートリアル

テーマコードのカスタマイズチュートリアルに従って、オンラインストアの変更作業を進めることができます。チュートリアルは、変更するページまたは機能のタイプに基づいて構成されています。

テーマカスタマイズのチュートリアルは、使用するテーマアーキテクチャのバージョンで分かれています。テーマアーキテクチャのバージョンを特定する方法についてはこちらをご覧ください。

カスタマイズに関するヘルプ

テーマの変更でお困りの場合は、テーマの開発者にサポートを依頼してください。

テーマのカスタマイズに関する他のサポートリソースを確認するには、「テーマサポートの追加リソース」を参照してください。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す