テーマエディタを使用してオンラインストアをカスタマイズする

テーマエディタを使用すると、色などのテーマの領域をカスタマイズしたり、セクションやブロックを使用してテーマ内のコンテンツを管理したりできます。テーマエディタには以下のセクションがあります。

メニューバーには、テーマに関する詳細情報を検索したり、商品ページなどのテーマ内の別のテンプレートに移動したり、画面サイズの表示を調整したり、カスタマイズアクションを管理したりするためのツールが表示されます。
サイドバーメニューでは、現在サイドバーに表示されているテンプレートのすべてのコンテンツがツリービューで表示されます。サイドバーメニューからセクション、ブロック、設定を管理できます。
プレビューウィンドウにはテーマが表示され、変更を加えると自動的に更新されます。メニューバーでさまざまな表示オプションを選択して、デスクトップまたはモバイルレイアウトでテーマをプレビューできます。プレビューインスペクターを有効にして、プレビューウィンドウでテーマテンプレートのコンテンツを管理することもできます。

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

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

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマの横の [カスタマイズ] をクリックします。

メニューバーには、テーマに関する情報、テーマの詳細やさまざまな領域にアクセスするためのメニュー、そしてテーマをカスタマイズするためのコントロールが含まれています。

メニューバーには、テーマの情報とテーマのカスタマイズを管理するためのボタンが表示されます。

メニューバーには、以下の追加情報とメニューオプションが表示されます。

ボタンを使用して、管理画面に戻ります。
テーマの名前を確認する。
テーマのステータスを確認する。公開済みのテーマには、ライブステータスラベルが表示されます。未公開テーマには下書きステータスラベルが表示されます。
メニューを使って、以下の追加オプションにアクセスします。 - **[コードの編集]**を使用して、コードエディタを開きます。 - [デフォルトのテーマコンテンツを編集] を使用して、テーマのデフォルトの文言を編集します。 - を使用して、テーマのプレビューを開きます。 - [ドキュメントの表示] を使用して、テーマのドキュメントを開きます。 - を使用して、テーマエディタで利用できるすべてのキーボードショートカットを確認します。 - [サポートを受ける]を使用するとサポートを受けることができます。

以下のメニューを使って、さまざまなテンプレートやマーケットレイアウトにアクセスできます。

[マーケット] メニュー
[テンプレート] メニュー

メニューバーの以下のコントロールを使用してテーマをカスタマイズできます。

Sidekickを有効または無効にする。
プレビューインスペクターを有効または無効にする。
画面サイズコントロールを使用して画面サイズを変更する。
元に戻すコントロールとやり直しコントロールを使用して、現在のカスタマイズセッションを管理する。
[保存] ボタンを使って、変更を保存します。

ドキュメントを表示する、サポートを受ける、テーマバージョンを確認する

テーマのバージョンや開発者情報、テーマのドキュメントやサポート情報へのリンクなど利用可能な情報は、メニューバーのメニューで確認できます。

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

テーマの変更に関してサポートが必要な場合は、テーマの開発者にお問い合わせください。

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

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

キーボードショートカットを使用して、テーマエディタ内を移動し、アクションを実行できます。

WindowsとmacOSの両方のデバイスで使用できるテーマエディタのキーボードショートカットのリスト。
カテゴリー	アクション	Windowsのショートカット	macOSのショートカット
一般	元に戻す	`CTRL` + `Z`	`⌘` + `Z`
	やり直す	`CTRL` + `Y`	`⌘` + `Y`
	保存	`CTRL` + `S`	`⌘` + `⇧` + `S`
	すべてのショートカットを見る	`CTRL` + `/`	`⌘` + `/`
ツール	プレビューインスペクター	`CTRL` + `SHIFT` + `\|`	`⌘` + `⇧` + `\|`
	プレビューモード	`⊞` + `CTRL` + `\|`	`⌘` + `⌃` + `\|`
	Sidekick	`CTRL` + `.`	`⌘` + `.`
メニュー	セクション	`⊞` + `CTRL` + `Z`	`⌘` + `⌃` + `1`
	テーマ設定	`⊞` + `CTRL` + `Z`	`⌘` + `⌃` + `2`
	埋め込みアプリ	`⊞` + `CTRL` + `Z`	`⌘` + `⌃` + `3`
セクションとブロック	表示・非表示	`CTRL` + `SHIFT` + `H`	`⌘` + `⇧` + `H`
	削除	`SHIFT` + `⭠`	`⇧` + `⌫`
	前を選択	`SHIFT` + `←`	`⇧` + `▲`
	次を選択	`SHIFT` + `→`	`⇧` + `▼`
	選択された要素を開く	`SHIFT` + `ENTER`	`⇧` + `▼`
	すべてのセクションを展開する	`CTRL` + `SHIFT` + `O`	`⌘` + `⇧` + `O`
	すべてのセクションを折りたたむ	`CTRL` + `SHIFT` + `P`	`⌘` + `⇧` + `P`

テンプレート

テーマエディタのトップバーにあるページセレクターから、すべてのテーマのテンプレートにアクセスできます。

また、Online Store 2.0のテーマを使用している場合、[新しいテンプレート] オプションをクリックして、ページセレクターから直接新しいテンプレートを作成できるようになりました。

特定のリソースでテンプレートをプレビューする

ストア内の互換性のあるリソースでテンプレートがどのように表示されるかを確認できます。たとえば、商品テンプレートを表示している場合、ストア内のどの商品でもテストすることができます。

管理画面で、リソースにテンプレートを割り当てる必要があります。

ページセレクター、 [セクションを追加] ツール、[ブロックを追加] ツール、[埋め込みアプリ] のそれぞれの [検索] バーを使用して、テンプレートおよびリソースを検索することもできます。

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマの横の [カスタマイズ] をクリックします。
[テンプレート] メニューから、プレビューするテンプレートを選択します。
サイドバーメニューの [プレビュー] セクションで、[変更] をクリックします。
[選択] メニューから、プレビューするリソースを選択します。

プレビューインスペクター

プレビューインスペクターを使用すると、プレビューウィンドウからセクションやブロックに直接移動し、該当する設定をより速く、より直感的に見つけることができます。プレビューインスペクターを使用すると、プレビューウィンドウから直接セクションやブロックを並べ替えたり、非表示にしたりできます。

プレビューインスペクターは、すべての無料Shopifyテーマで利用でき、デフォルトで有効になっています。ボタンをクリックして、編集セッション中にプレビューインスペクタをオンまたはオフにすることができます。

プレビューインスペクターが有効になっていると、アウトライン化された要素をクリックして、対応する設定を開くことができます。モバイルデバイス上では、プレビューインスペクターが有効になっていると、任意の要素をクリックして対応する設定を選択することができます。この選択した設定を使用して、下部のシートを開いて編集することができます。

[テキスト付き画像] セクションが選択され、対応する設定がサイドバーに読み込まれたプレビューインスペクター

プレビューインスペクターでは、プレビューウィンドウでクリックしたセクションやブロックの周りに、以下の2種類の罫線のどちらかが表示されます。

青い実線はアクティブなセクションを示しています。対応する設定は、サイドバーメニューで灰色で強調表示されています。
青い点線は、セクションに関連付けられたブロックを示しています。プレビューウィンドウでアイテムをクリックすると、ブロックやセクションの設定を開くことができます。

プレビューウィンドウでウェブサイトのいずれかの部分をクリックすると、サイドバーに対応する設定が読み込まれます。モバイルデバイス上では、2回タップすると、お客様のようにサイトを操作することができます。

プレビューインスペクターにセクションやブロックを追加する

プレビューインスペクターを使用すると、プレビューウィンドウから直接テーマにセクションとブロックを追加できます。Shopifyアプリからプレビューインスペクターを使用するには、セクションを長押ししてセクションを管理します。

プレビューインスペクターの [セクションを追加] および [ブロックを追加] ボタンの説明。
ツール	説明
セクションを追加	[セクションを追加] ボタンは、選択したセクションの上部および下部に表示されます。[セクションを追加] ボタンをクリックして、選択したセクションの上部または下部に新しいセクションを挿入します。
ブロックを追加	[ブロックを追加] ボタンは、既存のブロックにカーソルを合わせると表示されます。ブロックを追加するには、ボタンにカーソルを移動します。選択したセクションに追加できるテーマやアプリブロックがポップアップメニューに表示されます。追加するブロックをクリックします。右側のサイドバーに新しいブロックの設定ウィンドウが読み込まれます。

プレビューインスペクターのツール

プレビューインスペクターを使用すると、テーマエディタでセクションやブロックを移動、非表示、複製できます。

利用可能なプレビューインスペクターツールのリスト (セクションやブロックの移動、複製、非表示、削除など)。
ツール	アクション	説明
	前の位置に戻る	このボタンをクリックすると、プレビューインスペクターの矢印のアイコンを使用して、セクションやブロックを下に動かしたり、上に動かしたりできます。選択したセクションがページの最上部にある場合、ボタンはグレー表示になります。同様に、セクションがページの最下部にある場合、ボタンは使用できなくなります。
	次の位置に進む
	セクションを複製またはブロック	このボタンをクリックして、セクションまたはブロックとそのコンテンツを複製します。
	セクションやブロックを非表示にする	セクションまたはブロックを非表示にするには、このボタンをクリックします。セクションまたはブロックが非表示になっている場合、プレビューインスペクターから非表示を解除することはできません。メニューバーでボタンをクリックするか、セクションまたはブロックの横にあるサイドバーメニューのボタンをクリックすると、非表示を解除できます。
	セクションやブロックを削除する	このボタンは、プレビューインスペクタで選択したセクションまたはブロックを削除します。

テーマエディタで異なる画面サイズを表示する

テーマエディタでさまざまな画面サイズを表示できます。デスクトップ、モバイル、またはフルスクリーンのサイズにテーマエディタを切り替えて、テーマの編集が異なる画面サイズに最適化されているか確認したり、デスクトップとモバイルの代替レイアウトをチェックしたりできます。画面サイズを変更するには、メニューバーの以下のボタンをクリックします。

デスクトップの場合には、ボタンをクリックします。
モバイルの場合には、ボタンをクリックします。
全画面表示の場合には、ボタンをクリックします。

操作を元に戻す、やり直す

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

やり直し、元に戻す、またはその両方を行う未保存のカスタマイズがない場合、対応するボタンはグレーアウトします。

テーマエディタのメニューバーにある [元に戻す] ボタンと [やり直し] ボタン。

サイドバーメニューでは、現在サイドバーに表示されているテンプレートのすべてのコンテンツがツリービューで表示されます。サイドバーメニューから、セクション、ブロック、設定を管理できます。

サイドバーモード

テーマエディタには、画面をフルに活用できる2つのモードがあります。

[ダブルサイドバーモード] は、幅の広いブラウザのウィンドウと大画面用で、[シングルサイドバーモード] は、幅の狭いブラウザのウィンドウと小画面用です。サイドバーモードによって、エディタ内の設定パネルの表示位置が決まります。

ダブルサイドバーモード

1600ピクセルよりも広い幅の画面で、ブラウザのウィンドウが完全に展開されている場合、またはブラウザのウィンドウが少なくとも1600ピクセルの幅まで展開されている場合は、2つのサイドバーが表示されます。左側のサイドバーにはメニューパネル、右側のサイドバーには設定パネルが表示されます。

大きな画面上で、シングルサイドバーモードでテーマエディタを表示するには、設定パネルがメニューサイドバーの上部に移動するか、消えるまで、ブラウザのウィンドウを狭くしてください。

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

幅の狭いブラウザでは、テーマプレビューのスペースを確保するために、サイドバーを1つしか表示できません。セクションやブロックを編集するためにクリックすると、サイドバーのメニューパネル上部で設定パネルが開きます。

セクションとブロック

セクションとブロックのリストでは、同一ページ上にあるセクションのすべてのブロックがデフォルトで表示されます。

ヘッダーまたはフッターを構成するセクションは、デフォルトでは折りたたまれています。セクション名の横にあるボタンをクリックすると、そのコンテンツが表示されます。

セクショングループ

セクションは、テーマ内のすべてのページテンプレートについて、以下の領域に分かれています。

ヘッダー領域には、ヘッダー、告知バー、アプリまたはカスタムLiquidが含まれます。
テンプレート領域には、ページの本文を構成するセクションが含まれます。たとえば、テンプレートセクションには、ブログ記事、コラージュ、コレクションリスト、カスタムLiquidを含めることができます。
フッター領域には、フッター、メール登録、アプリまたはカスタムLiquidが含まれます。

ヘッダーとフッターは、オンラインストアのすべてのページで共有されます。たとえば、ヘッダーにカスタムLiquidブロックを追加すると、そのカスタムLiquidはすべての商品ページ、ホームページ、その他のページに表示されます。

セクションとブロックを展開および折りたたむ

ボタンを使用すると、セクションノードを展開してブロックを表示できます。また、ボタンを使用すると、セクションノードを折りたたんでブロックを非表示にできます。任意のセクションやブロックをクリックすると、その設定が表示されます。

セクションやブロックを移動する

セクションやブロックは、ボタンを使用して、ページのある領域から別の領域に移動することができます。その場合は、セクションやブロックをクリックしてドラッグし、移動可能な別の場所にドロップします。

許可されていない場所にセクションまたはブロックを移そうとすると、セクションまたはブロックは元の場所に戻されます。

セクションとブロックを削除

セクションまたはブロックをテンプレートから削除するには、以下の2つの方法があります。

セクション名の横にカーソルを移動し、次にボタンをクリックします：
セクション名をクリックし、次にセクション設定の詳細で [セクションを削除] をクリックします：

手順

管理画面から [オンラインストア] > [テーマ] に移動します。
編集するテーマの横の [カスタマイズ] をクリックします。
テーマエディタのサイドバーで、削除するセクションまたはブロックをクリックします。
[セクションを削除] または [ブロックを削除] をクリックします。
[保存] をクリックします。公開済みのテーマを編集している場合、[公開する] をクリックして、変更を保存し、ストア内でその変更を公開します。

セクションとブロックを非表示にする

ボタンを使用して、任意のセクションやブロックを非表示にすることができます：