テーマコードの編集
テーマコードを編集して、オンラインストアに細かい変更を加えることができます。テーマを構成するほとんどのファイルには、Shopifyのテンプレート言語であるLiquidが含まれています。テーマファイルには、HTML、CSS、JavaScriptも含まれています。HTMLとCSSを把握していて、Liquidについての基本的な知識がある場合のみ、テーマコードを編集してください。
テーマをカスタマイズする前に
テーマをカスタマイズする前に、以下のタスクを実行することをおすすめします。
- テーマを複製してバックアップコピーを作成します。これにより、変更を破棄して、必要に応じて再度開始しやすくなります。
- 利用可能なサポートのレベルを必ずご確認ください。
- 画像アップロードの要件とベストプラクティスについて確認してください。
テーマコードの編集
テーマのコードを編集できます。
手順:
- 管理画面から [オンラインストア] > [テーマ] の順に移動します。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- Shopifyアプリで [ストア] をタップします。
- [販売チャネル] セクションで、[オンラインストア] をタップします。
- [テーマを管理する] をタップします。
- [アクション] > [コードを編集] をクリックします。
コードエディタには、左側にテーマファイルのディレクトリーが、右側にファイルを表示し編集するためのスペースが表示されます。
展開アイコンをクリックすると、コードエディタを展開して画面全体に表示させることができます。
折りたたみアイコンをクリックすると、ページを通常に戻すことができます。
左側のディレクトリーにあるファイルをクリックすると、コードエディタで開きます。一度に複数のファイルを開いて編集できます。変更するファイルには、ファイル名の横に点が表示されます。
変更箇所を常に把握するのに役立ちます。
[保存] をクリックした後にファイルへの変更を元に戻したい場合は、ファイルを開き、[旧バージョン] をクリックします。ドロップダウンメニューには、作成した各保存の日時が表示されます。元に戻すバージョンを選択し、[保存] をクリックします。
コードエディタがフルスクリーンに展開されている間は、ページの下部にあるボタンをクリックして、ライトとダークの間でエディタのカラースキームを切り替えることができます。
ダークのエディタを使用するメリットについては、Shopify パートナーブログの「ダークサイドの力: ダークなユーザーインターフェイス」を参照してください。
テーマコードのカスタマイズチュートリアル
テーマコードのカスタマイズチュートリアルに従って、オンラインストアの変更作業を進めることができます。チュートリアルは、変更するページまたは機能のタイプに基づいて構成されています。
カスタマイズに関するヘルプ
テーマの変更でお困りの場合は、テーマの開発者にサポートを依頼してください。
テーマのカスタマイズに関する他のサポートリソースを確認するには、「テーマサポートの追加リソース」を参照してください。