テーマの編集

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

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

テーマをカスタマイズする前に、以下のタスクを実行することをおすすめします。

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

テーマエディター

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

セクションを展開したり折りたたんだりしてブロックを表示する

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

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

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

ホームバーの切り替えでプレビューインスペクターをオンまたはオフにします

プレビューインスペクターが有効になっていると、アウトライン化された要素をクリックして、対応する設定を開くことができます。

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

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

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

プレビューウィンドウでウェブサイトのいずれかの部分をクリックすると、サイドバーに対応する設定が読み込まれます。

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

プレビューインスペクターの使用中に、プレビューウィンドウからテーマにセクションやブロックを直接追加できます。

プレビューインスペクターの [セクションを追加] オプション

プレビューインスペクターの [ブロックを追加] オプション

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

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

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

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

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

サイドバーモード

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

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

ダブルサイドバーモード

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

ダブルサイドバーモードでは、設定パネルが画面の右側に表示されます

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

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

シングルサイドバーモードでは、設定パネルがメニューパネルのオーバーレイとして表示されます

セクションとブロック

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

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

セクションを削除する

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

[セクションを削除] ボタンを使用してセクションを削除する

手順:

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

ブロックを非表示にする

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

[セクションを削除] ボタンを使用してセクションを削除する

テンプレート

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

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

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

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

手順:

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

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

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

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

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

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

[詳細] ボタンを使用して、テーマ情報にアクセスします。

ヒント: Shopifyの無料テーマを使用している場合は、Shopifyの無料のテーマをチェックして、使用中のテーマ名をクリックすることで、セクションと設定の詳細を確認できます。

有料テーマのセクションと設定の詳細については、テーマのドキュメントを参照してください。

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

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

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

Shopifyで販売を開始する準備はできていますか?

無料体験を試す