テーマコードの編集
テーマコードを編集して、オンラインストアに細かい変更を加えることができます。テーマを構成するほとんどのファイルには、Shopifyのテンプレート言語であるLiquidが含まれています。テーマファイルには、HTML、CSS、JSON、JavaScriptも含まれています。HTMLとCSSを理解していて、Liquidについての基本的な知識がある場合のみ、テーマコードを編集してください。
テーマをカスタマイズする前に
テーマをカスタマイズする準備をするには、以下の推奨タスクを実行してください。
- テーマを複製してバックアップコピーを作成します。これにより、変更を破棄して、必要に応じて再度開始しやすくなります。
- 利用可能なサポートのレベルを必ずご確認ください。
- 画像アップロードの要件とベストプラクティスについて確認してください。
テーマコードを編集する
テーマのコードを編集できます。
手順
デスクトップ
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- [...] > [コードを編集] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- [...] > [コードを編集] をクリックします。
Android
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- [...] > [コードを編集] をクリックします。
コードエディタには、左側にテーマファイルのディレクトリーが、右側にファイルを表示し編集するためのスペースが表示されます。
左側のディレクトリーにあるファイルをクリックすると、コードエディタで開きます。複数のファイルを同時に開いて編集できます。変更するファイルには、ファイル名の横に点が表示されます。
変更箇所を常に把握するのに役立ちます。
旧バージョンのテーマにロールバックする
テーマファイルに加えた変更を元に戻す必要がある場合、.liquidファイルと.jsonファイルを、変更を加える前の日時にそれぞれロールバックすることができます。
アセットフォルダー内のファイルを除き、ディレクトリーにある任意のフォルダー内のテーマファイルは元に戻すことができます。theme.scss.liquidファイルやtheme.jsファイルなど、アセットフォルダーには常に最新バージョンのファイルが保存されます。以前に編集したバージョンのファイルは保存されません。アセットフォルダー内のファイルに変更を加える場合は、テーマサポートに連絡するか、Shopify パートナーを雇う必要がある場合があります。
手順
デスクトップ
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[...] ボタンをクリックしてアクションメニューを開き、[コードを編集する] をクリックします。
- テーマファイルのディレクトリーで、最近編集した
.liquidファイルまたは.jsonファイルのいずれかをクリックします。 - コードエディタの画面上部にある [現行] をクリックします。
- ドロップダウンメニューを使って旧バージョンを選択します。日付スタンプを選択すると、保存された時点のバージョンにコードがロールバックされます。
- オプション：[ストアをプレビュー] をクリックして、エラーが修正されたことを確認します。
- 以前のバージョンに戻すには、[保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
- テーマファイルのディレクトリで、最近編集した
.liquidファイルまたは.jsonファイルのいずれかをタップします。 - コードエディタの画面上部にある**[現行]**をタップします。
- ドロップダウンメニューを使って旧バージョンを選択します。日付スタンプを選択すると、保存された時点のバージョンにコードがロールバックされます。
- オプション：[ストアをプレビュー] をタップして、エラーが修正されていることを確認します。
- 旧バージョンに戻るには、[保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- 編集するテーマを見つけ、[...] ボタンをタップしてアクションメニューを開き、[コードを編集する] をタップします。
- テーマファイルのディレクトリで、最近編集した
.liquidファイルまたは.jsonファイルのいずれかをタップします。 - コードエディタの画面上部にある**[現行]**をタップします。
- ドロップダウンメニューを使って旧バージョンを選択します。日付スタンプを選択すると、保存された時点のバージョンにコードがロールバックされます。
- オプション：[ストアをプレビュー] をタップして、エラーが修正されていることを確認します。
- 旧バージョンに戻るには、[保存] をタップします。
テーマチェック
コードエディタには、テーマチェックという機能が用意されています。これは、ライブテーマのエラーを検出するのではなく、コードを作成している段階で即座にフィードバックを提供することでエラーを防ぐのに役立ちます。
コードエディタでは、テーマチェックにより、編集されたコード内の以下のエラーを特定できます。
- スクリプトをブロックし、ストアフロントの処理速度を低下させる可能性のある解析機能
- 翻訳ファイル間の不一致 (翻訳キーが見つからない、ロケールファイルで一致しない翻訳など)
- テンプレートの欠落
エラーはコードの下に赤い線で表示されます。エラーを表示するには、強調表示された行にマウスポインタを合わせます。
テーマコードのカスタマイズに関するチュートリアル
テーマコードのカスタマイズチュートリアルに従って、オンラインストアの変更作業を進めることができます。チュートリアルは、変更するページまたは機能のタイプに基づいて構成されています。
テーマカスタマイズのチュートリアルは、使用するテーマアーキテクチャのバージョンで分かれています。テーマアーキテクチャのバージョンを特定する方法についてはこちらをご覧ください。
カスタマイズに関するヘルプ
テーマの変更に関してサポートが必要な場合は、テーマの開発者にお問い合わせください。
テーマのカスタマイズに関する他のサポートリソースを確認するには、「テーマサポートの追加リソース」を参照してください。