Beaver Builder 2.8 と新しい Box モジュールをめぐる興奮のあまり、North Commerce モジュールの発表を見逃したかもしれません。この追加により、Beaver Builder レイアウト内に North Commerce 要素を表示するための新しい扉が開かれ、貴社と貴社の顧客の両方にシームレスなエクスペリエンスが提供されます。

North Commerce モジュールは、Web サイトに North Commerce 要素を表示できるようにする Beaver Builder モジュールです。 North Commerce プラグインがインストールされている場合、このモジュールは Beaver Builder UI で使用できるようになります。

この記事では、North Commerce モジュールを使用して WordPress サイトを強化し、顧客にスムーズなショッピング体験を提供する方法を学びます。

北商とは何ですか？

North Commerce モジュールの詳細に入る前に、 North Commerceとは何か、そしてそれが e コマース戦略にどのように役立つかを理解することが重要です。

North Commerceは、WordPress 用の新しいオールインワン e コマース プラグインで、ユーザーが高パフォーマンスのオンライン ストアと販売目標到達プロセスを作成できるように設計されています。

速度、使いやすさ、カスタマイズに重点を置き、オンライン ショップを構築、管理、最適化するためのさまざまな機能を提供します。

North Commerce の主な特徴:

• カスタム チェックアウト フォーム: 注文前または注文後のアップセルのオプションを含むカスタマイズ可能なフォームでチェックアウト プロセスを強化し、販売の可能性を高めます。
• オールインワン ソリューション: North Commerce は、追加のプラグインを必要とせずに、サブスクリプション製品、支払いプラン、高度なクーポン、レビュー収集などの重要な e コマース機能を提供します。
• 速度の最適化: このプラグインは速度を重視して設計されており、顧客を維持し、コンバージョン率を向上させるために重要な、高速な読み込み時間とスムーズなユーザー エクスペリエンスを保証します。

North Commerce は、WordPress 内でシームレスで強力な e コマース エクスペリエンスを提供することを目指しています。オンライン ストアの構築、管理、最適化が簡素化されます。

Beaver Builder の North Commerce モジュールの紹介

North Commerce モジュールを追加すると、Beaver Builder レイアウト内に North Commerce 要素を直接表示できるようになり、より直感的な方法で e コマース ページを構築できるようになります。

このモジュールを使用すると、商品を表示するためにショートコードに依存する必要がなくなりました。 North Commerce モジュールをページにドラッグ アンド ドロップするだけで、使い慣れた Beaver Builder インターフェイスでカスタマイズできます。

North Commerce モジュールの利点:

• シームレスな統合: このモジュールは既存の Beaver Builder レイアウト内で動作するため、新しいツールを学習しなくても、サイトに e コマース機能を簡単に追加できます。
• 制御の強化: e コマース ページの外観と機能をより詳細に制御できるようになり、よりパーソナライズされたショッピング エクスペリエンスが可能になります。
• ワークフローの改善: 事前に構築されたレイアウトとカスタマイズ可能な設定により、複雑なコーディングの必要がなく、設計プロセスがスピードアップします。

Beaver Builder North Commerce モジュールの使用方法

シームレスな e コマース エクスペリエンスを作成することは、オンライン ストアの成功にとって非常に重要です。 Beaver Builder の North Commerce モジュールは、魅力的で完全に機能する電子商取引 Web サイトを構築するプロセスを簡素化します。

ステップ 1: 必要なプラグインをインストールする

始める前に、WordPress サイトに次のプラグインがインストールされ、有効化されていることを確認してください。

• Beaver Builder ページ ビルダー: ユーザーがコーディングせずにカスタム レイアウトやデザインを作成できる、WordPress 用の柔軟なドラッグ アンド ドロップ ページ ビルダー。
• North Commerce Plugin : 速度と使いやすさに重点を置き、ユーザーが高パフォーマンスのオンライン ストアを作成できるように設計されたオールインワンの WordPress e コマース プラグイン。
• Beaver Themer (オプション) : ユーザーが WordPress サイト全体のカスタム ヘッダー、フッター、製品ページ、および動的コンテンツ レイアウトを作成できるようにする Beaver Builder のテーマ ビルダー。

これらのプラグインを配置したら、e コマース サイトの作成を開始する準備が整います。

ステップ 2: North Commerce モジュールをページに追加する

e コマース機能を追加するページに移動し、クリックして Beaver Builder エディターを開きます。次に、右上隅にある「 + 」アイコンをクリックしてモジュールパネルにアクセスします。

検索バーに「 North Commerce 」と入力すると、モジュールがすぐに見つかります。見つかったら、North Commerce モジュールをページ上の目的の場所にドラッグ アンド ドロップします。

North Commerce モジュールをページに追加することは、e コマース エクスペリエンスをカスタマイズするための最初のステップです。これにより、製品表示、ショッピング カート要素、またはチェックアウト フォームをページのデザインに直接組み込むことができる柔軟性が得られます。このシームレスな統合により、e コマース機能が他のコンテンツとスムーズに融合し、訪問者に一貫性のあるユーザー フレンドリーなエクスペリエンスを提供できるようになります。

ステップ 3: North Commerce モジュールを構成する

North Commerce モジュールには、ブランドに合わせてサイト上の e コマース要素をカスタマイズし、ユーザー エクスペリエンスを最適化するのに役立つさまざまな設定が用意されています。

[全般]タブでは、特定のタイプのコンテンツまたはユーザー インタラクションを配信するように調整されたいくつかのレイアウト オプションから選択できます。

各レイアウト オプションは、e コマース ストアのさまざまな側面に対応し、一貫性のあるユーザー フレンドリーなエクスペリエンスを作成するのに役立ちます。商品を強調したり、チェックアウトを効率化したり、サイトのデザインを強化したりするなど、ニーズに最適なレイアウトを選択してください。

次に、各レイアウト オプションを検討し、ストアに合わせて構成するためのガイダンスを提供します。

製品ページ

製品ページのレイアウトでは、デフォルトの製品ページに表示されるのと同じように、単一の製品を表示できます。このレイアウトは、ランディング ページ、ブログ投稿、カスタム販売ページなど、サイト上の任意の場所で特定の商品を強調表示するのに最適です。

[レイアウト] ドロップダウンから[製品ページ]を選択し、特定のアイテムを紹介する製品スラッグを入力します。

製品スラッグは各製品の一意の識別子であり、正しい製品情報が表示されることを保証します。

製品ページのレイアウトでは、訪問者に画像、説明、価格、オプションなどの製品の詳細を表示します。注目の製品を宣伝したり、マーケティング キャンペーンを実施したり、サイトのデザインと調和するカスタム ショーケースを作成したりするのに最適です。

さらに、製品の詳細を戦略的な場所に配置することで、効果的に関心を高め、コンバージョンを促進できます。

製品ギャラリー

単一ページで複数の製品を紹介するには、North Commerce モジュールの製品ギャラリーオプションを使用します。この機能は、視覚的に魅力的なカテゴリ ページや製品概要を作成するのに最適です。

「レイアウト」フィールドから「製品ギャラリー」を選択します。

製品ギャラリーのレイアウトでは、通常 3 つの列からなる、すっきりと整理されたグリッドに製品が表示されます。各製品は、注目の画像、タイトル、価格で強調表示され、訪問者に製品の明確で魅力的なプレゼンテーションを提供します。

製品ギャラリーのレイアウトでは、複数の製品を一度に表示することで顧客を引き付けます。これにより、探しているものを見つけやすくなります。

製品スライダー

製品スライダーオプションを使用すると、North Commerce 製品の選択を動的でインタラクティブなスライダーで表示できます。この機能は、製品の視認性を高め、サイト訪問者を惹きつけるのに最適です。

製品スライダーを作成するには、 [レイアウト]フィールドのドロップダウン メニューから[製品スライダー]を選択します。

ホームページやランディング ページなどの主要なページで製品スライダーを使用すると、効果的に製品に注目を集め、ユーザーが製品を探索するよう促し、最終的にエンゲージメントと売上を高めることができます。

チェックアウト

North Commerce モジュールを使用すると、任意のページまたは投稿内にチェックアウト プロセスを直接埋め込むことができます。このオプションを使用すると、販売プロセスを通じて顧客をどこでどのように案内するかを柔軟に選択できます。 North Commerce チェックアウト フォームをカスタム ページに表示すると、購入プロセスを合理化し、顧客の負担を軽減できます。

この機能を使用するには、 [レイアウト]フィールドで[チェックアウト]を選択するだけです。

これにより、チェックアウト フォームが自動的に表示され、顧客は現在のページから移動することなく簡単に購入を完了できます。

チェックアウト フォームをランディング ページや販売目標到達プロセスなどの戦略的な場所に統合すると、ユーザー エクスペリエンスが大幅に向上し、コンバージョン率が向上します。

カート

最後に、North Commerce モジュールを使用すると、ユーザーのカートの内容を表示できます。この機能は、顧客がチェックアウトする前に選択内容を簡単に確認できるため、販売ページや目標到達プロセスを構築する場合に特に役立ちます。

この機能を使用するには、 「レイアウト」フィールドで「カート」を選択します。以下のスクリーンショットの例のような表示が表示されます。

デフォルトの North Commerce Cart および Checkout ページをニーズに合わせてカスタマイズする方法については、読み続けてください。

ステップ 4: レイアウトをカスタマイズする

レイアウトを選択した後、e コマース要素の外観をさらにカスタマイズできます。

設定ポップアップで、 「スタイル」タブをクリックします。

これらのオプションを使用すると、ブランドに一致するボタンを作成し、e コマース サイトの全体的なデザインを強化できます。

ボタンのスタイル

• デフォルトのスタイル: 通常の状態のボタンの外観を設定します。
• ホバー スタイル: ホバーしたときのボタンの外観をカスタマイズします。

カラーオプション

• テキストの色: ボタンのテキストの色を選択します。
• アイコンの色: ボタンアイコンの色を設定します。
• 背景色: ボタンの背景色を選択します。

ボタンの枠線

• 境界線のスタイル: ボタンの境界線をカスタマイズします。
• ホバー境界線: ホバー状態のボタンの境界線をスタイルします。

次に、 「詳細」タブに移動します。

間隔のマージンを調整し、デバイスの種類ごとに表示ルールを設定し、アニメーションを適用して動的なユーザー エクスペリエンスを実現します。高度な CSS および Javascript 設定を使用してカスタム コードを追加することもできます。これらのオプションを使用すると、コンテンツの表示を完全に制御でき、デザインのニーズに合わせて正確に調整できます。

結論

Beaver Builder の North Commerce モジュールを使用すると、魅力的で機能的なオンライン ストアを作成できます。 North Commerce と Beaver Builder を組み合わせると、ユーザー エクスペリエンスを向上させる、視覚的に魅力的なサイトを構築できます。