ストアフロントのカスタマイズを望んでいるクライアントには、クリエイティブな管理方法を提供しましょう。Shopifyのセクション機能によって、Shopifyテーマを強力にパーソナライズすることができますので、ベストプラクティスを参照して効果を高めるように活用すれば、クライアントに多様なオプションを提供できます。
Shopifyテーマをゼロから作成する場合や、クライアントのために既存テーマを修正する場合には、異なるタイプのセクションが必要になりますが、内容は文脈によって違ってきます。さらに、お客さまはユーザーフレンドリーで直感的な利用体験を期待しているため、適切な場所に最適なセクションが配置されていることがコンバージョンに大きく影響します。
この記事では、さまざまなタイプのテーマセクションを作成する方法と、使用時のルールを確認します。クライアントがストアをカスタマイズできるように支援しましょう。また、ソース利用が可能なテーマ「Dawn」のセクションをいくつか参考にして、現実的なシナリオ下でどのようにセクションが活用できるかを見ていきます。
Theme Sectionsとは？
大まかに言うと、sections(セクション)はマーチャントがカスタマイズできるShopifyテーマのモジュール型コンポーネントです。セクションには、商品ページの基本要素やスライドショーのコンポーネントなど、Shopifyストアの特定エリア用のコンテンツと設定が含まれます。
これらのセクション内で、開発者は多様なsetting typesを扱うことができます。たとえばテキスト入力や画像ピッカー、カスタムHTMLとメニューなどがあり、マーチャントはテーマエディターでこれらをカスタイズして独自のコンテンツを当てはめることが可能です。
セクションは、テーマディレクトリの /sections の中にあります。ヘッダーやフッターといったテーマのレイアウトファイルに静的に含めるか、テーマエディターでテンプレートに動的に追加することができます。セクションとして使えるコンポーネントの多様性をざっとつかむには、Dawnの /sectionsディレクトリ をご覧ください。
Online Store 2.0のローンチにともない、ページ全体から細部の個別要素にいたるまで、テーマのすべての側面を組織化する方法としてセクションが利用できるようになりました。この記事で扱いますが、JSONテンプレートにセクションを追加できる機能によって、さまざまなページを簡単にアレンジできるようになり、マーチャントが自分でテーマをカスタマイズするときにもさらなる強化が可能です。
テンプレートとセクションについて
Shopifyテーマにおけるセクションの機能を学ぶ前提条件として、ShopifyのTheme templates system(英語)の理解が必要になります。Online Store 2.0では、個々のページタイプは、テーマの /templates ディレクトリ内の .json ファイルとして表すことができます。開発者は、JSONテンプレートファイルにデフォルトでどのセクションを表示させるかを定義することで、これらのページタイプを構築することが可能です。
これらのJSONテンプレートは、ストアコンテンツを表示するためのマークアップやLiquidオブジェクトを含みません。ページ内にどのセクションがどの順序で表示されるかを示すデータファイルのみとなります。
product.json テンプレートファイルの基本的な例を以下に示します。
この例では、商品ページが main-product.liquid というセクションでレンダリングされ、デフォルトで表示されるのはこのセクションだけとなっています。マーチャントがこのページをカスタマイズしてセクションを追加する際は、product.json テンプレートファイルはこの情報と共にアップデートされることになります。後ほどこの記事内でセクションをテンプレートに含める方法を確認する際、もう一度このプロセスを詳しく追っていきましょう。
セクションの基礎
セクションとJSONテンプレート(英語)を使用してテーマを開発するときには、2つの明確なカテゴリーにセクションファイルを分けることが考えられます。メインページセクションと、個別のモジュールコンポーネントです。
メインページセクション
メインページセクションには、そのページのすべてのデフォルトコンテンツを含める必要があります。たとえば、商品ページのメインセクションには、商品タイトル、商品説明、メディア、価格、「カートに追加する」フォームなど、商品を表示する重要な要素とその関連プロパティを含めることになるでしょう。
セクションが含まれるページテンプレートに応じて、Liquidの変数やオブジェクトにもセクション内でアクセスできます。つまり、product.json テンプレートファイルでレンダリングされるセクションは、Liquidオブジェクト product (英語)のどの属性にもアクセスすることが可能です。これはレンダリングされるページの商品を表しています。
同様に、collection.json ファイルにあるセクションは、Liquidオブジェクトcollection (英語)の属性にアクセス可能です。すべてのセクションは、どこに表示されるかに関係なく、Liquid globalオブジェクト (英語)にアクセスできます。
メインページセクションに追加するページ特定のLiquidオブジェクトやマークアップに加えて、{% schema %} タグ (英語)に設定を作成することも可能です。これらはセクション内の要素を参照でき、マーチャントがテーマエディターでも構成できます。
メインページセクションにはページタイプ指定のマークアップが含まれるため、関連するテンプレート内にのみ挿入することになります。テーマエディターでほかのタイプのページに追加されてしまうことを防ぐために、section schemaにpresets (英語)を入れないようにしてください。
メインページセクションの例を確認するには、Dawnの /sections ディレクトリにあるmain-product.liquidファイル、またはタイトルの接頭辞が main となっているセクションをご参照ください。一般ルールとして、セクションタイプを区別するために、メインページセクションのタイトルには main を入れるようにしましょう。
モジュールセクション
モジュールセクションは、ネットショップのさまざまな箇所で再利用でき、ページのメイン要素を補完するセクションです。このタイプのセクションの例として、特集コレクション、スライドショー、ニュースレター登録フォームなどが挙げられます。
これらのセクションはページテンプレートにデフォルトで設置されるよりも、マーチャントによってテーマエディターで追加されるほうが一般的です。エディターでページにセクションを追加するには、schemaにpresetsが含まれている必要があります。presetsが追加されていれば、マーチャントがテーマエディターで「セクションを追加」をクリックしたときにオプションとしてそのセクションが表示されます。
「メイン」ページセクションとは対照的に、モジュールセクションにはShopifyストア上の異なる文脈、異なるページタイプで横断的に再利用されるコンテンツやマークアップが含まれます。そのため開発者は、これらのセクションではページを特定するLiquidオブジェクトに依存しないよう心がける必要があります。
一方、section schema内の templates 属性 (英語)を使って、セクションが特定のページタイプのみで利用できるように制限することも可能です。たとえば、商品ページとコレクションページだけに限定したい場合、そのセクションの schema タグに以下の行を入れます。
"templates": ["product", "collection"]
templates 属性は、ページタイプ(英語)を表す文字列のリストを受け取ります。
テーマに含めたい機能に応じて、またはクライアントの指定する要件に応じて、独自の機能を提供する多様なセクションを作成することができるのです。モジュールセクションの例として、Dawnで使用されているnewsletter sectionまたはrich-text sectionをご覧ください。
セクションの設定
マーチャントが使えるカスタマイズオプションを作成するセクションファイルの設定について軽く触れましたが、どのように構成したらいいのか、もう少し詳しく見ていきましょう。
ここまで確認してきたように、設定はセクションファイルの {% schema %} タグ内に含まれ、テーマエディターのUIにレンダリングされることを示しています。custom textセクションにおける簡単な事例が以下になります。
この例では、2つのHTML要素が確認できます。見出しと段落です。この要素には、Liquidオブジェクトの section.settings で作成した動的コンテンツが含まれます。このセクションオブジェクトによって、設定の値をユニークIDを参照して取得できます。
HTMLとLiquidマークアップの下には、{% schema %} タグ内にこのセクションの設定があります。それぞれの設定はオブジェクトとして表され、id 、type 、およびエディターでの表示方法を定義できます。Liquidのセクション設定にアクセスするには、Liquidオブジェクト section.settings に id を追加します。ここではtype とテーマエディターでの表示内容も定義しています。
schemaタグの設定にあるものは以下の内容です。
- id：定義されるLiquid変数
- type：作成するoutputの種類
- label：テーマエディターで表示される文脈
- default：デフォルトの値
この例では見出し用の text ボックスと段落用の richtext ボックスを作成しましたが、クライアントの要求に合わせて多彩なoutput typeを追加することができます。ほかの有効なinput typeには、image_picker 、radio 、video_url 、font_picker などがあります。
この例はすでに有効なセクションとなっていますが、重要な点が欠けています。テーマのどこにセクションが表示されるのか正確に定義されていません。セクション挿入方法をいくつか後で確認しますが、いまはセクションにpresetsを作成することでテーマエディターからどのページにもセクションを追加できるようにします。
presetsはセクションのデフォルトの構成要素であり、{% schema %} タグ内に追加されます。こちらがそのシンプルな例です。
kokoyo"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]kokoyo
事例のコードに反映すると、custom text-boxセクションは次のようになります。
これで、テーマエディターの任意のページで「セクションを追加」を選択すると、利用可能なオプションとしてこのセクションが表示されます。作成したセクションの設定は、右のサイドバーに、追加したlabelとデフォルトのテキストによって表示され、セクションに現れるはずのinput text settingsの入力も可能になります。
これは、セクションの設定とセクション内に作成できる変数の関係を示す簡単な例です。また、それらがテーマエディターでどのようにレンダリングされるかを示しています。より高度なモデルについては、Dawnのrich textセクションをご覧ください。
ページ内にセクションを挿入する方法
すでに触れたように、テーマのページ内にセクションを追加する方法はいくつかあります。それぞれのアプローチを個別に見ていきましょう。適用すべきルールも同時に確認します。
1 JSONテンプレートにセクションを入れる
メインページセクションのところで見たように、JSONテンプレートファイルは、そのページタイプのデフォルトセクションとなる "main" プロパティを受け取ることができ、ここにはそのページの重要コンテンツがすべて含まれている必要があります。
"main” セクション以外にも、デフォルトで表示されるほかのセクションをJSONテンプレートに入れることが可能です。商品のJSONテンプレートを例にするなら、新しいオブジェクトを "main” セクションの下に追加することで「おすすめ商品セクション」を挿入できます。
この例では、recommendations という名称がセクションに付与され、typeプロパティが /sections ディレクトリのどのファイルを挿入するかを特定するために使用されています。
このJSONテンプレートは1つ以上のセクションを参照しているため、order オブジェクトを使ってセクションの表示順を定義する必要があります。JSONテンプレートに含まれるそれぞれのセクションはあらかじめ順序を指定されますが、マーチャントはテーマエディターでセクションの入れ替えが可能です。
JSONテンプレートに追加されたセクションにpresetsがない場合、そのセクションはテーマエディターから削除できません。ただし、マーチャントに必要ないセクションなら非表示にすることが可能です。JSONテンプレートでセクションを配置する実際の事例として、Dawn product templateをチェックしてみてください。
2 すべてのページにオプションとしてセクションを入れる
custom textのところで確認しましたが、schema 設定に presets がある場合には、テーマの全ページでそのセクションが利用できます。
"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]
このアプローチでは、テーマエディターからセクションの追加、再配置、削除が可能です。templates プロパティ(英語)によって、指定ページのみにセクション利用を限定することもできます。
このようなドラッグ&ドロップ機能のおかげで、動的セクションをカスタム構築するときに、ストアをパーソナライズする多様なオプションが提供できることになります。動画、商品、画像ギャラリーなどの移動可能なセクションが作成できます。この方法によるセクションの例として、Dawnのnewsletter sectionをご参照ください。
3 静的セクションを追加するために{% section %} タグを使う
Liquidの section タグによって、layoutまたはtemplateファイルにある /sections ディレクトリのセクションをレンダリングすることができます。このタグは次のように使われます。
{% section 'header' %}
section タグを使って追加されたセクションは、テーマエディターで移動、再配置、非表示ができません。ページにおけるこのセクションの位置は、layoutまたはtemplateファイルに追加された場所に応じて、固定されます。
ヘッダー、フッター、お知らせ欄などのように、つねに表示させるコンテンツとコンポーネントの場合は、このアプローチがもっとも一般的です。Dawnの事例で確認するには、theme.liquidファイルをご覧ください。静的なヘッダーセクション、フッターセクション、お知らせ欄が section タグで挿入されています。
クリエイティブの力を解放する
テーマ内にセクションを追加する方法をここまで確認してきました。クライアントのストアに無限のオプションを構築できることが、おわかりいただけたと思います。
JSONテンプレートを使うことで、テーマ内のすべてのページでセクションを活用できるようになりますので、マーチャントは希望通りのストアが作成できます。あなたのアドバイスがあれば、なおさらうまくいくでしょう。
原文：Liam Griffin 翻訳：深津望
