テンプレート
テンプレートとは、オンラインストアに統一感のあるデザインと雰囲気をもたらすよう設定されたセクションのグループのことです。テンプレートで利用可能なセクションは、ご利用のテーマによって異なります。テーマエディタでは、どのテンプレートがどのページに適用されているかを確認し、テンプレートを編集してお客様に表示する情報をカスタマイズできます。
テンプレートを編集すると、そのテンプレートを使用するすべてのページに変更内容が適用されます。たとえば、コレクションテンプレートにニュースレターの登録フォームを追加すると、デフォルトのコレクションテンプレートを使用するすべてのコレクションページでは、ニュースレターの登録フォームが表示されます。
目次
テンプレートを編集する
テンプレートを編集してオンラインストアにセクションを追加することができます。一部のセクションにはカスタマイズ可能なブロックがありますが、すべてのセクションまたはブロックの設定やコンテンツが編集可能というわけではありません。テンプレートを編集すると、その変更内容はテーマエディタのプレビューにリアルタイムで表示されます。
手順:
デスクトップ
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- [ホームページ] ドロップダウンメニューをクリックし、編集するテンプレートを選択します。
- テンプレートに新しいセクションを追加するには、[セクションを追加] をクリックし、テンプレートの新しいセクションを選択します。
- 任意:新しいセクションにブロックを追加するには、[ブロックを追加] をクリックし、セクションの新しいブロックを選択します。
- 新しいセクションとブロックをクリックして設定とオプションを表示し、変更を加えます。
- [保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [ホームページ] ドロップダウンメニューをタップし、編集するテンプレートを選択します。
- テンプレートに新しいセクションを追加するには、[セクション] > [セクションを追加] の順にタップし、テンプレートの新しいセクションを選択して、[追加] をタップします。
- 任意:新しいセクションにブロックを追加するには、[ブロックを追加] をタップし、セクションの新しいブロックを選択します。
- 新しいセクションとブロックをタップして設定とオプションを表示し、変更を加えます。
- [保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [ホームページ] ドロップダウンメニューをタップし、編集するテンプレートを選択します。
- テンプレートに新しいセクションを追加するには、[セクション] > [セクションを追加] の順にタップし、テンプレートの新しいセクションを選択して、[追加] をタップします。
- 任意:新しいセクションにブロックを追加するには、[ブロックを追加] をタップし、セクションの新しいブロックを選択します。
- 新しいセクションとブロックをタップして設定とオプションを表示し、変更を加えます。
- [✓] をタップします。
新しいテンプレートを作成する際の考慮事項
新しいテンプレートを作成する前に、以下の考慮事項を確認してください。
- 商品、コレクション、ページ、ブログ、ブログ記事に対して複数のテンプレートを作成できますが、合計で1,000個のテンプレートしか使用できません。
- 新しいテンプレートの作成は、Online Store 2.0テーマでのみ行うことができます。
- すべてのテーマには、コレクション、商品、ブログ、ブログ記事、ページ用のデフォルトのテンプレートがあります。これらのデフォルトのテンプレートは、代替テンプレートを作成しない限り、ストアのリソースとコンテンツを表示するテンプレートになります。
- テンプレートに加えた変更は、そのテンプレートを使用するページすべてに影響します。特定のタイプのページを別の方法で表示する場合は、テーマにすでに存在するテンプレートに基づいて新しいテンプレートを作成できます。
- 既存のテンプレートから新しいテンプレートを作成すると、新しいテンプレートには既存のテンプレートと同じセクションが自動的に入力されます。その後、既存のテンプレートを使用するページの表示に影響を与えることなく、必要に応じてセクションを削除、追加、非表示にし、そのコンテンツを編集できます。
新しいテンプレートを作成する
デスクトップ
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 編集するテーマを見つけて、[カスタマイズする] をクリックします。
- [ホームページ] ドロップダウンメニューをクリックし、テンプレートタイプを選択して、[テンプレートを作成する] をクリックします。
-
[テンプレートを作成する] ダイアログで、以下の手順を実行します。
- [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
- [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。
[テンプレートを作成する] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [ホームページ] ドロップダウンメニューをタップし、テンプレートタイプを選択して、[テンプレートを作成する] をタップします。
-
[テンプレートを作成する] ダイアログで、以下の手順を実行します。
- [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
- [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。
[テンプレートを作成する] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [すべてのテーマを管理する] をタップします。
- 編集するテーマを見つけて、[カスタマイズする] をタップします。
- [ホームページ] ドロップダウンメニューをタップし、テンプレートタイプを選択して、[テンプレートを作成する] をタップします。
-
[テンプレートを作成する] ダイアログで、以下の手順を実行します。
- [名前] フィールドに、新しいテンプレートの固有の名前を入力します。
- [ベース] ドロップダウンメニューで、新しいテンプレートのベースにする既存のテンプレートを選択します。
[テンプレートを作成する] をタップします。
新しいテンプレートを作成したら、そのテンプレートを、使用したいオンラインストアのページに適用することができます。
メタオブジェクトのテンプレートを作成する
メタオブジェクトのウェブページ用にテンプレートを作成できます。この機能を使用するには、以下の手順を実行します。
- ストアフロントへのアクセス権があるメタオブジェクト定義を作成します。必要に応じて、ウェブページ機能を手動で有効化します。 テーマテンプレートを作成すると、テーマエディタによってウェブページ機能が有効になります。
- メタオブジェクト定義のエントリーを作成します。
テーマエディタでメタオブジェクトのテンプレートを作成できるようになりました。
テンプレートをプレビューする
テンプレートプレビューを使用すると、異なるテンプレートを使用した場合に、商品やページなどのオンラインストアのリソースが、お客様にどのように表示されるかをプレビューすることができます。
テンプレートは、商品、コレクション、ページ、ブログ、またはブログ記事のレベルで割り当てられます。テンプレートの作成や編集はテーマエディタで行いますが、リソースに割り当てられたテンプレートの変更は管理画面で行います。
テンプレートをプレビューする際の考慮事項
さまざまなオンラインストアリソースのテンプレートをプレビューする際には、以下の詳細を考慮してください。
- テーマエディタで商品テンプレートをプレビューする場合、[アクティブ] ステータスや [下書き] ステータスの商品を使用できますが、[アーカイブ済み] ステータスの商品をプレビューすることはできません。
- テーマエディタでコレクションテンプレートをプレビューする場合、コレクションでは、販売チャネルとして [オンラインストア] が有効化されていることを確認する必要があります。コレクションで [オンラインストア] が販売チャネルとして有効化されていない場合、テーマエディタでコレクションテンプレートを使用してそのコレクションをプレビューすることはできません。
- テーマエディタでページテンプレートをプレビューする場合、公開設定を [公開] または [非公開] に設定したページを使用できます。
- テーマエディタでブログ記事のテンプレートをプレビューする場合、公開設定を [公開] または [非公開] に設定したブログ記事を使用できます。
ブログには異なるステータスや表示パラメーターが設定されていないので、ブログテンプレートを使用して、オンラインストアで公開済みのブログをプレビューすることができます。
代替テンプレートをプレビューする
別のテンプレートが適用された商品、コレクション、ページ、ブログ、またはブログ記事がどのように表示されるかをプレビューすることができます。
手順:
デスクトップ
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- テンプレートをプレビューするテーマを見つけて、[カスタマイズする] をクリックします。
- [ホームページ] ドロップダウンメニューをクリックし、使用するテンプレートを選択します。
- テーマエディタのサイドバーの [プレビュー] セクションで、[変更] をクリックします。
- 選択したテンプレートでプレビューするリソースをクリックします。
iPhone
Shopifyアプリで [...] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
テンプレートをプレビューするテーマを見つけて、[カスタマイズする] をタップします。
[ホームページ] ドロップダウンメニューをタップし、使用するテンプレートを選択します。
テンプレートでプレビューするリソースを選択するには、ドロップダウンメニューを再度タップします。
[オンラインストアを検索する] フィールドに、選択したテンプレートでプレビューするリソースの名前を入力します。
検索結果リストからリソースを選択します。
Android
Shopifyアプリで [☰] ボタンをタップします。
販売チャネルセクションで、[オンラインストア] をタップします。
[すべてのテーマを管理する] をタップします。
テンプレートをプレビューするテーマを見つけて、[カスタマイズする] をタップします。
[ホームページ] ドロップダウンメニューをタップし、使用するテンプレートを選択します。
テンプレートでプレビューするリソースを選択するには、ドロップダウンメニューを再度タップします。
[オンラインストアを検索する] フィールドに、選択したテンプレートでプレビューするリソースの名前を入力します。
検索結果リストからリソースを選択します。
新しいテンプレートを適用する
公開済みのテーマの以下のセクションに割り当てられたテンプレートを変更できます。
- ページ
- 商品
- コレクション
- ブログ
- ブログ記事
管理画面で、割り当てられたテンプレートを変更します。表示されるテンプレートオプションは、現在のライブテーマでのみ利用可能なテンプレートに基づいて表示されます。
商品およびコレクションのテンプレートは、個々のアイテムレベルで割り当てることも、[一括編集] を使用して複数のアイテムに同時に割り当てることもできます。
ページに新しいテンプレートを適用する
デスクトップ
- 管理画面から [オンラインストア] > [ページ] に移動します。
- 新しいテンプレートを適用するページをクリックします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをクリックし、ページに適用するテンプレートを選択します。
- [保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ページ] をタップします。
- 新しいテンプレートを適用するページをタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ページに適用するテンプレートを選択します。
- [保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ページ] をタップします。
- 新しいテンプレートを適用するページをタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ページに適用するテンプレートを選択します。
- [保存] をタップします。
商品に新しいテンプレートを適用する
デスクトップ
管理画面から [商品管理] に移動します。
新しいテンプレートを適用する商品をクリックします。
[テーマテンプレート] セクションで、ドロップダウンメニューをクリックし、商品に適用するテンプレートを選択します。
[保存] をクリックします。
iPhone
- Shopifyアプリから、[商品管理] > [すべての商品] をタップします。
- 新しいテンプレートを適用する商品をタップします。
- [オンラインストアのテンプレート] をタップします。
- 商品に適用するテンプレートを選択します。
- [保存] をタップします。
Android
- Shopifyアプリから、[商品管理] > [すべての商品] をタップします。
- 新しいテンプレートを適用する商品をタップします。
- [オンラインストアのテンプレート] をタップします。
- 商品に適用するテンプレートを選択します。
- [✓] をタップします。
コレクションに新しいテンプレートを適用する
- 管理画面で、[商品管理] > [コレクション] の順に移動します。
- テンプレートを適用するコレクションをクリックします。
- [テーマテンプレート] セクションで、ドロップダウンメニューをクリックし、コレクションに適用するテンプレートを選択します。
- [保存] をクリックします。
ブログに新しいテンプレートを適用する
デスクトップ
- 管理画面で [オンラインストア] > [ブログ記事] の順に移動します。
- [ブログの管理] をクリック
- テンプレートを適用するブログをクリックします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをクリックし、ブログに適用するテンプレートを選択します。
- [保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ブログ記事] をタップします。
- [...] > [ブログを管理] の順にタップします。
- テンプレートを適用するブログをタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログに適用するテンプレートを選択します。
- [保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ブログ記事] をタップします。
- [...] > [ブログを管理] の順にタップします。
- テンプレートを適用するブログをタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログに適用するテンプレートを選択します。
- [保存] をタップします。
ブログ記事に新しいテンプレートを適用する
デスクトップ
- 管理画面で [オンラインストア] > [ブログ記事] の順に移動します。
- テンプレートを適用するブログ記事をクリックします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをクリックし、ブログに適用するテンプレートを選択します。
- [保存] をクリックします。
iPhone
- Shopifyアプリで [...] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ブログ記事] をタップします。
- テンプレートを適用するブログ記事をタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログ記事に適用するテンプレートを選択します。
- [保存] をタップします。
Android
- Shopifyアプリで [☰] ボタンをタップします。
- 販売チャネルセクションで、[オンラインストア] をタップします。
- [ブログ記事] をタップします。
- テンプレートを適用するブログ記事をタップします。
- [オンラインストア] セクションで [テーマテンプレート] ドロップダウンメニューをタップし、ブログ記事に適用するテンプレートを選択します。
- [保存] をタップします。
商品やコレクションに新しいテンプレートを一括で適用する
[一括編集] を使用して、新しいテンプレートを複数の商品やコレクションに一括で適用できます。
新しいテンプレートを商品に一括で適用する
- 管理画面から [商品管理] に移動します。
-
複数の商品を同時に編集するには、以下のいずれかの操作を実行します。
- 商品を1つずつ選択するには、各商品のチェックボックスをオンにします。
- 複数の商品を範囲ベースで選択するには、商品をクリックして選択し、Shiftキーを押しながら別の商品をクリックします。これにより、クリックした最初と最後の商品、およびその間の全商品が選択されます。
- ページ上のすべての商品を選択するには、商品リストの上部のチェックボックスをオンにします。
- ストアのすべての商品を選択するには、商品リストの上部にあるチェックボックスをオンにし、[ストアのすべてを選択する] をクリックします。
[一括編集] をクリックします。
[一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] を選択します。
[テンプレート] 列の最初のフィールドをクリックし、Shiftキーを押しながら [テンプレート] 列の最後のフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。
選択した最初のフィールドをクリックし、ドロップダウンメニューから必要なテンプレートを選択し、[保存] をクリックします。
新しいテンプレートをコレクションに一括で適用する
- 管理画面で、[商品管理] > [コレクション] の順に移動します。
-
複数のコレクションを同時に編集するには、以下のいずれかの操作を実行します。
- コレクションを1つずつ選択するには、各コレクションのチェックボックスをオンにします。
- 複数のコレクションを範囲ベースで選択するには、コレクションをクリックして選択し、Shiftキーを押しながら別のコレクションをクリックします。これにより、クリックした最初と最後のコレクション、およびその間の全コレクションが選択されます。
- ページ上のすべてのコレクションを選択するには、コレクションリストの上部のチェックボックスをオンにします。
- ストアのすべてのコレクションを選択するには、コレクションリストの上部にあるチェックボックスをオンにし、[このストアのすべてのアイテムを選択する] をクリックします。
[一括編集] をクリックします。
[一括編集] で [列] ドロップダウンメニューをクリックし、[一般] セクションで [テンプレート] を選択します。
[テンプレート] 列の最初のフィールドをクリックし、Shiftキーを押しながら [テンプレート] 列の最後のフィールドをクリックします。選択したアイテムの周りに青い網掛けが表示されます。
選択した最初のフィールドをクリックし、ドロップダウンメニューから必要なテンプレートを選択し、[保存] をクリックします。
テンプレートを管理する
テンプレート名を変更またはテンプレートを削除するには、コードエディタを使用する必要があります。テンプレートファイルを編集すると、オンラインストアで問題が発生する可能性があります。
テンプレートを削除すると、そのテンプレートが割り当てられたオンラインストアのリソースは、別のテンプレートを割り当てるまではデフォルトのテンプレートで表示されます。
テンプレート名を変更する
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- 名前を変更するテンプレートを含むテーマを見つけて、[...] > [コードを編集] の順にクリックします。
- コードエディタで、テンプレートフォルダを見つけます。
- 名前を変更するテンプレート名をクリックし、[鉛筆] アイコンをクリックします。
- [ファイル名を変更する] ダイアログで、[ファイル名] フィールドに新しいテンプレート名を入力します。
- [ファイル名を変更する] をクリックします。
テンプレートを削除する
- 管理画面から [オンラインストア] > [テーマ] に移動します。
- テンプレートを削除するテーマを見つけて、[...] > [コードを編集] の順にクリックします。
- コードエディタで、テンプレートフォルダを見つけます。
- 削除するテンプレートの名前をクリックし、[ごみ箱] アイコンをクリックします。
- ダイアログで、[ファイルを削除]をクリックします。