テーマエディタの更新

Shopifyのテーマエディタは、よりスピーディ、パワフルで、より使いやすくなるように再構築されました。

新しいテーマエディタを利用するために何らかの操作を行う必要はありません。ストアで新しいテーマエディタにアクセスできるようになると、最新のテーマエディタ機能を自動的に取得できます。

この更新により、以下に概説する機能へのアクセスが可能になります。これにはUniteで発表されたOnline Store 2.0の他の機能は含まれていません。それらの機能は、数か月後にリリースされるOnline Store 2.0のテーマにて公開されます。

サイドバーの機能拡張

新しいテーマエディタでは、サイドバーのデザインが一新されました。

新しいエディタでは、現在サイドバーに表示されているテンプレートのすべてのコンテンツが、ツリービューで表示されるようになりました。セクションをクリックしてブロックや設定にアクセスする代わりに、展開アイコン▸を使用してセクションノードを展開しブロックを表示したり、折りたたみアイコン▾を使用してセクションノードを折りたたみブロックを非表示にしたりすることができます。任意のセクションやブロックをクリックすると、その設定が表示されます。

サイドバーモード

新しいエディタには、画面をフルに活用できる2つのモードが用意されています。

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

ダブルサイドバーモード

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

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

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

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

セクションとブロック

セクションとブロックのリストでは、同一ページ上でセクションのすべてのブロックを確認できるようにデフォルト設定されました。以前のテーマエディタでは、ブロックを表示するためにはセクションを選択する必要がありました。

ヘッダーやフッターを構成するセクションは、デフォルトでは折りたたまれていますが、セクション名の横にある展開アイコン▸をクリックすると、それらのセクションを表示できます。

ヒント: セクションの設定が見当たらない場合は、そのセクションのブロックを確認してみてください。

セクションを削除する

各項目の設定画面で、テンプレートからセクションまたはブロックを削除できるようになりました。[セクションを削除] ボタンはセクション設定の下部に表示されます。

手順:

1. テーマエディタのサイドバーで、削除するセクションまたはブロックをクリックします。
2. [セクションを削除] または [ブロックを削除] をクリックします。
3. [保存] をクリックします。公開済みのテーマを編集している場合、[公開] をクリックして変更を保存し、ストアで公開します。

ブロックを非表示にする

目のアイコンを使用して、セクションやブロックを非表示にできるようになりました。

テンプレート

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

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

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

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

メモ

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

ヒント: ページセレクターの [検索] バーを使用して、テンプレートとリソースを検索することもできます。

手順:

1. テーマエディタのページセレクターから、プレビューするテンプレートを選択します。
2. メニューパネルの [プレビュー] セクションで、[変更] をクリックします。
3. [選択] メニューから、プレビューするリソースを選択します。

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

[元に戻す] ボタンと [やり直す] ボタンは、テーマエディタの右上に移動しました。

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

テーマのドキュメントとサポート情報へのリンクは、メニューバーの [詳細] ⋯メニューに移動されました。このメニューでは、テーマバージョンと作成者情報を確認することもできます。

以前、この情報には、[テーマアクション] メニューからアクセスできました。