テーマエディタの機能概要

テーマエディタを使用して、テーマのエリア (色など) をカスタマイズしたり、セクションとブロックでテーマのコンテンツを管理したりすることができます。

テーマエディタにアクセスする

管理画面からテーマエディタにアクセスできます。

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

2. 編集するテーマの横にある「テーマを編集」をクリックします。

テーマエディタのレイアウトセクション

テーマエディタには、以下のセクションがあります。

• メニューバーの左側には、セクション、テーマ設定、アプリの埋め込みを切り替えるためのナビゲーションボタンが含まれています。中央にはテーマ名、マーケット、テンプレートのメニューがあり、右側にはカスタマイズのコントロールが含まれています。
• サイドバーには、現在表示しているテンプレートのすべてのコンテンツがツリービューで表示されます。サイドバーからは、セクションとブロック、アプリの埋め込み、設定を管理できます。サイドバーは折りたたむことができます。
• プレビューウィンドウにはテーマが表示され、変更を加えると自動的に更新されます。モバイルプレビューを有効にしたり、プレビューインスペクターを使用したりして、プレビューウィンドウ内でテーマテンプレートのコンテンツを管理できます。

メニューバー

メニューバーには、ナビゲーション、テーマ情報、テーマをカスタマイズするためのコントロールが表示されます。

サイドバーナビゲーション

メニューバーの左側では、サイドバーの次のビューを切り替えることができます。

• : 現在のテンプレートのセクションとブロックを管理します。
• : 色、タイポグラフィ、レイアウトなど、テーマのグローバル設定を管理します。
• : テーマに埋め込まれているアプリを管理します。

サイドバーを非表示にしてテーマをフル幅でプレビューするには、アクティブなボタンをもう一度クリックして選択を解除します。両方のパネルが表示されている場合、アクティブなボタンをクリックすると両方が同時に折りたたまれます。

テーマの詳細、マーケット、テンプレートのメニュー

メニューバーの中央には次の項目があります。

• 「 テーマ名 」とそのステータス。公開済みのテーマには「 公開中 」のステータスラベルが表示されます。未公開のテーマには「 下書き 」のステータスラベルが表示されます。テーマ名をクリックすると、以下のオプションにアクセスできます。
  • [コードを編集する] を使用して、コードエディタを開きます。
  • [デフォルトテーマのコンテンツを編集する] を使用して、テーマのデフォルトの文言を編集します。
  • を使用して、テーマのプレビューを開きます。
  • [ドキュメントを表示] を使用して、テーマのドキュメントを開きます。
  • を使用して、テーマエディタで利用可能なすべてのキーボードショートカットを確認します。
  • [サポートを受ける] を使用して、サポートを受けます。
• さまざまなマーケットに合わせてテーマをプレビューおよびカスタマイズするための、マーケットメニュー。
• テーマ内のさまざまなページテンプレート間を移動するための、テンプレートメニュー。

カスタマイズのショートカット

メニューバーの以下のコントロールを使用して、テーマのカスタマイズや変更の管理を行うことができます。

• Sidekick を有効または無効にして、テーマのカスタマイズに関するサポートを受けます。
• プレビューインスペクターを有効または無効にします。
• モバイル画面でテーマをプレビューするには、 プレビューボタンを切り替えます。
• 元に戻す/やり直すコントロールで、現在のカスタマイズセッションを管理します。
• [保存] ボタンを使用して変更を保存します。

やり直したり元に戻したりできる未保存のカスタマイズがない場合、対応するボタンは無効になります。

サイドバー

現在表示しているテンプレートのすべてのコンテンツが、サイドバーにツリービューで表示されます。サイドバーから、セクションやブロック、テーマ設定を管理できます。メニューバーでアクティブになっているナビゲーションボタンをもう一度クリックしてオフに切り替えると、サイドバーを折りたたむことができます。

テーマには、他のどの設定がアクティブになっているかに応じてサイドバーに表示される条件付き設定が含まれている場合があります。たとえば、動画か画像のどちらかを追加する設定が組み込まれたブロックがテーマにある場合、メディアのタイプとして「画像」を選択した後にのみ表示される条件付き設定として、画像ピッカーや動画リンクが設定されていることがあります。

サイドバーモード

テーマエディタには、画面のすべてのスペースを活用するための2つのモードがあります。

ブラウザのウィンドウが広く画面が大きい場合はダブルサイドバーモードが、ブラウザのウィンドウが狭く画面が小さい場合はシングルサイドバーモードが使用されます。サイドバーのモードによって、エディタで設定パネルが表示される場所が決まります。

ダブルサイドバーモード

ブラウザのウィンドウの幅が 1600 ピクセル以上ある場合、2 つのパネルが表示されます。左側のパネルにはセクションやブロックを含むページ構造が、右側のパネルには選択したセクションやブロックの設定が表示されます。セクションの選択を解除すると、右側のパネルを折りたたむことができます。

大きな画面でテーマエディタをシングルサイドバーモードで表示するには、エディタがスタックされたレイアウトに切り替わるまでブラウザのウィンドウを狭くします。

シングルサイドバーモード

画面が狭い場合、エディタはスタックされたレイアウトを使用します。セクションやブロックをクリックすると、ページ構造が覆われるのではなく、画面の下部から設定パネルがスライドして表示されます。分割線をドラッグしてページ構造と設定の分割を調整し、常に両方が表示されるようにすることができます。

テーマのプレビュー

メニューバーの ボタンをクリックすると、テーマのモバイルレイアウトをプレビューできます。デスクトップのプレビューに戻るには、モバイルボタンをもう一度クリックします。

テーマをフル幅でプレビューするには、アクティブなサイドバーのメニューボタンをクリックしてサイドバーを折りたたみます。両方のパネルが表示されている場合、これを行うと両方が同時に折りたたまれ、ストアフロントをフル幅でプレビューできます。

未保存の変更を元に戻す、またはやり直す

ボタンと ボタンを使用すると、未保存のカスタマイズを元に戻したり、やり直したりできます。変更を保存すると、元に戻したりやり直したりすることはできなくなります。

テーマエディタでキーボードショートカットを使用する

キーボードショートカットを使用すると、テーマエディタでのメニューの移動やアクションの実行ができます。