【2021年12月最新】Shopifyがアップデート！Online Store 2.0の新機能とは？

最新テクノロジー、UI/UX、アート、マーケティングなどあらゆる技術・メソッドを用いてクライアントのデジタルトランスフォーメーションを支援しているスパイスファクトリー株式会社です。

こちらの記事では、2021年6月30日に発表された Shopify の Online Store 2.0 で追加された新要素をご紹介します。

また、スパイスファクトリーでは Shopify を用いた ECサイト開発、カスタマイズから運用保守まで一貫したサポートを行っています。詳しくはをご覧ください。ご興味がおありでしたら、ください。

非常に多くの新要素が発表されていますが、今回は特にコーディングが不要な範囲での新要素、コーディングが必要な範囲での新要素に分けてご紹介していきます。

すでに Shopify からテストストアが公開されています。
興味のある方は以下のリンクからご参照ください。

⇒Dawn A modern and flexible theme designed to help you express your brand

コーディングが不要な範囲での新要素

まずはコーディングが不要な範囲での新要素をご紹介します。
開発者にとってうれしい新要素がメインとなった今回のアップデートですが、プログラミングの知識がなくても生かすことのできる新要素も多数存在します。

各ページにセクションが登場

従来の Shopify では、柔軟に編集できる範囲がTOPページのみに限られていました。
しかし今回のアップデートによって、Shopify の全ページにセクションが追加され、サイト編集の柔軟性が向上しました。
具体的には、難しいコーディングをすることなく全ページをカスタマイズすることができます。

アプリブロックが実装

アプリブロックが実装されたことにより、どのようなテーマ・アプリを使用していてもアプリが高速で動作するようになりました。
また、アプリをテーマの内部に組み込むことも簡単になるなど、開発の敷居が大きく下がりました。

メタフィールドの進化

今までの Shopify ではメタフィールドを編集することはできませんでした。
しかし今回のアップデートで、配送期間・バックオーダーの日付などのメタフィールドを自由に編集することが可能になりました。
また、画像や PDF をメタフィールドにアップロードできるようになりました。

Shop Pay を利用したチェックアウトリンク

Shop Pay が進化しました。
具体的には ShopPay と連携したチェックアウトリンクの設置が可能になりました。
これにより、さらに顧客のコンバージョンを促すことができます。

チャックアウトリンクの詳しい説明については以下のリンクを参照ください。
⇒Shopifyヘルプセンター｜チェックアウトリンク

新テーマ Dawn の登場

従来人気のあった Debut に代わる新たなテーマとして Dawn が登場しました。
Dawn はソースの利用が可能な参照テーマです。
これにより、テーマのカスタマイズが容易になりました。
また、Debut よりも 35% も高速で動作することができます。

コーディングが必要な範囲での新要素

ここからは主に開発側で嬉しい新要素についてご紹介します。

テーマエディターの進化

エディターのサイドバーに、ページ内のすべてのコンテンツがツリー状で表示されるようになりました。
また、Liquid のコードを直接テーマに打ち込めるようになるなど、編集のしやすい環境が整備されました。

GitHubとの統合強化

GitHub との統合が進化しました。
具体的には、マーチャント側でカスタマイズ画面からアップデートを行った場合など、テーマ開発とメンテナンスにかかる負担が追跡・管理の側面で軽減されました。

弊社の開発体制に関しては、こちらの記事をご確認ください！

Shopify CLI の進化

Shopify CLI とは開発を行うためのコマンドラインツールです。これまで使用していた Theme kit より容易に環境構築を行うことができます。

また、これまで編集 -> リロードを繰り返し行わなければローカル上の変更が反映されませんでしたが、ホットリロード機能によりすぐに変更が反映されます。

公式情報では以下のように記載されています。

開発テーマ内での安全な開発、プレビュー、テーマ変更のテスト。
新たな開発サーバーによる、開発作業中の CSS と Liquid セクション変更のホットリロード 。
新テーマである Dawn をスタートポイントとして利用する新規テーマプロジェクトのイニシャライズ 。
コマンドラインからのテーマのプッシュと公開 テーマに対するテーマチェックの実行 。
商品、顧客情報、下書き注文などのテストデータのテーマへの反映。

開発テーマの登場

Shopify CLI を使用してローカル環境に開発テーマを作成することが可能になりました。

開発テーマはローカル環境のテーマのため、Shopify の管理画面に反映されません。
そのため、テーマの予期せぬ公開や編集の心配をすることなく開発が可能です。

また、開発テーマはローカル環境でテーマをプレビューすることが可能です。
プレビュー画面はコードを編集する事で即時ホットリロードされるため、編集内容をスピーディーに確認することが可能です。

さらに、ストアにアップロードされているテーマを直接編集するわけではないため、共同開発の時に編集の競合が発生する心配がなくなり、開発をスムーズに行うことができるようになりました。

テーマチェック機能の追加

テーマチェックは開発中のテーマコードが Liquid と JSON のコーディング規約に則っているかチェックしてくれるツールです。

コーディング規約違反のエラー・警告を表示してくれるようになったため、コーディング後にミスが発覚し、修正に時間がかかってしまうような事態が起こりにくくなりました。
テーマチェックは Shopify CLI をインストールすることで使用することができ、Visual Studio Code などのテキストエディタと連携させることも可能です。

進化したOnline Store 2.0を用いて効果的なECサイト運営を

以上、Shopify のOnline Store 2.0 で追加された新要素についてお伝えしてきました。
Shopify の利便性が向上し、より効果的なECサイト運営が可能になったことがご理解いただけましたでしょうか。

ぜひ進化した Online Store 2.0 を使いこなし、効果的なECサイト運営を行なってみませんか？
スパイスファクトリーは2022年現在、高い開発力を強みに、日本で50社程度しかない Shopify Expert として多数のプロジェクト支援実績を有しております。詳しいサービス内容については、当社HPの、をご覧ください