テンプレート

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

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

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

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

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

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

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

商品

テーマの商品ページには、ストアで販売する商品の情報が表示され、お客様はそのページから商品を購入できます。

デフォルトでは、商品ページにはテーマエディタに商品情報セクションと関連商品セクションがあります。

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

コレクション

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

デフォルトでは、コレクションページにはテーマエディタにコレクションバナーセクションと商品グリッドセクションがあります。

コレクションリスト

コレクションリストページには、オンラインストア販売チャネルで利用可能なすべてのコレクションが表示されます。たとえば、ジュエリーストアを経営している場合、メニューにコレクションリストページへのリンクを追加すると、お客様はリングやネックレスといったジュエリーの種類別に閲覧できるようになります。カテゴリーごとにコレクションを作成する必要があります。

ギフトカード

ギフトカードを作成した場合、またはお客様がギフトカード商品を注文した場合、ギフトカードの金額や残高、引き換えコードなどの詳細がギフトカードページに記載されます。

ギフトカードページはテーマの一部です。テーマをカスタマイズして、ギフトカードページに含まれるスタイルや情報を追加または調整できます。

ギフトカードの金額とギフトカードの引き換えコードはカスタマイズできません。

ページ

Shopify 管理画面では、「会社概要」ページのようなお客様向けのコンテンツや、商品に関する追加情報を提供するために、カスタムページを作成できます。

カートページ

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

デフォルトでは、カートページにはテーマエディタにアイテムセクションと小計セクションがあります。

ブログ

オンラインストアのブログページは、Shopify 管理画面で作成したブログのホームページであり、そのブログで公開されたすべてのブログ記事が含まれます。

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

ブログ記事

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

検索ページ

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

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

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

パスワードページ

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

404 ページ

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

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

テンプレートを編集する

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

手順：

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

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

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

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

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

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

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

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

これで、テーマエディタでメタオブジェクトテンプレートを作成することができます。

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

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

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

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

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

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

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

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

商品、コレクション、ページ、ブログ、ブログ記事に別のテンプレートを適用した場合の表示をプレビューできます。

手順：

特定のリソースをプレビューする

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

引き続き、Shopify 管理画面でリソースにテンプレートを割り当てる必要があります。

ページセレクターの「検索」バー、「セクションを追加」または「ブロックを追加」ツール、あるいは「アプリの埋め込み」で、テンプレートとリソースを検索することもできます。

手順：

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

2. 編集するテーマの横にある「テーマを編集」をクリックします。

3. テンプレートメニューから、プレビューするテンプレートを選択します。

4. サイドバーメニューの「プレビュー」セクションで、「変更」をクリックします。

5. 「選択」メニューから、プレビューするリソースを選択します。

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

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

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

割り当て済みのテンプレートは、Shopify 管理画面で変更します。表示されるテンプレートオプションは、現在のライブテーマで利用できるテンプレートのみです。

商品とコレクションのテンプレートは、個々のアイテムに割り当てることも、一括編集を使用して複数のアイテムにまとめて割り当てることもできます。

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

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

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

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

2. テンプレートを適用するコレクションをクリックします。

3. 「テーマテンプレート」セクションでドロップダウンメニューをクリックし、コレクションに適用するテンプレートを選択します。

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

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

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

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

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

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

1. Shopify 管理画面から、「商品」に移動します。

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

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

3. 「一括編集」をクリックします。

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

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

6. 選択した最初のフィールドをクリックし、ドロップダウンメニューから目的のテンプレートを選択して、「保存」をクリックします。

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

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

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

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

3. 「一括編集」をクリックします。

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

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

6. 選択した最初のフィールドをクリックし、ドロップダウンメニューから目的のテンプレートを選択して、「保存」をクリックします。

テンプレートの管理

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

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

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

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

2. 名前を変更するテンプレートが含まれているテーマを見つけ、「...」>「コードを編集」をクリックします。

3. コードエディタで、templates フォルダを見つけます。

4. 名前を変更するテンプレートファイルを右クリックし、ドロップダウンメニューから「名前を変更...」を選択します。

5. ファイルに新しい名前を入力します。

6. キーボードの Enter キーを押します。

テンプレートを削除する

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

2. テンプレートを削除するテーマを見つけ、「...」>「コードを編集」をクリックします。

3. コードエディタで、templates フォルダを見つけます。

4. 削除するテンプレートファイルを右クリックし、ドロップダウンメニューから「完全に削除」を選択します。

5. 「削除」をクリックします。