テンプレート

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

テーマには、さまざまな種類のコンテンツ用のテンプレートが含まれています。これらのテンプレートタイプには、管理画面の各エリアからコンテンツを動的に取得するセクションとブロックが含まれています。たとえば、テーマの商品ページテンプレートは、管理画面の [商品管理] セクションにあるオンラインストアで公開される各商品のページを作成します。

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

デフォルトのテンプレート

各デフォルトのテンプレートには、固有のデフォルトセクションと設定があり、[テーマエディタ] で編集およびカスタマイズできます。たとえば、商品ページにはデフォルトで、[商品情報] セクションと [関連商品] セクションがあります。各テーマの具体的なカスタマイズ設定は、テーマの開発者とテーマのバージョンによって異なります。テーマのバージョンを確認する方法について詳しくはこちらをご覧ください。

テンプレートは、デフォルトでテーマに含まれています。

商品管理

テーマの商品ページには、ストアで販売している商品に関する情報が表示され、お客様がその商品を購入できる場所となります。

商品ページにはデフォルトで、テーマエディタでの [商品情報] セクションと [関連商品] セクションが用意されています。

[商品情報] セクションには、タイトル、説明、価格、画像など、商品の詳細が表示されます。Shopify管理画面の [商品管理] ページから、商品を管理できます。

コレクション

テーマのコレクションページには、管理画面の [商品管理] ＞ [コレクション] ページで作成したコレクションが表示されます。コレクションを使うと、特定の商品をカテゴリーごとにまとめて表示できます。スマートコレクションと手動コレクションを使用できます。

コレクションページにはデフォルトで、テーマエディタに [コレクションバナー] セクションと [商品グリッド] セクションが用意されています。

コレクションリスト

コレクションリスト ページには、オンラインストア販売チャネルで入手可能なすべてのコレクションが表示されます。たとえば、宝石店をお持ちの場合、メニューにコレクションリストページへのリンクを追加し、お客様が指輪やネックレスなどの宝石の種類ごとに閲覧できるようにすることができます。カテゴリごとにコレクションを作成する必要があります。

ギフトカード

ギフトカードを作成した場合や、お客様がギフトカード商品を注文した場合は、そのギフトカードの詳細 (ギフトカードの額面や残高、利用コードなど) が [ギフトカード] ページに表示されます。

[ギフトカード] ページはテーマの一部となっているため、テーマをカスタマイズすることにより、[ギフトカード] ページに表示されるスタイルや情報を追加または調整することができます。

ただし、ギフトカードの額面と利用コードはカスタマイズできません。

ページ

管理画面でカスタムページを作成することにより、お客様向けコンテンツ (会社概要ページなど) や商品に関する追加情報を提供することができます。

カートページ

お客様は、オンラインストアでカートに追加したアイテムをカートページで確認できます。

デフォルトでは、カートページにはテーマエディタでの [アイテム] セクションと [小計] セクションが表示されます。

ブログ

管理画面で作成したブログのホームページは、オンラインストアのブログページとして表示され、そのブログに公開されているすべてのブログ投稿が含まれます。

ブログページにはデフォルトで、テーマエディタでの [ブログ記事] セクションが含まれています。

ブログ記事

オンラインストアのブログ投稿ページには、管理画面の [コンテンツ] ＞ [ブログ投稿] ページで作成したブログ投稿の内容が表示されます。デフォルトでは、ブログ記事ページにはテーマエディタでの [ブログ記事] セクションが含まれています。

検索ページ

検索ページでは、お客様がオンラインストア内で特定の商品、ページ、またはブログ記事を検索して見つけることができます。

デフォルトでは、検索ページにはテーマエディタでの [検索結果] セクションが含まれています。

[検索結果] セクションの設定に加え、検索動作用のテーマ設定の一部を表示およびカスタマイズし、独自のセクション固有のカスタムCSSを追加することもできます。

パスワードページ

管理画面の [オンラインストア] ＞ [各種設定] ページで、ストアにパスワード保護を設定できます。ストアがパスワードで保護されている場合、オンラインストアの訪問者に [パスワードページ] が表示されます。 [パスワードページ] テンプレートには固有のヘッダーとフッターがあります。[パスワードページ] テンプレートはテーマエディタからカスタマイズできます。

404 Page

404ページは、ストアから削除された商品の商品ページなど、存在しないサイトのリンクにお客様がアクセスしようとすると表示されます。

このページにカスタマイズ可能な設定はありませんが、テーマエディタでは、404ページにセクション固有のカスタムCSSを追加することができます。

テンプレートを編集する

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

メモ

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

手順

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

3. [ホームページ] ドロップダウンメニューをクリックし、編集するテンプレートを選択します。

4. テンプレートに新しいセクションを追加するには、[セクションを追加] をクリックし、テンプレートの新しいセクションを選択します。

5. 任意：新しいセクションにブロックを追加するには、[ブロックを追加] をクリックし、セクションの新しいブロックを選択します。

6. 新しいセクションとブロックをクリックして設定とオプションを表示し、変更を加えます。

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

iPhone

1. Shopifyアプリで、[] をタップします 。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [ホームページ] ドロップダウンメニューをタップし、編集するテンプレートを選択します。
6. テンプレートに新しいセクションを追加するには、[セクション] > [セクションを追加] の順にタップし、テンプレートの新しいセクションを選択して、[追加] をタップします。
7. 任意：新しいセクションにブロックを追加するには、[ブロックを追加] をタップし、セクションの新しいブロックを選択します。
8. 新しいセクションとブロックをタップして設定とオプションを表示し、変更を加えます。
9. [保存] をタップします。

Android

1. Shopifyアプリで、[] をタップします 。
2. 販売チャネルセクションで、[オンラインストア] をタップします。
3. [すべてのテーマを管理する] をタップします。
4. 編集するテーマを見つけて、[カスタマイズする] をタップします。
5. [ホームページ] ドロップダウンメニューをタップし、編集するテンプレートを選択します。
6. テンプレートに新しいセクションを追加するには、[セクション] > [セクションを追加] の順にタップし、テンプレートの新しいセクションを選択して、[追加] をタップします。
7. 任意：新しいセクションにブロックを追加するには、[ブロックを追加] をタップし、セクションの新しいブロックを選択します。
8. 新しいセクションとブロックをタップして設定とオプションを表示し、変更を加えます。
9. [✓] をタップします。

新しいテンプレートを作成する際の考慮事項

新しいテンプレートを作成する前に、以下の考慮事項を確認してください。

• 商品、コレクション、ページ、ブログ、ブログ記事に対して複数のテンプレートを作成できますが、合計で1,000個のテンプレートしか使用できません。
• 新しいテンプレートは、対応テーマでのみ作成できます。
• すべてのテーマには、コレクション、商品、ブログ、ブログ記事、ページ用のデフォルトのテンプレートがあります。これらのデフォルトのテンプレートは、代替テンプレートを作成しない限り、ストアのリソースとコンテンツを表示するテンプレートになります。
• テンプレートに加えた変更は、そのテンプレートを使用するページすべてに影響します。特定のタイプのページを別の方法で表示する場合は、テーマにすでに存在するテンプレートに基づいて新しいテンプレートを作成できます。
• 既存のテンプレートから新しいテンプレートを作成すると、新しいテンプレートには既存のテンプレートと同じセクションが自動的に入力されます。その後、既存のテンプレートを使用するページの表示に影響を与えることなく、必要に応じてセクションを削除、追加、非表示にし、そのコンテンツを編集できます。

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

デスクトップ

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 編集するテーマを見つけて、[カスタマイズする] をクリックします。

3. [ホームページ] ドロップダウンメニューをクリックし、テンプレートタイプを選択して、[テンプレートを作成する] をクリックします。

4. [テンプレートを作成する] ダイアログで、以下の手順を実行します。

   • [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
   • [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。

5. [テンプレートを作成する] をクリックします。

iPhone

1. Shopifyアプリで、[] をタップします 。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [すべてのテーマを管理する] をタップします。

4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

5. [ホームページ] ドロップダウンメニューをタップし、テンプレートタイプを選択して、[テンプレートを作成する] をタップします。

6. [テンプレートを作成する] ダイアログで、以下の手順を実行します。

   • [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
   • [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。

7. [テンプレートを作成する] をタップします。

Android

1. Shopifyアプリで、[] をタップします 。

2. 販売チャネルセクションで、[オンラインストア] をタップします。

3. [すべてのテーマを管理する] をタップします。

4. 編集するテーマを見つけて、[カスタマイズする] をタップします。

5. [ホームページ] ドロップダウンメニューをタップし、テンプレートタイプを選択して、[テンプレートを作成する] をタップします。

6. [テンプレートを作成する] ダイアログで、以下の手順を実行します。

   • [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
   • [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。

7. [テンプレートを作成する] をタップします。

新しいテンプレートを作成したら、そのテンプレートを、使用したいオンラインストアのページに適用することができます。

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

メタオブジェクトのウェブページ用にテンプレートを作成できます。この機能を使用するには、以下の手順を実行します。

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

テーマエディタでメタオブジェクトのテンプレートを作成できるようになりました。

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

テンプレートプレビューを使用すると、異なるテンプレートを使用した場合に、商品やページなどのオンラインストアのリソースが、お客様にどのように表示されるかをプレビューすることができます。

テンプレートは、商品、コレクション、ページ、ブログ、またはブログ記事のレベルで割り当てられます。テンプレートの作成や編集はテーマエディタで行いますが、リソースに割り当てられたテンプレートの変更は管理画面で行います。

テンプレートをプレビューする際の考慮事項

さまざまなオンラインストアリソースのテンプレートをプレビューする際には、以下の詳細を考慮してください。

• テーマエディタで商品テンプレートをプレビューする場合、[アクティブ] ステータスや [下書き] ステータスの商品を使用できますが、[アーカイブ済み] ステータスの商品をプレビューすることはできません。
• テーマエディタでコレクションテンプレートをプレビューする場合、コレクションでは、販売チャネルとして [オンラインストア] が有効化されていることを確認する必要があります。コレクションで [オンラインストア] が販売チャネルとして有効化されていない場合、テーマエディタでコレクションテンプレートを使用してそのコレクションをプレビューすることはできません。
• テーマエディタでページテンプレートをプレビューする場合、公開設定を [公開] または [非公開] に設定したページを使用できます。
• テーマエディタでブログ記事のテンプレートをプレビューする場合、公開設定を [公開] または [非公開] に設定したブログ記事を使用できます。

ブログには異なるステータスや表示パラメーターが設定されていないので、ブログテンプレートを使用して、オンラインストアで公開済みのブログをプレビューすることができます。

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

別のテンプレートが適用された商品、コレクション、ページ、ブログ、またはブログ記事がどのように表示されるかをプレビューすることができます。

手順

デスクトップ

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. [保存] をクリックします。

iPhone

1. Shopifyアプリから、[] アイコンをタップします 。
2. 新しいテンプレートを適用する商品をタップします。
3. [オンラインストアのテンプレート] をタップします。
4. 商品に適用するテンプレートを選択します。
5. [保存] をタップします。

Android

1. Shopifyアプリから、[] アイコンをタップします 。
2. 新しいテンプレートを適用する商品をタップします。
3. [オンラインストアのテンプレート] をタップします。
4. 商品に適用するテンプレートを選択します。
5. [✓] をタップします。

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

1. 管理画面で、[商品管理] > [コレクション] の順に移動します。
2. テンプレートを適用するコレクションをクリックします。
3. [テーマテンプレート] セクションで、ドロップダウンメニューをクリックし、コレクションに適用するテンプレートを選択します。
4. [保存] をクリックします。

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

デスクトップ

1. 管理画面から、[コンテンツ] > [ブログ投稿] に移動します。
2. [ブログの管理] をクリック
3. テンプレートを適用するブログをクリックします。
4. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをクリックし、ブログに適用するテンプレートを選択します。
5. [保存] をクリックします。

iPhone

1. Shopifyアプリで、[] をタップします 。
2. [コンテンツ] をタップします。
3. メニュードロップダウンをタップして、続けて [ブログ記事] をタップします。
4. > [ブログ管理] をタップします。
5. テンプレートを適用するブログをタップします。
6. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログに適用するテンプレートを選択します。
7. [保存] をタップします。

Android

1. Shopifyアプリで、[] をタップします 。
2. [コンテンツ] をタップします。
3. メニュードロップダウンをタップして、続けて [ブログ記事] をタップします。
4. > [ブログ管理] をタップします。
5. テンプレートを適用するブログをタップします。
6. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログに適用するテンプレートを選択します。
7. [✓] をタップします。

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

デスクトップ

1. Shopify 管理画面から、コンテンツ > ブログ投稿 に移動します。

2. テンプレートを適用するブログ記事をクリックします。

3. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをクリックし、ブログに適用するテンプレートを選択します。

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

iPhone

1. Shopifyアプリで、[] をタップします 。
2. [コンテンツ] をタップします。
3. メニュードロップダウンをタップして、続けて [ブログ記事] をタップします。
4. テンプレートを適用するブログ記事をタップします。
5. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログ記事に適用するテンプレートを選択します。
6. [保存] をタップします。

Android

1. Shopifyアプリで、[] をタップします 。
2. [コンテンツ] をタップします。
3. メニュードロップダウンをタップして、続けて [ブログ記事] をタップします。
4. テンプレートを適用するブログ記事をタップします。
5. [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログ記事に適用するテンプレートを選択します。
6. [✓] をタップします。

商品やコレクションに新しいテンプレートを一括で適用する

メモ

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

[一括編集] を使用して、新しいテンプレートを複数の商品やコレクションに一括で適用できます。

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

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

2. 複数の商品を同時に編集するには、以下のいずれかの操作を実行します。

   • 商品を1つずつ選択するには、各商品のチェックボックスをオンにします。
   • 複数の商品を範囲ベースで選択するには、商品をクリックして選択し、Shiftキーを押しながら別の商品をクリックします。これにより、クリックした最初と最後の商品、およびその間の全商品が選択されます。
   • ページ上のすべての商品を選択するには、商品リストの上部のチェックボックスをオンにします。
   • ストアのすべての商品を選択するには、商品リストの上部にあるチェックボックスをオンにし、[ストアのすべてを選択する] をクリックします。

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

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

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

6. 選択した最初のフィールドをクリックし、ドロップダウンメニューから必要なテンプレートを選択し、[保存] をクリックします。

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

1. 管理画面で、[商品管理] > [コレクション] の順に移動します。

2. 複数のコレクションを同時に編集するには、以下のいずれかの操作を実行します。

   • コレクションを1つずつ選択するには、各コレクションのチェックボックスをオンにします。
   • 複数のコレクションを範囲ベースで選択するには、コレクションをクリックして選択し、Shiftキーを押しながら別のコレクションをクリックします。これにより、クリックした最初と最後のコレクション、およびその間の全コレクションが選択されます。
   • ページ上のすべてのコレクションを選択するには、コレクションリストの上部のチェックボックスをオンにします。
   • ストアのすべてのコレクションを選択するには、コレクションリストの上部にあるチェックボックスをオンにし、[このストアのすべてのアイテムを選択する] をクリックします。

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

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

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

6. 選択した最初のフィールドをクリックし、ドロップダウンメニューから必要なテンプレートを選択し、[保存] をクリックします。

テンプレートを管理する

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

テンプレートを削除すると、そのテンプレートが割り当てられたオンラインストアのリソースは、別のテンプレートを割り当てるまではデフォルトのテンプレートで表示されます。

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

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. 名前を変更するテンプレートを含むテーマを見つけて、[...] > [コードを編集] の順にクリックします。

3. コードエディタで、テンプレートフォルダを見つけます。

4. 名前を変更するテンプレート名をクリックし、[鉛筆] アイコンをクリックします。

5. [ファイル名を変更する] ダイアログで、[ファイル名] フィールドに新しいテンプレート名を入力します。

6. [ファイル名を変更する] をクリックします。

テンプレートを削除する

1. 管理画面から [オンラインストア] > [テーマ] に移動します。

2. テンプレートを削除するテーマを見つけて、[...] > [コードを編集] の順にクリックします。

3. コードエディタで、テンプレートフォルダを見つけます。

4. 削除するテンプレートの名前をクリックし、[ごみ箱] アイコンをクリックします。

5. ダイアログで、**[ファイルを削除]**をクリックします。