📁

【Shopify.dev和訳】Themes/Architecture/Templates/Overview

2021/09/17に公開

Shopify

themes

tech

この記事について

この記事は、Themes/Architecture/Templates/Overviewの記事を和訳したものです。

記事内で使用する画像は、公式ドキュメント内の画像を引用して使用させていただいております。

Shopify アプリのご紹介

Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。

Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。

Templates

テンプレートは、テーマ内の各タイプのページでレンダリングされる内容を制御します。

テンプレートファイルは、テーマの templates ディレクトリに置かれます。

テンプレートのファイルタイプ

テーマのテンプレートには、2 種類のファイル形式があります。

JSON vs. Liquid

テンプレートでセクションを使用したい場合は、JSON テンプレートを使用する必要があります。

JSON テンプレートは、アプリのセクションを含め、マーチャントがセクションの追加、削除、並び替えをより柔軟に行うことができます。また、settings_data.json のデータ量を最小限に抑えることができます。その代わり、データはテンプレートに直接保存されるため、テーマエディタのパフォーマンスが向上します。

JSON テンプレート

JSON テンプレートは、拡張子が.json のデータファイルです。これらのテンプレートを使うと、セクションのコンテンツをテンプレートに簡単に追加することができます。セクションは、テーマエディターを使って、マーチャントが追加、削除、または再配置できます。

詳しくは、「JSON テンプレート」をご覧ください。

Liquid テンプレート

Liquid テンプレートは、Liquid のマークアップファイルで、拡張子は.liquid です。

Template ファイル

テーマでは、以下の種類のテンプレートを使用することができます。

代替テンプレート

場合によっては、同じテンプレートに異なるマークアップを作成する必要があるかもしれません。例えば、特定の製品に対して異なるセクションを設けることができます。このような場合には、代替テンプレートを作成します。

代替テンプレートは 2 つの方法で作成できます。

名前の構造

代替テンプレートのファイルは、次のような名前の構造になっています。template-name はテンプレート名、template-suffix は代替名、template-file-type はファイルタイプで、json か liquid のいずれかです。

template-name.template-suffix.template-file-type

たとえば、「alternate」という名前の代替 JSON product テンプレートを作成する場合、ファイル名は次のようになります。

product.alternate.json

代替テンプレートの使用

代替テンプレートが作成された後、2 つの方法で適用することができます。

マーチャントは管理画面で関連するリソースに割り当てることができます。
view URL パラメータを使ってストアフロントでレンダリングすることができます。

公開テーマで代替テンプレートをレンダリングする

代替テンプレートは、view URL パラメーターを使用して、?view=[template-suffix] の形式でストアフロントにレンダリングできます。ここで、[template-suffix] はテンプレートの代替名です。

例えば、上記の product.alternate.json テンプレートと Example product という商品があったとすると、以下のようにしてそのテンプレートを使って商品をレンダリングすることができます。

/products/example-product?view=alternate

未公開のテーマで代替テンプレートをレンダリングする

代替テンプレートは、view URL パラメータを使ってテーマエディタで表示することができます。3Fview%3D[template-suffix]というフォーマットを使用し、[template-suffix]はテンプレートの代替名です。

例えば、上記の product.alternate.json テンプレートと Example product という商品がある場合、テーマエディターでそのテンプレートを使って商品をレンダリングするには以下のようにします。

/admin/themes/THEME_ID/editor?previewPath=%2Fproducts%2Fexample-product%3Fview%3Dalternate

ローカルで代替テンプレートを作成する

ローカルでテーマを編集中に代替テンプレートを作成したい場合は、ファイル名が名前の構造に沿っていることを確認する必要があります。

テーマコードエディターで代替テンプレートを作成する

以下の手順で、テーマコードエディタから代替テンプレートを作成することができます。

デスクトップ

Shopify の管理画面から、「オンラインストア」>「テーマ」と進みます。
編集したいテーマを見つけて、「アクション」>「コードを編集する」をクリックします。
「Templates」フォルダ内の「新しい template を追加する」をクリックします。
表示されたモーダルで、作成したいテンプレートタイプをクリックし、名前を入力します。

iPhone

Shopify アプリから「ストア」をタップします。
販売チャネルのセクションで、「オンラインストア」をタップします。
「テーマの管理」をタップします。
編集したいテーマを見つけて、「アクション」>「コードの編集」をクリックします。
「Templates」フォルダで、「新しい template を追加する」をクリックする。
表示されるモーダルで、作成するテンプレートタイプをクリックして、名前を入力します。

Android

Shopify アプリから「ストア」をタップします。
販売チャネルのセクションで、「オンラインストア」をタップします。
「テーマの管理」をタップします。
編集したいテーマを見つけて、「アクション」>「コードの編集」をクリックします。
「Templates」フォルダで、「新しい template を追加する」をクリックする。
表示されるモーダルで、作成するテンプレートタイプをクリックして、名前を入力します。

Shopify アプリのご紹介

Discussion

ログインするとコメントできます