- オンラインストア2.0とは何かを知りたい
- オンラインストア2.0に移行後のテーマと、移行前との違いを知りたい
- テーマをオンラインストア2.0への移行する方法を知りたい
早速Shopifyの既存テーマをオンラインストア2.0に移行する方法についてまとめます。
Liquidコードを編集する際には、バックアップを必ず行い、テスト環境で確認を行うなど、自己責任のもとに行ってください。万が一不都合等が起きた場合でも当方は責任を負いかねますのでご注意ください。
Shopifyのオンラインストア2.0とは
オンラインストア2.0の機能は、2021年6月30日にオンラインで開催された「Shopify Unite 2021」にて発表されました。
オンラインストア2.0では、テーマのほとんどのページにセクションを追加することができる新しいJSONテンプレート形式が導入されており、待望の「Sections Everywhere」機能が実現しました。
これにより、マーチャントはテーマに用意されているセクションであれば、開発者に依頼することなく、多くのページに自由にセクションを追加することができます。（もちろん用意されていないセクションはカスタマイズが必要）
他にも、コードを編集せずにテーマにアプリを追加したりできる「アプリブロック」や、「カスタムメタフィールド」などの強力な機能がオンラインストア2.0には追加されています。
https://torublog.com/shopify-metafields/
Shopifyの既存ストアがオンラインストア2.0に移行されているか確認する方法
オンラインストア2.0で、テーマエディターが新しくなりました。
管理画面の「オンラインストア」→「カスタマイズ」を選択し、テーマエディターの画面を開くと、左のセクション選択の部分が変わっているのがわかります。
旧テーマエディター
新しいテーマエディター
新しいテーマエディターは、より高速化され、使いやすく変わっています。
左のセクションを選択すると、画面幅が1600px未満の場合は左側に、1600px以上の場合は右側に編集項目が表示されます。
この新しいテーマエディターへは順次自動的に変更されます。
2021年7月9日現在で反映されていたため、多くのストアはすでに切り替わっているかと思いますが、何もしない状態だとエディターが変わっているだけで、テーマをオンラインストア2.0対応のテーマに変更するか、既存テーマをカスタマイズして移行しない限り、OS2.0の全てを利用することはできません。
Shopifyの既存テーマをオンラインストア2.0へ移行する方法
公式の移行方法については以下に記載されています。
Migrating a theme to Online Store 2.0
実際に既存テーマをオンラインストア2.0に移行してみます。
具体的には、テーマファイルの /templates フォルダ以下にあるLiquidテンプレートをJSONテンプレートに変換する必要があります。
JSONテンプレートとは、そのテンプレートに表示するセクションの設定情報のみが記載されます。
- レンダリングするセクションファイル（Liquidファイル）の指定
- レンダリングするセクションの順番の指定
- レイアウトファイルの指定（デフォルトは theme.liquid）
- ラッパー要素の指定（セクションの周りにHTMLタグを挿入できる）
など
これまでの product.liquid などのテンプレートファイルに記載されていた、実際にレンダリングするセクションの内容は /sections フォルダに格納して、JSONファイルから指定します。
早速JSONテンプレートに移行してみます。
事前準備（Shopify CLI for themeのインストール）
まず事前準備として、これまでTheme Kitを使っていた場合、Theme KitではJSONテンプレートはサポートされていないため、Shopify CLIをインストールする必要があります。
※Shopify CLI を使わない場合は管理画面の「コードを編集」から行います。
テーマをバックアップする
次に念のためテーマをバックアップしておきます。
管理画面の「オンラインストア」→「アクション」から、「複製する」を押してしばらく待てばOK。
LiquidテンプレートからJSONテンプレートに移行する
今回は例として、Debutテーマの以下の主要なテンプレートで行います。
- product.liquid
- collection.liquid
- page.liquid
今回はデフォルトのコードで行うため、すでにカスタマイズしている場合は編集する箇所や方法は異なる場合があります。（色々カスタマイズしている場合は大変、もしくは作り直した方が早いかも）
まず {% section ‘<section-name>’ %} のようにセクションファイルへの参照がテンプレートファイルに含まれる場合、JSONファイルには含めることができないため、コードから削除する必要があります。
product.liquid の場合
既存のコードをテンプレートからセクションファイルに移動する
商品ページの場合、以下のセクションファイルへの参照が含まれるため、
{% section 'product-template' %}
{% section 'product-recommendations' %}これらを product.liquid から削除します。
ただ削除した後も product.liquid 内には以下のようなコードが残っています。
{% if collection %}
<div class="text-center return-link-wrapper page-width">
<a href="{{ collection.url }}" class="btn btn--secondary btn--has-icon-before return-link">
{% include 'icon-arrow-left' %}
{{ 'products.product.back_to_collection' | t: title: collection.title }}
</a>
</div>
{% endif %}
・・・・・（以下省略）これらを新しいファイルとして /sections フォルダに作成しても良いのですが、product-template.liquid の中に移動してしまいます。
全体をコピーして、 product-template.liquid の
{% schema %}の上に全部ペーストして保存します。
Liquidファイルを削除する
するとコピー元の product.liquid は空になるので、このファイルは削除します。
/templates フォルダの中に、同じ名前のテンプレートのLiquidファイルとJSONファイルは共存できません。
JSONファイルを作成する
最後にJSONファイル product.json を /templates フォルダに作成します。
最初に削除したセクション参照の「product-template」「product-recommendations」を読み込むため、以下を記載します。
{
"name": "Product",
"sections": {
"main": {
"type": "product-template"
},
"recommendations": {
"type": "product-recommendations"
}
},
"order": [
"main",
"recommendations"
]
}
これで保存し、管理画面の「オンラインストア」→「カスタマイズ」のテーマエディタにて「Products」ページを表示すると、以下のように「商品ページ」「商品の推奨」が今まで通り設定でき、さらにその下に「セクションの追加」が表示されていることがわかります。これでこのページに自由にセクションを追加できます。
以下の 上が変更前、下が変更後。
collection.liquid の場合
Liquidファイルを削除する
collection.liquid は、デフォルトでは以下のコードしか入っていません。
{% comment %}
The contents of the collection.liquid template can be found in /sections/collection-template.liquid
{% endcomment %}
{% section 'collection-template' %}
この場合はJSONファイルから「collection-template」を参照すれば良いだけのため、product.liquid のように既存のコードをテンプレートからセクションファイルに移動する必要はないため、そのまま collection.liquid を削除します。
JSONファイルを作成する
最後にJSONファイル collection.json を /templates フォルダに作成します。
削除したセクション参照の「collection-template」を読み込むため、以下を記載します。
{
"name": "Collection",
"sections": {
"main": {
"type": "collection-template"
}
},
"order": [
"main"
]
}
これでコレクションページもセクションを自由に追加できるようになりました。
管理画面の「オンラインストア」→「カスタマイズ」のテーマエディタにて「Collections」ページを表示すると、以下のように「コレクションページ」が今まで通り設定でき、さらにその下に「セクションの追加」が表示されていることがわかります。これでこのページに自由にセクションを追加できます。
page.liquid の場合
page.liquid はデフォルトで以下のコードになっています。
<div class="page-width">
<div class="grid">
<div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
<div class="section-header text-center">
<h1>{{ page.title }}</h1>
</div>
<div class="rte">
{{ page.content }}
</div>
</div>
</div>
</div>
Liquidファイルを移動する
特にセクション参照部分はないため、この場合はそのまま /sections フォルダに移動します。名前は前のままでも何でも良いですが、「main-page.liquid」としておきます。
JSONファイルを作成する
最後にJSONファイル page.json を /templates フォルダに作成します。
先ほど移動したセクション参照の「main-page」を読み込むため、以下を記載します。
{
"name": "Page",
"sections": {
"main": {
"type": "main-page"
}
},
"order": [
"main"
]
}
これでページもセクションを自由に追加できるようになりました。
管理画面の「オンラインストア」→「カスタマイズ」のテーマエディタにて「Pages」ページを表示すると、以下のように「セクションの追加」が表示されていることがわかります。これでこのページに自由にセクションを追加できます。
今回例として移行した3つのテンプレート以外も、同じように行えば移行ができます。
また、オンラインストア2.0に移行したテーマは、新しいメタフィールドも利用可能となります。
https://torublog.com/shopify-metafields/
以上です！
