Shopifyは最も重要な変更を発表しました。それがShopifyオンラインストア2.0です。これは、柔軟なストアを構築するのに役立つ新しいインフラ、ツール、およびテクノロジーを指します。以下に、Shopifyオンラインストア2.0の新しいツールと機能があります：

• アップグレードされたテーマアーキテクチャ： すべてのページにセクションが利用可能になったことで、皆さまのような小売業者は、顧客体験を個別にカスタマイズし、改善するための新しい機会を見つけることができます。
• 柔軟なストアコンテンツ：
• アプリブロックを使用したテーマアプリ拡張機能では、複数のShopifyアプリを簡単に統合および削除できます。遺留コードは残りません。
• 改善されたテーマエディタを使用すると、メタ値を動的に追加できます。つまり、製品に簡単に任意の追加情報を追加できます。詳細については、当社のShopify 2.0改良メタフィールドブログをご覧ください。
• テーマエディタの改良： 変更を行うために複数の層に入り込む必要はありません。改良されたテーマエディタは、サイドバーやページのすべてのコンテンツのツリービューを表示します。
• 新しい開発者ツール： GitHubの統合、アップグレードされたShopify CLI、およびテーマチェックツールにより、Shopify開発者はストア開発を向上させるのに役立ちます。
• 新しいリファレンステーマ： オンラインストア2.0の柔軟性をサポートするように設計され、ビルドされたShopify Dawnテーマは、最初のソース利用可能なリファレンステーマです。このテーマについては、当社の詳細なShopify Dawnテーマのレビューブログをご覧ください。

当社のShopify 2.0紹介ブログで、Shopifyオンラインストア2.0の最新情報をご確認ください。

Shopifyオンラインストア2.0を開始するための手順

オンラインストア2.0にテーマを移行する前に、開発ツールを決定する必要があります。改良されたShopify CLIを使用する場合、以下のコマンドに従ってCLIをインストールする必要があります。

Windowsの場合：

• ステップ1：まず、Windows向けRuby Installerを使用して、Ruby+Devkitをインストールします。
• ステップ2：RubyGems.orgパッケージマネージャーを使用して、Shopify CLIをインストールします。
• ステップ3：新しいターミナルを開き、ホームディレクトリに移動し、「gem install shopify-cli」コマンドを実行します。
• ステップ4：インストールを確認するには、「shopify version」コマンドを実行する必要があります。

macOSの場合：

• RubyGems.orgを使用する場合は、ステップ3とステップ4を実行してインストールおよび確認を行います。
• Homebrewを使用する場合、「brew tap shopify/shopify」と「brew install shopify-cli」というコマンドを実行してインストールし、確認にはステップ4に従ってください。

Shopifyオンラインストア2.0へのテーマ移行手順

最適なShopify 2.0テーマを選択し、テーマアーキテクチャを理解するために、当社のShopify 2.0ベストテーマブログを参照してください。作業するテーマを特定したら、以下の手順に従ってください

ステップ1：テーマをバックアップする

進む前に、迷子になった場合のバックアップオプションを持つことは常に安全です。テーマ開発キットを使用している場合は、テーマを複製して非公開に保持してください。Shopify CLIを使用して、「shopify theme pull」コマンドを使用してテーマをダウンロードできます。

ステップ2：セクション参照を特定して削除する

セクションはShopifyオンラインストア2.0のすべてのページで利用可能になるため、ページタイプをJSON形式でレンダリングすることで、テーマのLiquidテンプレートをJSONテンプレートに変換する必要があります。

• 変換を開始するには、{% section %}タグを削除します。
• 次に、以下の手順に従って参照を削除します：
• ステップ1：/templatesディレクトリ内のファイルを見つけます（例えば、product.liquidファイルを考えましょう）。
• ステップ2：{% section %}タグを検索し、その場所と名前をメモします。
• ステップ3：product.liquidファイルからタグを削除します。

ステップ3：テンプレート形式からセクションにコードを移動する

セクションタグを削除した後、テンプレートコードを移動する場所を決定する必要があります。

• 既存のセクションにコードを追加する場合、
• 選択したセクションファイルを開きます
• product.liquidからコードをコピーします
• セクションファイルの{% schema %}タグの上にコードを貼り付けます
• 新しいセクションにコードを追加する場合、
• まず、/sectionsディレクトリに新しいファイルを作成します
• 次に、残りのコードを空のセクションファイルにコピーして貼り付けます

ステップ4：Liquidテンプレートファイルを削除する

コピー＆ペーストが完了したら、/templatesディレクトリのproduct.liquidファイルを削除する必要があります。なぜなら、/templatesディレクトリにproduct.liquidファイルとproduct.jsonファイルを同時に持つことはできないからです。

ステップ5：JSONテンプレートファイルを作成する

product.liquidファイルを削除した後、次の手順に従って代替のJSONテンプレートを作成できます：

• ステップ1：ファイルを作成します：
• コードエディタを使用する場合、
• 新しいテンプレートを追加します。
• テンプレートの作成タイプとして、productオプションを選択します。
• テンプレートタイプとしてJSONを選択します。
• ローカルで作成する場合は、新しいJSONファイルを作成し（この場合、product.jsonとします）、/templatesディレクトリに保存します。
• ステップ2：product.jsonファイルを作成した後、適切なタイプにデフォルトコードを置き換えます。
• ステップ3：ファイルを保存します。

ステップ6：テンプレートをテストする

JSONテンプレートを作成した後、テーマエディタから製品ページに移動し、「セクションを追加」オプションを探します。

2021年のBFCMセールにおいて、Shopifyオンラインストア2.0が小売業者とShopify開発者にどのような利益をもたらすかのモデルをご覧ください。詳細は、当社のShopify 2.0 BFCMの利点ブログをご覧ください。

ステップ7：セクションの参照と順序を追加する

product.liquidテンプレートファイルに追加のセクションが含まれている場合、作成したproduct.jsonファイル内でこれらの参照を定義し、その順序を定義できます。

ステップ8（オプション）：セクションにApp blocksのサポートを追加する

更新されたテーマアーキテクチャとテーマアプリ拡張機能の導入により、必要なスキーマを追加してブロックコンテンツをレンダリングできます。

• ブロックコンテンツをレンダリングするには：適切なタイプを確認し、{% render block %}タグを使用してブロックをレンダリングします。
• セクションにアプリブロックを追加するには：セクションのスキーマに@ appタイプのブロックを追加する必要があります。

ステップ9：ステップを繰り返します

すべてのセクションを変換するには、上記の手順1から手順7までを繰り返す必要があります。これにより、テーマがShopifyオンラインストア2.0と互換性があるようになります。

Shopify / Dawn Theme GitHubを介してDawnテーマShopifyをインストールする方法

Shopify / dawn theme GitHub経由でShopifyのDawnテーマをダウンロードすることはできません。Quickly ShopifyのDawnテーマをダウンロードするには、Shopifyテーマストアにアクセスし、Dawnテーマを検索します。

Shopify/dawn theme GitHubでは、テーマコードのビルドおよび変更履歴を追跡するのに役立ちます。Github統合を使用すると、Shopify開発者はテーマを編集する際にバージョン管理を安全に行い、変更のプレビューをライブテーマに適用する前に共有できます。

まとめ：

Shopify 2.0の機能を利用することは義務付けられているわけではありませんが、当社は皆さまとその他のお客様にShopifyオンラインストア2.0を体験していただくことを強くお勧めしています。これにより、基本的な機能を超えて成長するための柔軟性とオプションが提供されます。

Shopify Dawnテーマを実装、移行、または開始することに興味がある場合は、当社のShopifyオンラインストア2.0の専門家が新機能、アーキテクチャ、デザインスタイルなどを活用するのをお手伝いいたします。