テーマの編集

テーマを編集して、オンラインストアのコンテンツ、レイアウト、タイポグラフィー、色をカスタマイズすることができます。各テーマには、コードを編集せずにストアの見た目と雰囲気を変更できるセクションおよび設定が用意されています。

テーマをカスタマイズする前に

テーマをカスタマイズする準備をするには、以下の推奨タスクを実行してください。

テーマを複製してバックアップコピーを作成します。これにより、変更を破棄して、必要に応じて再度開始しやすくなります。
利用可能なサポートのレベルを必ずご確認ください。
画像アップロードの要件とベストプラクティスについて確認してください。

テーマエディタ

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

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

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

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

プレビューインスペクターは、テーマエディタの新しい機能です。プレビューウィンドウからセクションやブロックに直接移動し、対応する設定をより速く、より直感的に見つけることができます。プレビューインスペクターを使用すると、プレビューウィンドウでセクションやブロックを並び替えたり、非表示にしたり、削除したりできます。

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

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

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

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

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

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

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

プレビューインスペクターの使用中に、プレビューウィンドウからテーマにセクションやブロックを直接追加できます。モバイルでは、下部のシートの編集モードを使用して、セクションの追加、複製、非表示、移動、削除を行うことができます。

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

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

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

利用可能なプレビューインスペクターツールのリスト (セクションやブロックの移動、複製、非表示、削除など)。
ツール	説明
上/下に動かす	プレビューインスペクターの矢印のアイコンを使用して、セクションやブロックを下に動かしたり、上に動かしたりできます。選択したセクションがページの最上部にある場合、[上に動かす] ボタンはグレーアウトされます。同様に、セクションがページの最下部にある場合、[下に動かす] ボタンは使用できません。
セクションを複製またはブロック	コピーアイコンをクリックし、セクションまたはブロックとその内容を複製します。
セクションやブロックを非表示にする	目のアイコンをクリックして、セクションやブロックを非表示にできます。セクションやブロックが非表示に設定されている場合、プレビューインスペクターでその設定を解除することはできません。ホーム画面のバーの [元に戻す] ボタンをクリックするか、設定パネルを閉じてテーマエディタのホームに戻ると、サイドバーには非表示のセクションやブロックが目の閉じたアイコンと共に一覧表示されています。このアイコンをクリックしてセクションやブロックの非表示を解除します。
セクションやブロックを削除する	ゴミ箱のアイコンをクリックして、プレビューインスペクターで選択したセクションやブロックを削除できます。

サイドバーモード

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

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

ダブルサイドバーモード

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

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

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

セクショングループ

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

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

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

セクションとブロック

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

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

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

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

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

セクションを削除する

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

手順：

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

ブロックを非表示にする

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

テンプレート

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

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

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

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

手順：

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

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

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

テーマエディタのトップバーにある [元に戻す] ボタンと [やり直す] ボタン。

カスタムデータのインライン編集

カスタムデータを使用してメタオブジェクトページを作成する場合、変更を加えるのに管理画面に移動することなく、メタフィールドとメタオブジェクトをインラインで直接編集できます。インライン編集は、画像、ビデオ、色、商品、ページ、コレクション、およびテキストのメタフィールドに対応しています。

手順：

メタオブジェクトに参照されているテーマで互換性のある設定を選択します。
設定パネルでメタオブジェクトの内容のメタフィールド値を選択して編集します。
ランディングページの情報は、作業内容を保存すると自動的に更新されます。

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

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

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

テーマの変更でお困りの場合は、テーマの開発者にサポートを依頼してください。

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

このセクションにあるもの

テーマエディタでコンテンツを自動的に生成する