Shopify オンラインストア2.0–あなたが知る必要があるすべて

2020年には450億XNUMX万人以上がチェックアウトしました Shopify。 同社は、120億ドルを超える総商品量を処理しました。 それは明らかな事実です Shopify 巨大で大きくなっています。

Shopify 火曜日（29年2021月XNUMX日） 多くの新機能を発表、でストアを運営している人のためにプラットフォームをよりカスタマイズ可能にすることを目的としています Shopify。 オンライン Shopify 2.0は、の新機能とテーマの膨大なリストを提供します Shopify 商人。

からの言葉 Shopify オンラインストア2.0は、テンプレートの作成に使用する言語の最も重要な再構築の成果である、Liquid言語です。

手始めに、刷新されたオンラインストアにより、開発者はカスタマイズされた機能をストアフロントに簡単に追加できるようになります。 Netflixは早い段階でこのプラットフォームへのアクセスを受け取り、そのアクセスを使用してNetflix.shopを作成しました。これはNetflixの最初のeコマースストアです。

オンラインストア2.0があなたにとって何を意味するかについての簡単な概要は次のとおりです。

概要

Online Store 2.0の新機能は、新鮮な編集体験から始まります。 新しいエディターにより、マーチャントはストアフロントを最初から構築し、さまざまなテーマ拡張機能を追加し、テーマ内のアプリを管理することが非常に簡単になります。 新しいエディターのアイデアは、利用可能なすべての機能を一元化することでした。

開発中の新しい標準ストアフロントテーマである参照テーマDawnは、現在のデフォルトテーマよりも35％高速になります（内部見積もりによる）。 Shopify また、新しいテーマは15年2021月XNUMX日から開発者の提出のために開かれると述べました。

加えて、 Shopify また、同社はインフラストラクチャへの投資と開発者向けツールを大幅に増やす予定であることも明らかにしました。 その結果、マーチャントとしてのあなたは、ヘッドレスコマースストアフロントを構築したり、ストアフロントをカスタマイズしたりするために、プラットフォームを再構築するという頭痛の種を経験する必要がありません。

新しく改良されたオンラインストア2.0で、 Shopify プラットフォームを開発者や技術の巨人にもっと見えるようにしようとしています。 これを示す動きは、Netflix（前述）へのストア2.0への早期アクセスを提供していました。

オンラインストア2.0はすべてを網羅しています。 新しいストアでは、誰もが作成、カスタマイズ、拡張、および収益化するオプションを利用できます Shopify.

新しいテーマアーキテクチャ

以前のバージョンのオンラインストアでは、マーチャントはストア内で利用可能なブロックの数に制限がありました。 以前は、ストアにはさまざまな製品にマッピングされたさまざまなテンプレートがありました。 2.0バージョンでは、マーチャントとして、新しい各ページにセクションを追加するオプションがあります。 以前は、ホームページにセクションを追加することしかできませんでした。

ページの設定を指定するJSONテンプレートファイルを使用して、各ページのテンプレートをアクティブ化することができます。 これにより、ページ、コレクションページ、カスタムページ、ブログ投稿などのすべてのセクションを一覧表示できます。

JSONテンプレートファイル内で、表示されるセクションを定義できます。

テンプレートファイルは、デフォルトで表示されるセクションと、インストールするテーマに表示される順序を指定します。 テンプレートを追加したら、テーマエディタに移動して、動的セクションをテーマプリセットとして追加できます。

アプリブロックを使用したテーマアプリ拡張機能

開発者向けのテーマアプリ拡張機能は、拡張機能だけでなく多くの機能を追加するのに役立ちます。 あなたはこれの助けを借りて商人のサイト機能を拡張することができます

以前は、アプリをテーマと統合する方法はありませんでした。 その結果、開発者は既存のテーマの統合ロジックをコーディングする必要がありました。 このため、複数のテーマで一貫して機能する機能を作成することは非常に困難でした。 もはやそうではありません。

アプリのモジュール性

もうXNUMXつのハイライトは、アプリのモジュール性です。 これは単に、開発者として、テーマエディタを介してUIコンポーネントを追加および削除できるようになったことを意味します。 テーマのコードにアクセスする必要はありません。

これにより、アプリのサポートアセットを簡単に管理できます。 と Shopify 2.0アプリのサポートアセットを管理し、プラットフォーム上で非常に簡単にホストできます。

メタフィールドへの変更

更新されたテーマエディタを使用すると、マーチャントはメタフィールドとプロパティを追加できます。 幸いなことに、それを可能にするためにAPIやコーディングの形式は必要ありません。

マーチャントとして、商品ページに好きなコンテンツを自由に追加できます。formatサイズチャートや成分リストなど、潜在的なバイヤーを助けることができるイオン。 ストア エディターに表示される可能性が低いものはすべて、メタ フィールドを介して更新できます。

メタフィールドを変更するさまざまな方法を次に示します。

• 柔軟性：メタフィールドはより柔軟です。 これにより、コマースデータを安全にインポートできます。
• 標準メタフィールド：標準のメタフィールドを使用すると、カスタムテーマを、さまざまな業種の店舗ですぐに使用できるようになります。
• プレゼンテーションのヒント：ストアデータをレンダリングするためのメタフィールドにプレゼンテーションのヒントを追加できます

ファイルピッカー

Metafieldsは、画像やPDFファイルなどの多くのメディアをサポートするようになりました。 特定のファイルタイプをテーマにハードコーディングするのではなく、メタフィールドファイルピッカーが行うことは、選択したメディアを製品ページにアップロードできるようにすることです。

画像は設定/ファイルセクションからアクセスでき、すぐに使用できます。

製品保証やサイズ表が気に入った場合は、ファイルピッカーを使用すると、シンプルなUXでその特定のファイルを簡単に選択できます。 これにより、メタフィールドはテーマ自体の内部に配置されます。

ファイルAPI

APIバージョン2021-07では、File APIを使用して、汎用ファイルを作成、更新、および削除できます。 これにより、マーチャントはさまざまなアプリにさまざまなファイルを再利用できます。 これらは内部のファイルページに追加されます Shopify 管理者。

開発者は、新しいFilesAPIを介して設定/ファイルにアクセスできるようになります。 このバージョンで導入されたGraphQLAPIを使用すると、設定/ファイルを介して既存のメディアファイルを簡単にアップロードまたは選択できます。 アプリは、コンテンツを介してメタフィールドにデータを入力しながら、管理者のこの特定の領域にアクセスすることで恩恵を受けることができます。

これにより、テーマで使用される画像など、製品に直接関連付けられていないファイルや画像にアプリがこのスペースを使用する機会が開かれます。

液体入力設定

テーマエディターのもうXNUMXつの更新は、エディター自体からページにカスタムLiquidコードを追加できるLiquid入力設定です。

Liquid設定はHTML設定に似ています。 唯一の違いは、Liquid変数にアクセスできることです。 マーチャントは、グローバルオブジェクトとテンプレート固有のLiquidオブジェクトの両方にアクセスできます。

この設定により、Liquidを使用してアプリのコードを追加するときに、マーチャントがテーマのコードを手動で変更する必要が少なくなります。

開発者向けドキュメントを使用するか、Dawnのカスタムリキッドセクションから新しいテーマを表示します。

これにより、開発者としてストアについて独立した決定を下すことが簡単になり、クリエイティブな統合とソリューションに集中する時間を解放できます。

新しい開発者ツール

オンラインストア2.0は、開発者が新しいアプリやテーマを作成するためのさまざまな機会を提供します。 新しい開発者ツールは、新しいテーマのテスト、開発、および展開を統合および支援します。

世界 Shopify GitHubの統合により、 Shopify テーマチェックと一緒にCLIツール。 これらのツールは両方とも、テーマをテストすることができます sandbox その結果として開発が合理化されます。

Shopify Githubの統合

GitHubとの新しい統合により、新しいテーマの開発と保守がはるかに簡単になり、追跡と管理の両方が可能になります。 GitHubユーザーアカウントをオンラインストアに接続します。 変更はGitHubにプッシュされ、選択したテーマの現在の状態と同期しているリポジトリにプルされます。

世界 Shopify GitHubの統合により、ユーザーアカウントを Shopify 管理し、Gitブランチをストア内のテーマに接続します。 バージョン管理のネイティブサポートにより、テーマコードへの変更を加え、追跡し、管理することもできます。

テーマとのGitHub統合により、開発者はバージョン管理のネイティブサポートの導入によりテーマを編集することにより、安全に共同作業を行うことができます。 この統合により、開発者はバージョン管理をサポートしてテーマを編集するときに安全に共同作業を行うことができます。 マーチャントストアで作業する場合、開発者は、ライブテーマに入力する前に、テーマへの変更をGitHubで確認してマージするワークフローを実装できます。

Shopify CLI

に新しい変更があります Shopify CLIツールも同様です。 アプリ開発者はこれまでCLIツールを使用してNode.jsおよびRubyon Railsアプリを生成していましたが、現在の変更により、開発者はCLIを使用してカスタムテーマを構築できます。

取得できるすべての機能は次のとおりです。

• 開発テーマ内のテーマへの変更を開発、プレビュー、およびテストできます。
• 開発サーバーのおかげで、開発したCSSとLiquidセクションの変更をホットリロードできます。
• 新しいテーマDawnを使用して、新しいテーマプロジェクトを初期化します。
• コマンドラインからテーマをプッシュして公開する
• テーマのテーマチェックを実行します。
• 製品の顧客とドラフト注文のテーマのテストデータを入力します。

開発テーマは一時的に隠されたテーマに接続されています Shopify 開発のための店。 開発テーマは管理エリアに表示されないため、ストアへの訪問者がサイトを閲覧することを心配する必要はありません。

開発テーマは、テーマの制限に向かって加算されません。 そのため、これらはXNUMX日間使用されなかった後に自動的に削除されます。 を実行すると、それらも削除されます Shopify-ログアウトシーケンス。 ログアウトしても破壊されないプレビューリンクが必要な場合は、テーマをストアにプッシュするだけです。

開発テーマを使用して、ローカルで開発中のテーマへの変更をリアルタイムで表示したり、テーマを操作したり、テーマエディターでテーマをカスタマイズしたりできます。 したがって、新しいCLIツールを使用すると、最終的なテーマの表示方法を十分に制御できます。

これらのツールを使用すると、開発プロセスが簡単になり、オンラインストア2.0をすばやく開始できます。

テーマチェック

テーマチェックは、テーマのエラーをスキャンするLiquidおよびJSONのもうXNUMXつの不可欠なコンポーネントです。 スキャンが完了すると、ツールは両方のベストプラクティスを強調表示します Shopify プラットフォームとLiquid言語。

これは、Visual Studioなどのエディターと統合され、コードの問題を識別します。

失敗したチェックへのリンクを含むエラーメッセージが続く問題を理解するために、が表示されます。 テーマチェックは、 Shopify CLIツールなので、同じものを個別にインストールする必要はありません。

注目に値するその他の機能

バルクミューテーションAPI

Bulk OperationRunMutationエンドポイントは、 Shopify データをまとめてストアにエクスポートします。

GraphMLシミュレーションの代わりに、バルクミューテーション操作を実行できます。 これは、ファイル数が多いためにボトルネックに直面することなく、すべてのデータをインポートするための簡単な方法です。

利用可能なオプションは次のとおりです。

• 製品作成
• コレクション作成
• 製品アップデート
• 製品更新メディア
• 製品ページ更新
• productVariantUpdate
• メタフィールドUpsert
• priceListFixedPricesAdd
• priceListFixedPricesDelete

割引のためのチェックアウトリソースAPI

チェックアウトリソースは、チェックアウトに追加された割引のapplication_typeプロパティを返します。 このフィールドには、割引がどのように適用されたかが表示されます。

有効な値には、automatic、discount_code、manual、およびscriptが含まれます。

液体入力設定テーマ

新しいLiquid入力設定は、マーチャントがエディター自体から直接カスタムLiquidコードを追加するためのものです。 これは、HTML設定と非常によく似ています。

マーチャントは、テーマコードを編集することなく、グローバルおよびテンプレート固有のLiquidオブジェクトにアクセスできます。 新しい参照テーマはDawnと呼ばれます。 これは、柔軟性と使いやすさのオプションを備えたオープンソースのリファレンステーマです。 JSONテンプレートやアプリブロックなど、いくつかのOnline Store2.0機能を使用します。

総括する：

Shopify ストアにはXNUMXつの部分があります。

• テーマとオンラインエディター
• コンテンツの保存
• 開発者ツール

あなたが開発者ではなく、単に店の所有者である場合、新しいオンラインエディタとコンテンツ管理システムは、店の所有者としてあなたに最も影響を与える可能性があります。

Shopifyの更新されたテンプレート言語には、2018年にリリースされたWordPressのGutenbergのような同様の社内エディターがあります。これにより、次のようなプラットフォームのページエディターに近づきます。 Squarespace 及び Wix.

エディターは、いくつかのを簡単に置き換えることができます Shopify apps 人気のShogunページビルダーを含む.

新しいエディターを使用すると、中小企業は新しいページテンプレートを作成し、組み込みのコードを使用してXNUMX行のコードを記述しなくても、その中にデータを入力できます。 Shopify ページセクションとブロック。

最後に、コンテンツ管理システムは、改良と追加機能を備えたもうXNUMXつの非常に重要な領域です。 新しいアップデートでは、まったく新しいカスタムコンテンツの入力が可能になります。 コンテンツを一度作成して、オンラインストアを含むすべてのチャネル内に公開します。

あなたはどう思いますか？ Shopify オンラインストア2.0？ 以下のコメントでお知らせください。