あなたのストアのデザインは、ブランドとのビジネス体験だけでなく、訪問者を顧客に変える能力にも影響を与えるため、重要です。

ストアをカスタマイズする方法を学ぶことは、どのeコマースストアオーナーにとっても必要なスキルです。顧客の質問に応えながら、美しいエクスペリエンスを提供するためにストアを調整する方法を学ぶことは必須です。

作成されたmetafieldが改善され、開発チームにシンプルなセットの開発ツールが提供されることで、Shopifyオンラインストア2.0の新機能とツールは、ストアの美的な面を制御するのがより簡単になりました。柔軟性とカスタマイズ性が向上し、さらなるデータにアクセスできます。

Shopify 2.0テーマおよびオンラインストア2.0テーマアーキテクチャについて詳しく知るには、こちらをご覧ください。

オンラインストア2.0ショッピファイのハイライト：

  • どこでもセクション：セクションは、ホームページだけでなく、すべてのページで利用できます。オンラインストア2.0 Shopifyに移行するときにも使えます。
  • テーマアプリ拡張：テーマエディタ内のアプリブロックを使って、テーマコードに触れずに任意のShopifyアプリをストアに統合できます。
  • 改善されたメタフィールド：改善されたメタフィールドを使って、ストアのインフラストラクチャを迅速に再構築し、カスタマイズし、スケーリングし、Shopifyで収益を上げることができます。
  • 開発者ツール：商取引の将来は、各接点での創造的な表現に依存しているため、Shopify Github統合、Theme Check、新しいShopify CLIツールなどの新しい開発者ツールを導入することが重要です。
  • Dawnテーマ：これは、オンラインストア2.0用の最初のリファレンステーマであり、デビューショッピファイテーマよりも35倍高速です。当社のShopify Dawnテーマレビューブログで詳細を学ぶことができます。

Shopifyオンラインストア2.0が何を特別なものにするのか、およびShopifyオンラインストア2.0の導入とShopify 1.0との違いについて詳しく知るには、こちらをご覧ください。

Shopifyオンラインストア2.0の改善されたメタフィールドで創造性を発揮する

Shopifyの商品テンプレートは、商品に関する追加情報を格納することを制限していますが、Shopifyオンラインストア2.0の改善されたメタフィールドを使用すると、必要な商品ページまたは変種に簡単にカスタムフィールドを追加できます。

Shopify 1.0の制限を回避するためにメタフィールドアプリケーションを利用した商人にとって、改善されたメタフィールドはストアを活気づけるユニークなエクスペリエンスを作り出すことを可能にします。

メタフィールドがShopify開発者によって設定された場合、いくつかのクリックで商品コンテンツを定義および編集できるようになります。商人と開発者のためのShopifyオンラインストア2.0のメリットについて詳しくお読みください。

つまり、メタフィールドを使って製品に関する追加情報を格納できます。改善されたバージョンのShopifyオンラインストア2.0メタフィールドを使用することで、ブランドに特有のデータのキャプチャと表示の柔軟性が大幅に向上します。メタフィールドをアプリやテーマに接続し、チーム内の誰でもアクセスできるようにすることができます。

例えば、製品のサイズチャートを表示したい場合は、メタフィールドを作成し、値を動的に生成することができます。以下では、メタフィールドを作成し、値を動的に取得する方法を示します。

カスタマイザからShopifyオンラインストア2.0メタフィールドを作成する方法

Shopifyオンラインストア2.0メタフィールド

ステップ1：以下のリンクを使用して、ストアのバックエンドにログインします。リンク

ステップ2：オンラインストアで現在のテーマオプションの隣にある「カスタマイズ」オプションを選択します。

ステップ3：ドロップダウン内で「デフォルトの商品」を選択し、サイドバーの「ブロックを追加」オプションをクリックします。

ステップ4：表示する情報にしたいテーマブロックスタイルを選択します。この場合、「折りたたみタブ」オプションを選択しましょう。

ステップ5：「折りたたみタブ」オプションをクリックして、見出しを変更し、情報を追加します。

ステップ5.1：「タブコンテンツ」オプションに、表示したい情報を入力します。ここに入力した値（30インチ）は、他のすべてのページでも同じ値になります。動的に取得するには、メタフィールドを作成することで取得することができます。

ステップ6：動的に取得するために、つまりすべての商品で異なる値を表示するが、同じフィールドである場合は、「タブコンテンツ」オプションの右上にある「ダイナミックソース」アイコンを選択する必要があります。

ステップ7：メタフィールドを選択し、「挿入」オプションをクリックします。その後、変更を保存するために「保存」オプションをクリックします。

動作1：ステップ6から「メタフィールドの追加」オプションを選択します。

動作2：画面に従って進み、「製品」オプションをクリックして、ストアで必要な製品メタフィールド定義を追加します。後で「保存」オプションをクリックします。

メタフィールドの設定についてヘルプが必要な場合は、HulkAppsのShopifyオンラインストア2.0専門家と連絡することもできます。

動作3：製品ページに移動すると、"Product Metafield"で定義されたメタフィールドが表示されます。必要な値を入力できます。

動作4：特別な情報を表示したいすべての商品ページに対して、アクション3を繰り返します。

動作5：アクション3の後、アクション6に戻って手順を完了します。

Shopifyオンラインストア2.0

Shopifyオンラインストア2.0との互換性を持たせたい場合は、当社のステップバイステップガイドShopifyオンラインストア2.0移行ガイドを読んでください。

Shopifyオンラインストア2.0の改善されたメタフィールドとダイナミックリソースでストアをお客様ごとにカスタマイズしましょう。

 

直感的な開発者ツールでShopifyテーマ開発を加速させよう

Shopifyオンラインストア2.0では、開発者と商人が高度なカスタマイズを従来よりも効率的に行うための新しい方法を紹介しています。Shopify GitHub統合、更新されたShopify CLIツール、およびTheme Checkを紹介しています。

Shopify GitHub統合

Shopify GitHub統合

ShopifyはGitHubを統合し、テーマの重複や変更の複雑な方法をもう使わせません。統合により、変更を実装し、マージする前にチームと協力して安全に変更を行うことができます。さらに、バージョン管理も可能です。Shopify GitHub統合により、開発プロセスの時間を節約し、効率を向上させることができます。

Shopify CLI

Shopify CLIエディタ

Shopify CLIは、Shopifyのテーマキットの代替として、Shopifyオンラインストア2.0の柔軟性を利用して始めるための改良が施されています。以前は、開発者がShopify CLIでNode.jsとRuby on Railsのアプリやアプリ拡張を素早く生成することができましたが、新機能を追加してストアに新しい機能をもたらすことができます。

Shopify CLIでは、新しいショッピファイテーマであるDawnを出発点にして新しいテーマプロジェクトを初期化し、コマンドラインからテーマをプッシュして公開し、Theme Checkを実行できるため、テーマの開発を加速させることができます。

Shopify App CLIツールは、以前の手動で行っていた多くのステップを自動化することで、次のプロジェクトのスピードを向上させることができます。CLIツールを使用して、開発作業を自動化し、プロジェクトを素早く作成し、資格情報をコピーし、開発中にアプリに接続するためのHTTPトンネルを設定するなど、多くの開発タスクを自動化できます。

Shopify App CLIツールは、開発者がすべてのShopifyストアの要件に対応するアプリを作成するのをサポートするように設計されています。ストアにプライベートまたはカスタムのShopifyアプリを作成したり、開発の変更を加えたりする場合は、Shopifyプレミアム開発サービスパッケージをチェックしてみてください。

結論：

オンラインストア2.0の機能を備えたストアを作成すると、コーディングの知識や開発者の助けなしにオンラインストアのデザインにおいてより創造的な柔軟性が得られます。素晴らしいですね。

Shopifyオンラインストア2.0に興味がある場合や、Shopifyオンラインストア2.0へのストアの実装や移行をご希望の場合は、当社のチームが喜んでサポートいたします。