最初の Shopify テーマ セクションを作成する方法

公開: 2022-07-07

オンライン ストア 2.0 の発表

オンライン ストア 2.0 は、2021 年 6 月に開始された、Shopify でのテーマの構築方法のエンド ツー エンドのオーバーホールです。次の記事の情報は正しいものですが、オンライン ストア 2.0 のベスト プラクティスは考慮されておらず、含まれていない可能性があります。最近の特徴や機能への言及。 Online Store 2.0 を使用してビルドする方法の詳細については、更新されたドキュメントにアクセスしてください。

ドキュメントにアクセス


特にストアフロントをカスタマイズする機能が必要な場合は、クライアントに創造的なコントロールを与えることが重要です. Shopify のセクション機能は、Shopify のテーマをパーソナライズするための強力なツールであるため、それらを効率的に使用し、ベスト プラクティスに従うことで、クライアントにさまざまなオプションを提供できます。

Shopify テーマをゼロから構築する場合、またはクライアントのテーマを微調整する場合は、コンテキストによって異なるいくつかの異なるタイプのセクションを作成する必要があります。 さらに、顧客はユーザー フレンドリーで直感的なエクスペリエンスを期待しています。つまり、適切なセクションを適切な場所に置くことで、コンバージョンに大きな影響を与えることができます。

この記事では、さまざまな種類のテーマ セクションの作成を開始する方法と、それらを使用するためのルールについて説明します。これにより、クライアントがストアをカスタマイズできるようになります。 また、ソースが利用可能な Dawn テーマから特定のセクションの例をいくつか調べて、実際のシナリオでそれらをどのように使用できるかを正確に示します。

テーマセクションとは何ですか?

大まかに言うと、セクションはマーチャントがカスタマイズできるShopifyテーマのモジュールコンポーネントです。 セクションには、商品ページの基本要素やスライドショー コンポーネントなど、Shopify ストアの特定の領域のコンテンツと設定が含まれています。

これらのセクション内で、開発者は、テキスト入力や画​​像ピッカーから、マーチャントがテーマ エディターからカスタマイズしてコンテンツを入力できるカスタム HTML やメニューまで、さまざまな種類の設定にアクセスできます。

セクションはテーマの/sectionsディレクトリに含まれ、テーマのレイアウト ファイル (ヘッダーやフッターなど) に静的に含めることも、テーマ エディターから任意のテンプレートに動的に追加することもできます。 セクションとして表すことができるさまざまなコンポーネントの感覚をつかむために、Dawn テーマの/sectionsディレクトリを調べることができます。

オンライン ストア 2.0 のリリースにより、セクションは、ページ全体から個々の要素まで、テーマのさまざまな側面をすべて整理する主要な方法として使用できるようになりました。 この記事で説明するように、任意の JSON テンプレートにセクションを追加する機能により、さまざまなページを簡単に配置できるようになり、マーチャントがテーマをカスタマイズするときにさらに強化できます。

テンプレートとセクション

Shopify テーマでセクションがどのように機能するかを学習するための前提条件の 1 つは、Shopify のテーマ テンプレート システムを理解することです。 オンライン ストア 2.0 では、各ページ タイプをテーマの/templatesディレクトリ内の.jsonファイルとして表すことができます。 開発者は、これらの JSON テンプレート ファイルにデフォルトで表示されるセクションを定義することで、各ページ タイプを構造化できます。

これらの JSON テンプレートには、ストア コンテンツを表示するためのマークアップや Liquid オブジェクトは含まれません。これらは、ページにデフォルトで表示されるセクションとその順序を示す単なるデータ ファイルです。

product.jsonテンプレート ファイルの基本的な例は次のようになります。

この場合、製品ページはmain-product.liquidというセクションでレンダリングされ、デフォルトで表示される唯一のセクションになります。 マーチャントがこのページをカスタマイズし、ページにさらにセクションを追加すると、 product.jsonテンプレート ファイルがこの情報で更新されます。 この記事では、セクションがテンプレートにどのように含まれているかを見て、このプロセスについて詳しく説明します。

セクションの基本

セクションと JSON テンプレートを使用してテーマを開発する場合、「メイン」ページ セクションと個々のモジュラー コンポーネントという 2 つの異なるカテゴリでセクション ファイルを作成することを検討できます。

メインページのセクション

メイン ページ セクション内に、そのページのすべてのデフォルト コンテンツを含める必要があります。 たとえば、製品ページのメイン セクションには、製品を表示するための重要な要素と、製品のタイトル、説明、メディア、価格、カートに追加フォームなどの関連プロパティを含めます。

セクションが含まれているページ テンプレートに基づいて、セクション内の Liquid 変数またはオブジェクトにアクセスできます。これは、 product.jsonテンプレート内でレンダリングされるセクションが、 product Liquid の任意の属性にアクセスできることを意味します。ページがレンダリングされている製品を表すオブジェクト。

同様に、 collection.jsonファイルに含まれるセクションは、 collection Liquid オブジェクトのすべての属性にアクセスできます。 すべてのセクションは、表示される場所に関係なく、任意の Liquid グローバル オブジェクトにアクセスできます。

メイン ページ セクションに追加するマークアップとページ固有の Liquid オブジェクトに加えて、 {% schema %}タグ内で設定を作成することもできます。 これらの設定はセクション内の要素を参照でき、マーチャントはテーマ エディターで構成できます。

メイン ページ セクションには 1 つのタイプのページに固有のマークアップが含まれているため、関連するテンプレート内にのみ含める必要があります。 メイン ページ セクションがテーマ エディターから他のページ タイプに追加されないようにするには、セクション スキーマ内にプリセットを含めないようにする必要があります。

メイン ページ セクションの例を表示するには、Dawn の/sectionsディレクトリにあるmain-product.liquidファイル、またはタイトルの先頭にmainが付いているセクションのいずれかを調べることができます。 原則として、異なるセクション タイプを区別しやすいように、メイン ページ セクションには、タイトルにmainを含む名前を付ける必要があります。

モジュラーセクション

モジュラー セクションは、オンライン ストアのさまざまな領域で再利用できるセクションであり、ページの主要な要素を補足します。 これらのタイプのセクションの例には、注目のコレクション、スライドショー、ニュースレターのサインアップ フォームなどがあります。

これらのセクションは通常、デフォルトでページ テンプレートに追加されるセクションではなく、テーマ エディタを使用してマーチャントによってページに追加されます。 エディターを使用してセクションをページに追加するには、セクションのスキーマ内にプリセットが含まれている必要があります。 これらのプリセットが追加されると、マーチャントがテーマ エディターで [セクションの追加] をクリックしたときに、セクションが使用可能なオプションになります。

Shopify theme section: Gif of the theme editor options, cursor selecting

「メイン」ページ セクションとは対照的に、モジュラー セクションには通常、Shopify ストアのさまざまなページ タイプやさまざまなコンテキストで再利用できるコンテンツとマークアップが含まれています。 したがって、開発者は、これらのセクション内でページ固有の Liquid オブジェクトに依存することを避ける必要があります。

ただし、セクション スキーマ内のtemplates属性を使用して、セクションを特定のページ タイプでのみ使用できるように制限することは可能です。 たとえば、セクションを製品ページとコレクション ページのみに制限する場合は、セクションのschemaタグ内に次の行を含めます。

 "templates": ["product", "collection"]

templates属性は、ページの種類を表す文字列のリストを受け入れます。

テーマに含めたい機能、またはクライアントの特定の要件に基づいて、独自の機能を有効にするさまざまなセクションを作成する可能性があります。 モジュール セクションの例を表示するには、Dawn で使用されているニュースレター セクションまたはリッチテキスト セクションを参照してください。

セクション設定

セクション ファイルの設定を使用して、マーチャントがアクセスできるカスタマイズ オプションを作成する方法について簡単に説明しましたが、もう少し深く掘り下げて、それらがどのように構築されているかを見てみましょう。

これまで見てきたように、設定はセクション ファイル内の{% schema %}タグ内に含まれています。これは、これらがテーマ エディターの UI に表示される設定であることを示しています。 これの非常に単純な例は、次のようなカスタム テキスト セクションで見ることができます。

この例では、見出し要素と段落要素の 2 つの HTML 要素があります。 これらの各要素には、 section.settings Liquid オブジェクトで作成した動的コンテンツが含まれています。 このセクション オブジェクトを使用すると、設定の一意の ID を参照して設定値を取得できます。

HTML と Liquid マークアップの下には、 {% schema %}タグに含まれるセクション設定があります。 各設定はオブジェクトで表され、設定id 、そのtype 、およびエディターでの表示方法を定義できます。 Liquid でセクションの設定にアクセスするには、そのidsection.settings Liquid オブジェクトに追加します。 また、設定の種類と、テーマ エディターでの表示方法も定義します。

スキーマタグの設定内:

  • idは、定義されている Liquid 変数を参照します
  • typeは、作成する出力の種類を定義します
  • labelは、テーマ エディターに表示されるコンテキストを提供します
  • defaultはデフォルト値を割り当てます

この例では、見出し用のテキスト ボックスと本文用のrichtext textボックスを作成しましたが、クライアントの要件に応じて、さまざまな出力タイプを追加できます。 その他の有効な入力タイプには、 image_pickerradiovideo_url 、およびfont_pickerが含まれます。

この例は有効なセクションになりましたが、重要な側面が 1 つ欠けています。それは、セクションがテーマのどこに表示されるかを正確に決定することです。 後でセクションを含めるためのいくつかの異なるアプローチを検討しますが、今のところ、セクションでプリセットを作成することにより、テーマ エディターを介して任意のページにセクションを追加できるようにします。

プリセットはセクションのデフォルト設定であり、セクションの{% schema %}タグ内に追加されます。 簡単な例では、プリセットは次のようになります。

 "presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

この例に追加すると、カスタム テキスト ボックス セクションは次のようになります。

ここで、テーマ エディターに移動し、任意のページで [セクションの追加] を選択すると、このセクションが使用可能なオプションとして表示されます。 作成したセクション設定は、追加したラベルとデフォルトのテキストとともに右側のサイドバーに表示され、セクションに表示される入力テキスト設定を入力できます。

Shopify theme section: Gif of cursor playing around with section settings and the different variables you can adjust

これは、セクション設定とセクション内で作成できる変数との関係、およびこれらがテーマ エディターでどのようにレンダリングされるかを示す簡単な例です。 より高度なモデルについては、Dawn テーマのリッチ テキスト セクションを調べることができます。

ページにセクションを含める

すでに触れたように、テーマのページにセクションを含める方法はいくつかあります。 これらの各アプローチを個別に調べて、それらに適用されるルールのいくつかを解き明かしましょう。

1. JSON テンプレートにセクションを含める

メイン ページ セクションを調べたところ、JSON テンプレート ファイルが"main"プロパティを受け入れることがわかりました。これは、そのページ タイプのデフォルト セクションとなり、そのページのすべての重要なコンテンツ要素を含める必要があります。

"main"セクションに加えて、そのページ タイプにデフォルトで表示される JSON テンプレートに他のセクションを含めることもできます。 製品の JSON テンプレートを例として使用すると、 "main"セクションの下に新しいオブジェクトを追加することで、ページに製品の推奨セクションを含めることができます。

この場合、セクションに名前を割り当て、 recommendationstypeプロパティを使用して、含めたい/sectionsディレクトリ内のファイルを識別します。

この JSON テンプレートは複数のセクションを参照しているため、 orderオブジェクト内でセクションがどのように順番に表示されるかを定義する必要があります。 JSON テンプレートに含まれるすべてのセクションにデフォルトの順序を割り当てる必要がありますが、マーチャントはテーマ エディターでセクションを並べ替えることができます。

JSON テンプレートに追加されたプリセットのないセクションは、テーマ エディターで削除できませんが、マーチャントが必要としない場合は非表示にすることができます。 JSON テンプレートでセクションを配置する方法の実際の例については、Dawn 製品テンプレートを調べることができます。

2. すべてのページにオプションとしてセクションを含める

カスタム テキストで見たように、 schema設定内にpresetsが存在する場合、テーマのすべてのページでセクションを利用できるようにすることができます。

 "presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

"presets": [
{
"name": "custom-text",
"category": "Custom"
}
]

このアプローチを使用して含めると、これらのセクションをテーマ エディターから追加、再配置、および削除できます。 これらのセクションは、 templatesプロパティを使用して特定のページに限定することもできます。

このドラッグ アンド ドロップ機能は、カスタムの動的セクションを作成すると、店舗をパーソナライズするための幅広いオプションが利用できるようになることを意味します。 ビデオ、製品、または画像ギャラリーの可動セクションを作成できます。 この方法を使用するセクションの良い例は、Dawn のニュースレター セクションです。

3. {% section %} タグを使用して静的セクションを追加する

Liquid sectionタグを使用すると、Liquid レイアウトまたはテンプレート ファイルの/sectionsディレクトリからセクションをレンダリングできます。 このタグは次のように表示されます。

 {% section 'header' %}

このsectionタグを使用して追加されたセクションは、テーマ エディターで削除、再配置、または非表示にすることはできません。 ページ上のこのセクションの位置は、レイアウト ファイルまたはテンプレート内で追加された場所に基づいてロックされます。

このアプローチは、ヘッダー、フッター、アナウンス バーなど、常に表示する必要があるコンテンツやコンポーネントに最もよく使用されます。 Dawn でこの例を確認するには、静的アナウンス バー、ヘッダー セクション、およびフッター セクションがsectionタグで追加されている theme.liquid ファイルを確認してください。

クリエイティビティを強化

セクションを作成してテーマに追加する方法がわかったので、クライアントのストアに無限のオプションを構築できます。

JSON テンプレートを使用すると、テーマのすべてのページのセクションの力が解き放たれます。これにより、マーチャントは、あなたの指示に従って、希望どおりにストアを構築できます。

Shopify パートナー プログラムでビジネスを成長させましょう

ウェブデザインおよび開発サービスを提供する場合でも、Shopify アプリストア用のアプリを構築したい場合でも、Shopify パートナープログラムは成功への準備を整えます。 無料で参加して、収益分配の機会、開発者プレビュー環境、教育リソースにアクセスしてください。

サインアップ

この記事は、Shopify Web Design and Development ブログに最初に掲載されたものであり、より広い発見のネットワークを教育しキャストするためにここで利用可能になっています.
共有2
つぶやき
シェア
バッファ
2