テンプレート

テンプレートとは、オンラインストアに統一感のある見た目と雰囲気をもたらすよう設定されたセクションのコレクションのことです。テンプレートで利用可能なセクションは、ご利用のテーマによって異なります。テーマエディタでは、どのテンプレートがどのページに適用されているかを確認し、それらを編集してお客様に表示する情報をカスタマイズできます。

テンプレートを編集すると、そのページテンプレートを使用しているすべてのページに、その変更が適用されます。たとえば、コレクションテンプレートにニュースレターの登録フォームを追加すると、デフォルトのコレクションテンプレートを使用するすべてのコレクションページでは、ニュースレターの登録フォームが表示されるようになります。

合計で最大1000個のテンプレートを使用できます。

テンプレートを編集する

テンプレートを編集してオンラインストアにセクションを追加することができます。一部のセクションにはカスタマイズ可能なブロックがありますが、すべてのセクションまたはブロックの設定やコンテンツが編集可能というわけではありません。テンプレートを編集すると、その変更内容はテーマのプレビューウィンドウにリアルタイムで表示されます。

メモ

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

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. 編集するテンプレートを [テンプレート] ドロップダウンメニューから選択します。
4. [+ セクションを追加] をクリックして、テンプレートの新しいセクションを選択します。
5. 新しいセクションをクリックして、設定とオプションを表示します。
6. セクションまたはセクション内のブロックに変更を加えます。
7. セクション内容に問題がなければ、[保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. 編集するテンプレートを [テンプレート] ドロップダウンメニューから選択します。
7. [+ セクションを追加] をクリックして、テンプレートの新しいセクションを選択します。
8. 新しいセクションをクリックして、設定とオプションを表示します。
9. セクションまたはセクション内のブロックに変更を加えます。
10. セクション内容に問題がなければ、[保存] をクリックします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. 編集するテンプレートを [テンプレート] ドロップダウンメニューから選択します。
7. [+ セクションを追加] をクリックして、テンプレートの新しいセクションを選択します。
8. 新しいセクションをクリックして、設定とオプションを表示します。
9. セクションまたはセクション内のブロックに変更を加えます。
10. セクション内容に問題がなければ、[保存] をクリックします。

新しいテンプレートを作成する

メモ

新しいテンプレートの作成は、Online Store 2.0のみで行うことができます。

一部のテンプレートタイプは、ストアのリソースを使用して複数のページを表示するために使用できます。これらには、次のテンプレートタイプが含まれます。

• コレクション
• 商品
• ブログ
• ブログ記事
• ページ

すべてのテーマには、タイプごとにデフォルトのテンプレートが用意されています。このデフォルトのテンプレートは、代替テンプレートが明示的に設定されていない場合にリソースが使用するテンプレートです。

テンプレートに変更を加えると、そのテンプレートを使用するページすべてに影響が及びます。そのタイプのページの一部を異なる方法で表示したい場合、テーマにすでに存在しているテンプレートを基にして、新しいテンプレートを作成することができます。既存のテンプレートから新しいテンプレートを作成すると、同じセクションが新しいテンプレートに自動的に入力されます。同じタイプの他のテンプレートの表示に影響を与えることなく、新しいテンプレートを編集して、適宜、セクションを削除、追加、または非表示にすることができます。

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。[+ テンプレートを作成する] をクリックします。
4. テンプレートに固有の名前を付けます。
5. [テンプレート] ドロップダウンメニューを使用して、新しいテンプレートのベースにする既存のテンプレートを選択します。
6. [テンプレートを作成する] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。[+ テンプレートを作成する] をクリックします。
7. テンプレートに固有の名前を付けます。
8. [テンプレート] ドロップダウンメニューを使用して、新しいテンプレートのベースにする既存のテンプレートを選択します。
9. [テンプレートを作成する] をクリックします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。[+ テンプレートを作成する] をクリックします。
7. テンプレートに固有の名前を付けます。
8. [テンプレート] ドロップダウンメニューを使用して、新しいテンプレートのベースにする既存のテンプレートを選択します。
9. [テンプレートを作成する] をクリックします。

メタオブジェクトのテンプレートを作成する

メタオブジェクトのウェブページ用にテンプレートを作成できます。

この機能を使用するには、以下の手順を実行する必要があります。

1. ストアフロントへのアクセス権があるメタオブジェクト定義を作成します。必要に応じて、ウェブページ機能を手動で有効化します。テーマテンプレートを作成すると、テーマエディタによってウェブページ機能が有効になります。
2. メタオブジェクト定義のエントリーを作成します。

これでテーマテンプレートを作成できます。

手順:

1. 管理画面から [オンラインストア] > [テーマ] の順に移動します。
2. 編集するテーマを見つけて、[カスタマイズ] をクリックします。
3. ページ上部にあるページセレクターを開きます。
4. [メタオブジェクトのテンプレートを作成する] をクリックします。ダイアログで、テンプレートに使用するメタオブジェクトをクリックします。ページタイトルとメタディスクリプションに使用するメタオブジェクトフィールドを編集することができます。また、[検索結果] セクションでURLハンドルを編集することもできます。テンプレートの名前には、メタオブジェクト定義と同じ名前が自動的に設定されます。
5. [テンプレートを作成する] をクリックします。
6. テンプレートを作成してから、セクションの追加、ブロックの追加、設定の編集を行って、テンプレートをカスタマイズすることができます。動的ソースを使用して、メタオブジェクト定義フィールドと連携させることもできます。たとえば、アンバサダー向けのページを画像付きで作成する場合、動的ソースアイコンをクリックすることにより、テキスト付き画像を追加し、メタオブジェクトエントリーを連携させることができます。
7. [保存] をクリックします。

テンプレートのプレビュー

メモ

管理画面で、[有効] なステータスのページと商品のみをプレビューできます。

テンプレートプレビューでは、テンプレートを保存または公開したときに、異なるリソースがお客様にどのように表示されるかをテストできます。テンプレートプレビューを使用し、異なるテンプレートを適用したページや商品がどのように表示されるかをプレビューすることができます。

テンプレートは、ページレベルまたは商品レベルで割り当てられます。テンプレートの作成や編集はテーマエディタで行いますが、ページまたは商品に割り当てられたテンプレートは管理画面で変更します。ページと商品には複数のテンプレートを使用できます。

代替テンプレートをプレビューする

別のテンプレートが適用されたページや商品がどのように表示されるかをプレビューすることができます。

手順:

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。
3. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。
4. サイドバーで [変更] をクリックします。
5. 選択したテンプレートでプレビューする商品またはページを選択します。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。
7. サイドバーで [変更] をクリックします。
8. 選択したテンプレートでプレビューする商品またはページを選択します。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [テーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [テンプレート] をタップします。
6. [テンプレート] ドロップダウンメニューを使用して、テンプレートを選択します。
7. サイドバーで [変更] をクリックします。
8. 選択したテンプレートでプレビューする商品またはページを選択します。

新しいテンプレートを適用する

公開済みのテーマの以下のセクションに割り当てられたテンプレートを変更できます。

• ページ
• 商品
• コレクション
• ブログ
• ブログ記事

管理画面で、割り当てられたテンプレートを変更します。表示されるテンプレートオプションは、現在のライブテーマで利用可能なテンプレートに基づいています。

商品およびコレクションのテンプレートは、個々のアイテムレベルで、または [一括編集] を使用して複数のアイテムに一括で割り当てることができます。この操作はテーマエディタでは行いません。

ページに新しいテンプレートを適用する

デスクトップ

1. 管理画面からオンラインストア > ページに移動します。
2. ストアページのタイトルをクリックします。
3. [オンラインストア] セクションで、ドロップダウンメニューを使用して、選択したページに適用する新しいテーマテンプレートを選択します。
4. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。
4. ストアページのタイトルをクリックします。
5. [オンラインストア] セクションで、ドロップダウンメニューを使用して、選択したページに適用する新しいテーマテンプレートを選択します。
6. [保存] をクリックします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ページ] をタップします。
4. ストアページのタイトルをクリックします。
5. [オンラインストア] セクションで、ドロップダウンメニューを使用して、選択したページに適用する新しいテーマテンプレートを選択します。
6. [保存] をクリックします。

商品に新しいテンプレートを適用する

1. 管理画面から [商品管理] に移動します。

2. 絞り込み検索を使用して変更する商品を見つけるか、既存の商品のリストから商品をクリックします。

3. [テーマテンプレート] セクションで、ドロップダウンメニューを使用して、選択した商品に適用する新しいテーマテンプレートを選択します。

4. [保存] をクリックします。

コレクションに新しいテンプレートを適用する

1. 管理画面から、[商品] > [コレクション] に移動します。
2. 絞り込み検索を使用して、変更するコレクションを見つけるか、既存のコレクションリストからコレクションをクリックします。
3. [テーマテンプレート] セクションで、ドロップダウンメニューを使用して、選択したコレクションに適用する新しいテーマテンプレートを選択します。
4. [保存] をクリックします。

ブログ記事に新しいテンプレートを適用する

デスクトップ

1. 管理画面から [オンラインストア] > [ブログ記事] の順に移動します。
2. 絞り込み検索を使用して変更するブログ記事を見つけるか、既存のブログ記事のリストから商品をクリックします。
3. [オンラインストア] セクションで、ドロップダウンメニューを使用して新しいテーマテンプレートを選択し、選択したブログ記事に適用します。
4. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。

ブログに新しいテンプレートを適用する

デスクトップ

1. 管理画面から [オンラインストア] > [ブログ記事] の順に移動します。
2. [ブログの管理] をクリック
3. 絞り込み検索を使用して変更するブログを見つけるか、既存のブログのリストから商品をクリックします。
4. [オンラインストア] セクションで、ドロップダウンメニューを使用して新しいテーマテンプレートを選択し、選択したブログに適用します。
5. [保存] をクリックします。

iPhone

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。
4. [ブログ記事] の横にある [...] ボタンをタップし、[ブログを管理する] を選択します。

Android

1. Shopifyアプリで [...] ボタンをタップします。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [ブログ記事] をタップします。
4. [ブログ記事] の横にある [...] ボタンをタップし、[ブログを管理する] を選択します。

テンプレートの一括変更

メモ

ブログ記事とページの一括編集は利用できなくなりました。ブログ記事やページを引き続き編集する必要がある場合は、外部サービスアプリの利用を検討してください。

商品やコレクションについては、一括編集を利用して新しいテンプレートを複数のものに同時に適用できます。

商品を一括編集する

1. 管理画面から [商品管理] に移動します。
2. 絞り込み検索を使用して、変更する商品を見つけます。

3. 複数の商品を同時に編集するには、次のショートカットを使用します。

   • 複数の商品を同時に選択して編集するには、編集するアイテムのチェックボックスをクリックします。
   • 商品を範囲選択するには、チェックボックスをクリックし、Shiftキーを押しながら別の商品のチェックボックスをクリックします。
   • 隣接する複数の商品を選択するには、アイテムをクリックして選択し、Shiftキーを押しながら別のアイテムのチェックボックスをクリックします。

4. [一括編集] をクリックします。

5. [一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] チェックボックスをクリックします。

6. 最初の行のテンプレートフィールドをクリックし、Shiftキーを押しながら最後の行のテンプレートフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。

7. ドロップダウンメニューを使用して、選択したアイテムの新しいテンプレートを選択します。

8. [保存] をクリックします。

コレクションを一括編集する

1. 管理画面で、[商品管理] > [コレクション] の順に移動します。
2. 絞り込み検索を使用して、変更するコレクションを見つけます。

3. 複数のコレクションを同時に編集するには、次のショートカットを使用します。

   • 複数のコレクションを同時に選択して編集するには、編集するアイテムのチェックボックスをクリックします。
   • コレクションを範囲選択するには、チェックボックスをクリックし、Shiftキーを押しながら別のコレクションのチェックボックスをクリックします。
   • 隣接する複数のコレクションを選択するには、アイテムをクリックして選択し、Shiftキーを押しながら別のアイテムのチェックボックスをクリックします。

4. [一括編集] をクリックします。

5. [一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] チェックボックスをクリックします。

6. 最初の行のテンプレートフィールドをクリックし、Shiftキーを押しながら最後の行のテンプレートフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。

7. ドロップダウンメニューを使用して、選択したアイテムの新しいテンプレートを選択します。

8. [保存] をクリックします。

テンプレートを管理する

テンプレート名を変更またはテンプレートを削除するには、コードエディタを使用する必要があります。テンプレートファイルを編集すると、オンラインストアに問題が発生する可能性があります。

テンプレート名を変更する

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. 名前を変更するテンプレートを含むテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. コードエディタで、テンプレートフォルダを見つけます。名前を変更するテンプレート名をクリックし、[ファイル名を変更する] をクリックします。
4. 新しいテンプレート名を入力し、[ファイル名を変更する] をクリックして保存します。

テンプレートを削除する

1. 管理画面から [オンラインストア] > [テーマ] に移動します。
2. テンプレートを削除するテーマを見つけて、[...] ボタン > [コードを編集] の順にクリックします。
3. コードエディタで、テンプレートフォルダを見つけます。削除するテンプレートの名前をクリックし、[ファイルを削除] をクリックします。そのテンプレートに割り当てられたリソースがある場合、別のテンプレートを割り当てるまではデフォルトのテンプレートで表示されます。