テーマを編集する

注目のリンク

1. テーマを編集する
2. テーマエディターに関するShopifyドキュメント
3. テーマを複製する
4. テーマサポートに関するShopifyドキュメント
5. 画像をアップロードする
6. テーマ
7. コードエディター
8. テーマのデフォルト文言を編集する
9. テーマのプレビュー
10. テーマドキュメント

役立つ動画

Shopify Academy動画：ストアをカスタマイズする

Shopify Academy動画：ストアをカスタマイズする

Shopifyのテーマエディターを使用すると、コードを編集せずにAlignテーマのコンテンツ、レイアウト、タイポグラフィ、カラーを調整できます。セクションと設定を使用して、ライブプレビューでストアをカスタマイズできます。

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

大きな変更を加える前に準備しておくと、安心して試すことができます。

1. テーマを複製すると、バックアップを作成できます。必要に応じて変更を破棄し、コピーからやり直せます。
2. 利用可能なサポートレベルを確認します。
3. 画像のアップロードに関する要件とベストプラクティスを確認します。

ヒント

公開中のテーマを編集する場合を含め、大きなレイアウトまたはコンテンツの変更を加える前にAlignを複製してください。

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

テーマエディターには、表示中のテンプレート内のコンテンツがツリービューで表示されます。セクションまたはブロックを選択すると、その設定が開きます。▸を使用してセクションを展開し、▾を使用して折りたたみます。

1. Shopify管理画面から、Online Store > Themesの順に移動します。
2. 編集するAlignテーマの横にあるCustomizeをクリックします。

メニューバーを使用する

メニューバーには、テーマ情報、ナビゲーション、編集ツール、保存コントロールが表示されます。

メニューバーを使用して、以下の操作を行えます。

1. Shopify管理画面に戻り、テーマ名とステータスを確認します。公開中のテーマにはLive、未公開のテーマにはDraftと表示されます。

2. アクションメニューを開き、以下の操作を行います。

   • Edit codeを使用して、コードエディターを開きます。
   • Edit default theme contentを使用して、テーマのデフォルト文言を編集することができます。
   • テーマのプレビューを開きます。
   • View documentationを使用して、テーマのドキュメントを開きます。
   • 利用可能なキーボードショートカットを確認します。
   • Get supportを使用して、サポートを受けることができます。

3. マーケットとテンプレートを切り替えます。

4. Sidekickまたはプレビューインスペクターをオンまたはオフにします。

5. 画面サイズコントロールでプレビューを変更し、元に戻す／やり直しコントロールを使用して変更を保存します。

ドキュメント、サポート、テーマの詳細を表示する

メニューバーのメニューを開くと、バージョンや開発者情報などのテーマの詳細を表示できます。同じメニューから、テーマのドキュメントとサポート情報へのリンクを利用できます。

カスタマイズについてサポートを受ける

Alignの使用またはカスタマイズについては、Company XYZのドキュメントとCompany XYZサポートへのお問い合わせから始めてください。Shopify管理画面、請求、アカウント、プラットフォームに関する質問については、Shopifyのサポートオプションを利用してください。また、テーマの開発者にサポートを依頼する方法やテーマサポートに関するその他のリソースも確認できます。

キーボードショートカットを使用する

キーボードショートカットを使用すると、テーマエディターでよく行うナビゲーションや編集作業を効率化できます。

カテゴリー	操作	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

テンプレートを選択してプレビューする

上部バーのページセレクターを使用して、Alignテーマのテンプレートにアクセスします。

互換性のあるテーマでは、ページセレクターからNew templateを選択して、テンプレートを直接作成できます。

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

ストア内の一致する任意のリソースを使用して、互換性のあるテンプレートをプレビューできます。たとえば、異なる商品で商品テンプレートをプレビューして、コンテンツの表示を確認できます。Shopify管理画面でテンプレートをリソースに割り当てる必要があります。

ページセレクターのSearchバー、Add section、Add block、またはApp embedsからテンプレートとリソースを検索できます。

1. Shopify管理画面から、Online Store > Themesの順に移動します。
2. 編集するAlignテーマの横にあるCustomizeをクリックします。
3. テンプレートメニューから、プレビューするテンプレートを選択します。
4. サイドバーメニューのPreviewセクションで、Changeをクリックします。
5. Selectメニューから、プレビューするリソースを選択します。

プレビューインスペクターを使用する

プレビューインスペクターでは、プレビュー内でセクションやブロックを直接選択できるため、設定をすばやく見つけられます。プレビューウィンドウから、セクションやブロックの並べ替え、非表示、複製も行えます。

プレビューインスペクターが有効なときに、枠線で囲まれた要素を選択すると設定が開きます。モバイルデバイスでは、要素を選択して下部シートを開き、その設定を編集します。

枠線は選択内容を示します。

1. 青い実線はアクティブなセクションを示します。その設定はサイドバーでグレーにハイライトされます。
2. 青い点線は、選択したセクションに関連付けられたブロックを示します。選択すると、ブロックまたはセクションの設定が開きます。

プレビュー内の領域を選択すると、その設定がサイドバーに読み込まれます。モバイルデバイスでは、2回タップすると顧客と同じようにサイトを操作できます。

プレビューからセクションとブロックを追加する

プレビューインスペクターからセクションやブロックを直接追加できます。Shopifyアプリでは、セクションを長押しして管理します。

ツール	Description
Add section	選択したセクションの上と下にAdd sectionボタンが表示されます。選択すると、現在のセクションの上または下にセクションが挿入されます。
Add block	ブロックにカーソルを合わせるとAdd blockボタンが表示されます。ボタンにカーソルを移動し、利用可能なテーマまたはアプリのブロックを選択して、右側のサイドバーで新しいブロックを編集します。

プレビューから項目を管理する

プレビューインスペクターを使用して、セクションやブロックの移動、非表示、複製、削除を行います。

異なる画面サイズを確認する

プレビューをデスクトップ、モバイル、全画面のサイズに切り替えて、変更が各レイアウトでどのように機能するかを確認します。メニューバーの画面サイズボタンを使用して、デスクトップ、モバイル、または全画面を選択します。

変更を元に戻す／やり直す

undoボタンとredoボタンを使用して、保存していないカスタマイズを元に戻したり復元したりします。保存後は、その変更を元に戻したりやり直したりできません。元に戻す、またはやり直す変更がない場合、ボタンはグレー表示されます。

サイドバーを操作する

サイドバーには、現在のテンプレートのコンテンツがツリービューで表示されます。セクション、ブロック、およびその設定の管理に使用します。

サイドバーのモード

エディターでは、利用可能な画面幅に応じて1つまたは2つのサイドバーが使用されます。

1. 2つのサイドバーモードは、幅の広い画面で使用されます。左側にナビゲーションパネル、右側に設定パネルが表示されます。
2. 1つのサイドバーモードは、プレビュー用のスペースを広く確保するため、幅の狭いブラウザウィンドウで使用されます。セクションまたはブロックを選択すると、設定パネルがナビゲーションパネルの上に開きます。

2つのサイドバーモード

画面と完全に展開されたブラウザウィンドウの幅が1,600ピクセル以上の場合、エディターには2つのサイドバーが表示されます。

大きな画面で1つのサイドバーモードを使用するには、設定パネルがナビゲーションサイドバーに重なるか、そこから消えるまでブラウザウィンドウの幅を狭くします。

1つのサイドバーモード

幅の狭いブラウザウィンドウでは、プレビュー用のスペースを広く確保するため、エディターに1つのサイドバーが表示されます。セクションまたはブロックを選択すると、ナビゲーションパネルの上に設定が開きます。

セクションとブロックを管理する

サイドバーには、現在のページのセクションとブロックが一覧表示されます。ブロックはデフォルトで表示され、ヘッダーとフッターのセクションはデフォルトで折りたたまれています。

セクショングループを理解する

各ページテンプレートでは、セクションが次の領域に整理されます。

1. ヘッダーには、ヘッダー、お知らせバー、アプリ、カスタムLiquidが含まれます。
2. テンプレートには、ブログ記事、コラージュ、コレクションリスト、カスタムLiquidなど、ページのメインコンテンツが含まれます。
3. フッターには、フッター、メール登録、アプリが含まれます。

ヘッダーとフッターの変更は、ストア内のすべてのページに適用されます。たとえば、ヘッダーに追加したカスタムLiquidは、商品ページ、ホームページ、その他のページに表示されます。

項目を展開または折りたたむ

セクション名の横にあるボタンを選択すると、コンテンツの表示と非表示を切り替えられます。セクションまたはブロックを選択すると、その設定が開きます。

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

:::ハンドルを使用してセクションまたはブロックをドラッグし、利用可能な場所にドロップします。その項目を配置できない場所の場合は、元の位置に戻ります。

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

セクションまたはブロックは、次のいずれかの方法で削除します。

1. セクション名の横にカーソルを合わせ、削除ボタンを選択します。

   

2. セクションを選択し、設定でRemove sectionを選択します。

   

サイドバーから項目を削除するには、次の手順を実行します。

1. Shopify管理画面から、Online Store > Themesの順に移動します。
2. 編集するAlignテーマの横にあるCustomizeをクリックします。
3. サイドバーで、削除するセクションまたはブロックを選択します。
4. Remove sectionまたはRemove blockをクリックします。
5. Saveをクリックします。公開中のテーマを編集している場合は、Publishをクリックして変更を保存し、ストアで公開します。

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

👁️ボタンを選択すると、セクションまたはブロックが非表示になります。

使用上の注意

1. 開始点を保護する。 大きな変更を試す前に、テーマの複製を作成します。
2. 関連するコンテンツをプレビューする。 テンプレートで表示する商品、コレクション、その他のリソースを使用してテンプレートをテストします。
3. レスポンシブレイアウトを確認する。 保存または公開する前に、デスクトップとモバイルの両方のプレビューを確認します。
4. 共有領域を忘れない。 ヘッダーまたはフッターへの変更は、ストア内の複数のページに影響します。
5. 意図的に保存する。 元に戻す／やり直す機能は、保存していない変更に対してのみ使用できます。