Shopifyオンラインストア2.0とは

2021年9月15日 13:59

Shopifyオンラインストア2.0で変わったこと

2021年8月から全世界にリリースされました。

①今までトップページにしか自由に配置できなかったセクションが
　他のページにも自由に配置できるようになった。

②アプリを入れるときはテーマのファイルに直接書き替えないと
　いけなかったのが、アプリ専用の拡張ポイントが追加されたので、
　そこにアプリ側のコードを出力されるようになった。
　テーマ側のコードを汚すことなくアプリ同士の干渉を防ぐことができる。

③メタフィールドが管理画面から登録ができるようになった。
　今まではAPIでしかメタフィールドをコントロールできなかった。
　テーマの動的ソース機能でテーマ側に反映できるようになった。

メタフィールドとは
商品やバリエーションに固有の情報を追加できる機能です。Wordpressでいうところのカスタムフィールドみたいなものです。
詳しくはrewiredさんの記事が参考になります！
https://rewired.cloud/new-metafields-shopify/

さらに詳しくはShopify公式ブログが参考になります！

Shopifyオンラインストア2.0で変わったこと
［テーマ開発者向け］

Shopifyオンラインストア2.0ではテンプレートファイルが変わりました。Sections everywhereが実装されました。

Sections everywhereとは
今までトップページだけセクションを設定できたのが、他のページでもセクションを追加・編集・削除できる機能です。

オンラインストア2.0になる前は、テンプレートファイルが「liquid」で書かれていましたが、「json」ファイルに変わりました。「json」ファイルを使わないと、トップページ以外にセクションを追加することができないようになっています。

Shopifyのテーマ構成
　Layout
　Templates
　Sections
　Snippets
　Assets
　Config
　Locales

テンプレートファイルが「liquid」から「json」ファイルになるとどう変わったのか？

以前の「liquid」を使ったテンプレートファイルは
・セクションタグでセクションファイルを読み込んでいた。
・「Config」フォルダのsettings.jsonに、セクションの内容や並び順、
　どんな画像が入っているかの情報が保存されている

オンラインストア2.0に変更後は
・「liquid」だったテンプレートファイルがjsonファイルに変わる。
・テンプレートごとにセクションをどの順番で最初に配置するかを
　決めることできる。（jsonファイルに記述する）
　以前、settings.jsonに記載されていた情報が各テンプレートファイルに
　データが保存されるようになる。
・この変更により、ほとんどすべてのページで管理画面からセクションを
　編集・追加・削除できるようになる。

セクションファイルの下にあったスキーマ（schema）は残っているのか？
セクションファイルの下にはスキーマ（schema）は変更なく残っています。（テンプレートファイルには元々スキーマは記載されていない）

セクションの内容や並び順や画像の情報を保存しているjsonファイルで使われているコードの解説
「Sections」は管理画面からセクションをドラッグアンドドロップで追加や削除ができるセクションについて記述されています。
「order」は、並び順に関することが記述されています。

テンプレートフォルダにあるJSONの詳細はShopify公式サイトで
ご確認できます。

taichi fukumotoさんが記事としてまとめてくれています。ありがたい。

少なくても1つのセクションファイルがないと、JSONファイルが動かないので、最初の設定で1つセクションを含めないといけないそうです。

ざっくりとしたイメージでは、セクションファイルの中は、見た目の記述や管理画面のメニューをカスタマイズできる記述があり、テンプレートファイルは管理画面で編集された情報や並び順などが記録されているイメージで、見た目と情報記録が分離されたイメージです。

セクションファイル　見た目部分
サイトの見た目の記述（HTMLなど）
管理画面のメニューのラベルなど表記等

テンプレートファイル　データ保持 JSON
管理画面で編集された情報を記録（内容や並び順など）

メタフィールド連携

ダイナミックソースとは
メタフィールドで独自で設定したものを直接settingの中に動的に表示することができること。JSONファイルの記述にLiquidが使えるようになった。

動的とはLiquidをつかうこと。Liquidで書いたコードはShopifyサーバーで処理されてから内容が表示される。
Shopifyサーバーで処理されて結果が出力されることを動的と呼んでいる。

（例）settingsのデフォルトのところに
　　　直接、Liquidの記述 {{ product.title }} 等のコードを書けるようになる
　　（もともとはテキストしか書けなかった）
　　　JSONファイルにLiquidも書けるようになった。

{
 "type": "text",
 "id": "featured_product_title",
 "label": "Featured product title",
 "default": "Featuring: {{ product.title }}"
}

オンラインストア2.0でセクション数の制限が20個まで、セクションの中のブロックは12個までとなりました。（以前はセクション数25個、ブロック無制限だった）
ブロック数が無制限のときは、FAQ用途でつかっていたが、オンラインストア2.0では12個までなので、対応が変わってくるのでJSONで記述するのではなくLiquidファイルで作成して対応するのが良いのではないか。
以前は、JSONでブロックの名前をtitleで任意に決めることができたが、オンラインストア2.0ではそれが消えたので、大量に同じ名前のブロックが並んでしまい、わかりずらくなった。

オンラインストア2.0に対応した無料テーマ「Dawn」

管理画面から触れるテーマエディターについて

管理画面から触れるメニューを増やす方法で、テーマファイルのセクションフォルダにあるJSONファイルを編集して、管理画面から触れるメニューを追加する方法を解説されています。

オンラインストア2.0に対応したテーマ

有料無料問わず、すでに40テーマほどオンラインストア2.0に対応したテーマがあります。

この記事が気に入ったらサポートをしてみませんか？