eコマースストアを強化するために知っておくべき5つのShopifyアップデート

Shopify を使用して電子商取引 Web サイトを運営している場合、競合他社に先んじるためには、Shopify の最新の更新情報を常に入手することが重要です。 2023 年には、Shopify ストアの数は 630 万を超え、世界 175 か国に広がりました。 特に、Shopify は米国の電子商取引市場で優位性を確立し、19.8% という大きな市場シェアを保持しています。

このような大規模なユーザー ベースを持つ Shopify は、ユーザーのニーズに応えるために常に新しい機能の開発に取り組んでいます。 ホワイトラベルの Shopify 開発パートナーとして、当社は常に最新のトレンドとアップデートを最新の状態に保ちます。

これらの Shopify の最新アップデートは、オンライン ストアを改善し、絶えず変化する e コマースの状況に対応していくのに役立ちます。

I. メタフィールドによる自動収集

メタフィールドを使用した自動コレクションは、Shopify で商品のより正確なコレクションを作成するのに役立ちます。 メタフィールドは、色、サイズ、素材などの追加情報を商品に追加できるカスタム フィールドです。

Shopify では、自動コレクションにメタフィールド条件を追加できるようになりました。 これは、製品のメタフィールドに基づいて、製品のより正確な自動コレクションを作成できることを意味します。

製品にメタフィールドを追加すると、その製品は対応する自動コレクションに自動的に追加されます。

メタフィールド条件をコレクションに追加するには、次の手順に従う必要があります。

ステップ 1: 製品のメタフィールドの作成

まず、製品またはバリアントのメタフィールドを作成する必要があります。 Shopify設定の「カスタムフィールド」セクションに移動し、「カスタムフィールドを追加」を選択します。

最近の Shopify アップデートにより、メタフィールドを使用して商品に関する重要な情報を追加することが簡単になりました。 次の 4 種類のメタフィールドから選択できます。

• 単一行のテキスト
• 整数
• 10進数
• 正しいか間違っているか

メタフィールドに事前定義された値を作成する場合は、「値のリスト」を選択します。

ステップ 2: 自動収集のセットアップ

メタフィールドを作成したら、そのメタフィールド値に基づいて自動コレクションを設定できます。 Shopify ダッシュボードの「自動コレクション」セクションに移動し、「自動コレクションの作成」を選択します。

そこから、前に作成したメタフィールドを選択し、コレクションの条件を設定できます。 この Shopify アップデートにより、商品をカスタム コレクションに整理できるようになり、在庫管理が簡素化されます。

ステップ 3: コレクションの作成

自動コレクションを設定した後、新しいコレクションを作成できます。 Shopify ダッシュボードの「コレクション」セクションに移動し、「コレクションの作成」を選択します。

「条件」セクションで、コレクションに使用するメタフィールドを選択し、そのメタフィールドの値を設定します。 これにより、メタフィールドの条件に一致する製品がコレクションに自動的に追加されます。

製品またはバリエーションのメタフィールドを使用して自動コレクションを作成するには、次の手順に従います。 これにより、商品をより適切に整理し、顧客がオンライン ストアで必要な商品を見つけやすくなります。

自動収集の詳細については、ここをクリックしてください。

II. チェックアウトの拡張性

2024 年 8 月 13 日からチェックアウトします。 液体はチェックアウト内ページでは機能しなくなります。 これは、現在チェックアウトを使用してチェックアウト内ページをカスタマイズしている場合を意味します。 液体は、この日付より前にチェックアウト拡張機能にアップグレードする必要があります。

配送ページと支払いページをカスタマイズするには、Checkout API を使用する必要があります。 この API の外部で行われたカスタマイズはサポートされません。

チェックアウト拡張機能にアップグレードすると、チェックアウト エクスペリエンスが強化され、顧客満足度が向上するという利点があります。

その方法は次のとおりです。

• ステップ 1: Shopify 開発者 Web サイトの Shopify Checkout API セクションに移動します。

• ステップ 2: Checkout API とその機能を理解します。

• ステップ 3: Checkout API を使用してチェックアウト内ページをカスタマイズします。

• ステップ 4:変更をテストして、正しく機能することを確認します。

このアップデートにより、チェックアウト エクスペリエンスをパーソナライズし、チェックアウト中に情報に基づいた意思決定を行うためのより多くの情報を顧客に提供できるようになります。

Ⅲ． Shopify テーマでのセクショングループの作成

Shopify は、テーマのレイアウトにセクション グループを作成できる新機能を導入しました。 セクション グループは、ストアの所有者がヘッダーやフッターなどのレイアウト ファイルの領域でセクションを追加、削除、並べ替えできるようにする JSON コンテナーです。

この Shopify アップデート により、テーマのレイアウトのセクションを簡単にカスタマイズおよび再配置できるようになります。この機能により、オンライン ストアのワークフローがより合理化され、効率的になることが期待されます。

セクション グループを追加するには、次の手順に従います。

• ステップ 1: Shopify ストアの「コードの編集」に移動します。

• ステップ 2: 「セクション」に移動し、「新しいセクションを追加」をクリックして新しいセクションを追加します。

• ステップ 3:ファイル名を追加し、それに「.json」を追加して、新しい JSON ファイルを作成します。

• ステップ 4: JSON ファイルに、「Type」、「Name」、「Sections」、「Order」の 4 つの属性を追加します。これらの属性は必須であり、どの要素もないと JSON ファイルは保存されません。 どれかが欠けているとエラーが発生します。

• ステップ 5: 「header」、「footer」、「aside」、「custom」のいずれかの値を指定できます。「タイプ」属性の「<名前>」。

• ステップ 6: 「名前」属性には、セクション グループに割り当てる必要がある任意の名前を指定できます。

• ステップ 7: 「セクション」属性には、Shopify Customizer から追加したすべての値が含まれています。これは、追加したコンテンツに基づいて Shopify によって自動的に生成されます。 その JSON ファイルを手動で編集しないことを強くお勧めします。

• ステップ 8: 「順序」属性は、特定のセクションに追加したブロックの数を定義します。カスタマイザーから注文を変更すると自動的に変更されます。 順序属性はブロックの順序を定義します。

• ステップ 9:セクション グループ JSON ファイルを作成したので、それをカスタマイザーにリンクする方法と、カスタマイザーにどのように表示されるかという疑問が生じます。これを行うには、次のコードをリキッド ファイルに追加します。

• {% セクション「セクショングループファイル名」 %}

• ステップ 10:これにより、セクション グループ ファイルがカスタマイザーにリンクされます。リンクすると、以下の図に示すように、そのセクション グループに複数のセクションを追加できるようになります。

全体として、この新機能は、あなたのような Shopify ストア所有者に、レイアウト ファイル内のセクションを作成および管理するための優れた柔軟性とカスタマイズ オプションを提供します。

ノート：

• Shopify で作成されたセクション グループは、デフォルトではカスタマイザーに表示されません。 セクション グループを追加したい場合は、Liquid コードからファイル内で手動で追加する必要があります。

• ただし、Shopify は最近、セクション スキーマに新しい機能を導入し、カスタムの「.liquid」セクションを特定のセクション グループに表示できるようにしました。

• スキーマの「enabled_on」属性と「disabled_on」属性を使用して、このタスクを実行できます。 この Shopify アップデートを使用すると、カスタム「.liquid」セクションをより適切に整理し、特定のセクション グループで使用できるようになります。

• たとえば、「group1.json」と「group2.json」という名前の 2 つのセクション グループと、「section_file.liquid」という名前のセクション ファイルがある場合、スキーマの「enabled_on」属性を使用して「section_file.liquid」を作成できます。 」セクションは「group1」でのみ表示されます。

• 一方、「disabled_on」属性を使用すると、「group1」の「section_file.liquid」セクションを非表示にし、他のすべてのグループで表示することができます。

• 「enabled_on」属性と「disabled_on」属性は、「template」と「groups」という 2 つの引数を受け入れます。 両方を同時に使用することも、一方を使用することもできます。 「template」引数はすべてのタイプのページを許可し、[""] はすべてのページを許可します。

• 「groups」引数を使用すると、ヘッダー、フッター、サイド、カスタムなどのセクション グループ タイプを追加できます。 <名前>。 [""] はすべてのタイプのセクションを許可します。

• テンプレート引数とグループ引数の両方で「enabled_on」を使用すると、セクションがそのテンプレートのセクション グループにのみ表示されることを意味します。 同じことが「disabled_on」でも機能しますが、その逆になります。

「enabled_on」と「disabled_on」の詳細については、こちらをご覧ください。また、セクション グループについてもここで読むことができます。

IV. Shopifyのメタオブジェクトフィールド機能

Shopify のメタ オブジェクト フィールド機能を使用すると、ストアの構造化情報を簡単に追加して保存できます。 これにより、製品の機能、仕様、サイズ表などの製品に関する情報を保存でき、Shopify 管理者から取得して編集できます。

この機能は、製品、コレクション、顧客、注文、およびストアのその他の部分に使用できます。 このアップデートにより、ストアの管理と更新がより簡単かつ効率的になりました。

メタ オブジェクトには、Shopify Admin からだけでなく、StoreFront API やメタ オブジェクト API からもアクセスできます。 この機能により、サードパーティのアプリケーションがメタ オブジェクトにアクセスし、メタ オブジェクトと対話できるようになります。

これは、メタ オブジェクトを使用して、幅広いカスタマイズとストアとの統合を作成できることを意味します。

メタオブジェクトのセットアップ

メタ オブジェクトのセットアップは簡単なプロセスです。 メタ オブジェクトには 2 つの重要な要素があります。オブジェクトの構造を記述するフィールドのグループと、メタ オブジェクトのコンテンツまたはデータです。

• Shopify 管理画面の [設定] > [カスタムデータ] セクションからメタオブジェクトの構造を管理できます。ここでフィールドを追加または削除し、データ型を定義できます。

• その後、管理画面の [コンテンツ] > [メタオブジェクト] セクションからメタオブジェクトのコンテンツまたはデータを管理でき、各メタオブジェクトに保存されている情報を追加または編集できます。

メタオブジェクトが正しく機能することを確認するには、最新の Shopify アップデートを常に更新することが重要です。

Shopify でメタオブジェクトを作成するときは、メタオブジェクトが正しく機能するようにいくつかの点に留意することが重要です。

• まず、Shopify 管理者ダッシュボード内で識別しやすいように、各メタオブジェクトに明確で簡潔な名前を付ける必要があります。 次に、API でメタ オブジェクトを識別するために使用されるタイプをメタ オブジェクトに割り当てる必要があります。

• 名前とタイプに加えて、メタ オブジェクトを構成するフィールドを定義する必要があります。 これらのフィールドによって、メタ オブジェクトに追加できるコンテンツのタイプが決まります。

• 各フィールドには、名前、説明、タイプ、検証ルールの文字制限、最小値と最大値、または現在値などの独自の詳細があります。

• メタ オブジェクトが作成されたら、そのメタ オブジェクトのエントリの構築を開始できます。 これらのエントリは、ストアの製品、コレクション、顧客、注文、その他の部分に追加できます。 ストアのさまざまなエリア内またはサードパーティのアプリを通じてメタ オブジェクトを参照することもできます。

• オンライン ストアにメタ オブジェクトを表示するには、いくつかの異なるアプローチを取ることができます。 たとえば、メタ オブジェクトを製品ページに直接表示したり、メタ オブジェクトを使用してチェックアウト プロセスでカスタム フィールドを作成したりできます。

最終的に、Meta Objects は、ストア内の構造化データとスキーマ マークアップを管理するための柔軟で強力なツールを提供することを目指しています。 ベスト プラクティスに従い、メタ オブジェクトを慎重に設計すると、Shopify のアップデートは、顧客にとってより効果的かつ効率的な e コマース エクスペリエンスを作成するのに役立ちます。

特定のShopifyパーツのメタフィールド参照の作成

製品、注文、顧客など、Shopify の特定の部分を操作するには、メタフィールド参照を作成してメタ オブジェクトを使用できます。

たとえば、製品ページに表示したい「製品の機能」メタ オブジェクトがある場合、この特定のメタ オブジェクトを参照する製品メタフィールドを作成できます。

このリファレンスを使用すると、特定の製品に関する独自の「製品機能」を紹介できます。 たとえば、製品 A には「サステナビリティ」、製品 B には「材料」などの参照エントリを追加できます。

この Shopify アップデートは、効率が向上し、より良いユーザー エクスペリエンスを生み出すのに役立つため、優れています。

ここをクリックすると、参照メタ オブジェクトについて詳しく知ることができます。

Shopify オンラインストアにメタフィールドを表示します。

オンライン ストアにメタ オブジェクトを表示するには、テーマ エディターを使用してメタフィールドをテーマに接続するか、テーマ コードを編集してメタ オブジェクトを追加する 2 つのオプションがあります。

最も効率的な方法を確実に使用するには、Shopify の最新の更新情報を常に入手することが重要です。

各オプションの手順は次のとおりです。

テーマエディターを使用してメタフィールドをテーマに接続します。

• Shopify 管理画面に移動し、[オンライン ストア] > [テーマ] をクリックします。
• 編集したいテーマを見つけて、「カスタマイズ」をクリックします。
• メタ オブジェクト参照を表示するテンプレートの部分に移動します。
• ブロックを含む既存のセクションを選択するか、ブロックを含む新しいセクションを追加します。
• メタ オブジェクト参照に接続するブロックをクリックします。
• ブロック名の横にある [動的ソースの接続] アイコンをクリックします。
• このブロックで表示するメタ オブジェクト参照を選択します。

テーマコードを編集してメタオブジェクトを追加します。

• コーディングの経験がある場合にのみ、このオプションを試してください。
• Shopify 管理画面に移動し、[オンライン ストア] > [テーマ] をクリックします。
• 編集するテーマを見つけて、「アクション」>「コードの編集」をクリックします。
• 左側のメニューで、メタ オブジェクト参照を追加するテンプレートに移動します。
• Liquid を使用して、ページ テンプレート内のメタフィールドを参照します。
• 変更を保存し、テーマをプレビューして、メタ オブジェクト参照が期待どおりに表示されることを確認します。

テーマがメタフィールドをサポートしていないビンテージ テーマの場合は、コードを編集してメタフィールド タイプを追加する必要があることに注意してください。

このアップデートにより、ページのデザインをカスタマイズし、ストアの独自の外観を作成しやすくなります。

V. Shopify Liquid Prettier プラグインを使用したコードの最適化

Shopify Liquid Prettier プラグイン (1.0.0) を使用すると、開発者はコードを即座に一貫したコード スタイルにフォーマットできるようになります。 これは Shopify の更新に役立つツールであり、スタイル ガイドラインについて話し合う必要がなくなります。

このプラグインは、ブラウザ、ターミナル、またはお気に入りのコード エディタ内で利用できます。 これを使用すると、時間を節約し、高品質のコードを簡単に維持できます。

Visual Studio Code、Vim、WebStorm など、いくつかの一般的なテキスト エディタで利用できます。

開始するには、好みのエディターにプラグインをインストールして構成します。 これにより、よりクリーンで読みやすいコードを作成し、デバッグやメンテナンスのタスクが簡素化されます。

ａ． Visual Studio コード

世界中の開発者が Visual Studio Code を使用しています。 コードの書式設定に役立つ 2 つの拡張機能、Shopify Liquid Prettier Plugin と Prettier について学びましょう。

Shopify Liquid Prettier プラグイン

Shopify Liquid Prettier Plugin は Shopify Liquid の組み込み機能であり、Liquid コードのフォーマットに役立ちます。 このプラグインを使用するには、ストアの settings.json ファイルに次のコードを追加します。

{
"[liquid]": {
"editor.defaultFormatter": "Shopify.theme-check-vscode",
"editor.formatOnSave": true
},
}
この設定を追加すると、保存時に Liquid コードに書式設定が自動的に適用されます。

より美しく

Prettier は、Visual Studio Code Marketplace からダウンロードできる拡張機能です。 Shopify Liquid で Prettier を使用するには、Shopify Liquid Prettier プラグインをリポジトリにローカルにインストールする必要があります。

プラグインをインストールするには、npm または Yarn を使用できます。

npm install –save-dev prettier @shopify/prettier-plugin-liquid

糸追加 –dev prettier @shopify/prettier-plugin-liquid

プラグインをインストールすると、Prettier はプラグインに設定されたルールに基づいてコードを自動的にフォーマットします。 これにより、時間を節約し、コード形式の一貫性を確保できるため、読みやすく、保守しやすくなります。

Shopify の更新情報を常に入手することで、アプリやテーマが新しく導入された機能や変更との互換性を維持できるようになります。

b. ヴィム

Vim も人気のあるテキスト エディターです。 コードのフォーマットに役立つプラグインである Shopify Liquid で Vim Prettier を使用する方法を見てみましょう。

• ステップ 1: Vim をインストールする

始めるには、マシンに Vim をインストールする必要があります。 Vim の最新バージョンは、ここから入手できる公式 Git リポジトリからダウンロードできます。

• ステップ 2: Vim Prettier をインストールする

次に、Vim Prettier をインストールする必要があります。これは、Vim 内から Prettier を使用してコードをフォーマットできるようにするプラグインです。 このプラグインは、公式 Git リポジトリにあります。

• ステップ 3: Shopify Liquid Prettier プラグインをインストールする

Shopify Liquid で Prettier を使用するには、Shopify Liquid Prettier プラグインをリポジトリにローカルにインストールする必要があります。 これは、npm または Yarn を使用して実行できます。 次のコマンドを実行して、npm を使用してプラグインをインストールします。

npm install –save-dev prettier @shopify/prettier-plugin-liquid

あるいは、Yarn を使用してプラグインをインストールすることもできます。

糸追加 –dev prettier @shopify/prettier-plugin-liquid

プラグインをインストールすると、Prettier はプラグインに設定されたルールに基づいてコードを自動的にフォーマットします。 これにより、時間を節約し、コード形式の一貫性を確保できるため、読みやすく、保守しやすくなります。

さらに、Shopify の更新情報を常に把握しておくと、コードが Shopify の最新バージョンやその他の依存関係と互換性を維持できるようになります。

c. ウェブストーム

WebStorm は、高度なコーディング支援、デバッグ ツール、一般的な Web テクノロジのサポートを提供する Web 開発用の統合開発環境 (IDE) です。

WebStorm で Shopify Liquid Prettier プラグインを使用するには、以下の手順に従う必要があります。

• ステップ 1 : JetBrains Plugins Marketplace から Prettier プラグインをインストールします。プラグインはここで見つけることができます – https://plugins.jetbrains.com/plugin/10456-prettier。

• ステップ 2 : Shopify Liquid Prettier プラグインをリポジトリにローカルにインストールします。npm または Yarn を使用してインストールできます。 npm を使用してインストールするには、次のコマンドを実行します。
• npm install –save-dev prettier @shopify/prettier-plugin-liquid
• あるいは、Yarn を使用したい場合は、次のコマンドを実行します。
• 糸追加 –dev prettier @shopify/prettier-plugin-liquid
• ステップ 3 : WebStorm を再起動します。

• ステップ 4: WebStorm の環境設定で、Prettier を検索し、「liquid」ファイルを含めるように「ファイルを実行」オプションを更新します。「保存時」チェックボックスにチェックを入れて、保存時にファイルを自動的にフォーマットすることもできます。

• ステップ 5:設定を保存してプラグインを有効にします。

これらの手順により、WebStorm の Shopify Liquid Prettier プラグインを使用して、Liquid コードを自動的にフォーマットし、コードの可読性を向上させることができます。

WebStorm の Shopify Liquid Prettier プラグインを更新して、Shopify の更新を常に把握しておくことが重要です。 プラグインを定期的に更新すると、新機能や改善点を利用でき、Shopify アプリのコードが常に正しくフォーマットされ、読みやすくなります。

結論

ご覧のとおり、Shopify のアップデートにより、オンライン ストアの運営方法に大幅な改善がもたらされます。 これらのアップデートを活用すれば、競合他社を置き去りにすることができます。 ホワイトラベルの Shopify 開発サービスを利用すると、これらの貴重なアップデートをこれまでより簡単に利用できるようになりました。

E2M では、お客様の成功に全力で取り組んでおり、これらのアップデートに関するご質問に喜んでお答えいたします。 私たちはあなたのビジネスを信じており、それが新たな高みに上昇するのを見たいと思っています。 サポートが必要な場合は、お気軽にお問い合わせください。

これらの貴重なアップデートを活用して、Shopify の最新のイノベーションをストアに反映させてください。