LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

ECの概要

Webflow Ecommerceを発見しよう!このガイドでは、ストアを構築、デザイン、ローンチするための基本的な要素をすべて紹介します。

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

Webflow Ecommerceを使用すると、コードを1行も書かずにオンラインストアを構築し、デザインし、カートとチェックアウトの詳細をカスタマイズし、製品と注文を管理し、完全にカスタマイズされたオンラインストアを設定してローンチすることができます。

このレッスンで学ぶこと

ストアの構築

Webflow Ecommerceを使用するには、テンプレートを選択するか、ゼロから始めることができます。Ecommerceテンプレートを選択する場合、Ecommerceはデフォルトで有効になります。異なるテンプレートを選択する、ゼロから始める、または既存のサイトを更新する場合、左側のサイドバーにあるEcommerceアイコンをクリックしてEcommerceを有効にできます。

Ecommerceを有効にすると、デザイナーとエディター内で始めるための多くのEcommerce機能(要素、ページ、コレクション、設定)が利用可能になります。

Ecommerceパネルのセットアップガイドに従ってストアを設定し、ローンチするか、Webflow Ecommerceに関連する多くの教育コンテンツへのリンクが含まれたこのガイドに従うことができます。

リソース

Ecommerceコレクション

Webflowストアを始めるために、Products(製品)とCategories(カテゴリ)の2つのEcommerceコレクションが自動的に作成されます。これらは、CMSコレクションと同様に動的なコレクションです。ただし、CMSコレクションとは異なり、Ecommerceコレクションにはいくつかの違いがあります。一般的な動的コレクションとEcommerceコレクションに関する詳細については、以下のリソースをご覧ください。

製品とカテゴリ

コレクション構造を更新したら、ストアに製品を追加し、カテゴリで整理を開始できます。これは手動で行うことも、Zapierなどの他のサービスと統合して自動的に行うこともできます。

もっと詳しく

ストアのデザイン

ストアをデザインする際、CMSと同じデザインの自由度と柔軟性があります。したがって、ショッピング体験はサイトの他の部分とシームレスに統合できます。製品のフィルタリング、制限、およびページネーションされたリストを作成し、ホームページに掲載することもできます。

Ecommerce要素とページ

また、製品とカテゴリのためのコレクションテンプレートページを作成し、チェックアウトページと注文確認ページの2つのEcommerceユーティリティページのスタイルをカスタマイズして、チェックアウトエクスペリエンスもカスタマイズできます。

もっと詳しく

ストアのローンチ

ストアを構築しデザインしたら、ローンチの準備が整います。ただし、CMSとは異なり、単に公開ボタンを押して機能するEcommerceサイトを公開することはできません。まず、ストアを設定する必要があります。

Ecommerce設定

まず、ビジネスの住所と情報を追加します。これにより、通貨、単位システム(インペリアル vs メトリック)、初期配送ゾーン(ストアの国)、初期税設定など、他の多くのストア設定のインテリジェントなデフォルトが設定されます。もちろん、これらの設定はいつでもデザイナーやエディターから更新できます。

製品とオンラインストアのマーケティング

EcommerceコレクションをCMSコレクションに接続し、ブログ投稿内で製品を紹介したり、製品または製品カテゴリをブランドコレクションにリンクしたりできます。また、ホームページにフィルタリングされた製品リストを掲載して、季節のプロモーション、広告キャンペーン、そして近日公開のランディングページを作成することもできます。

Eメールのカスタマイズ

自動トランザクションと領収書のEメールをカスタマイズして、ブランドに合わせることができます。

柔軟なフォームでライフサイクルマーケティングを管理

Webflowフォームを追加して、ウェイトリストのEメールを収集できます。フォームをMailChimpなどのプラットフォームに接続して、Eメールマーケティングキャンペーンを実行できます。

さらに詳しく
Webflow フォーム入門
MailChimpへのサインアップフォーム送信

ダイナミック広告の作成

Facebook、Instagram、およびGoogleにイベントを送信して、スマートなマーケティングキャンペーンを実行できます。

Google AnalyticsでEcommerceトラッキングを設定

Google Analyticsとサイトを統合し、Ecommerceデータを分析レポートで表示するためのEcommerceトラッキングを設定できます。

さらに詳しく
Google Analyticsの設定
Google アナリティクスのイベントをトラッキングする

注文の処理

ストアを公開したら、注文を受けることができます。注文はWebflowのデザイナーエディターで受け取り、誰が注文したか、彼らの住所は何か、そして何よりも、自身の追跡のために注文のステータスをマークできます。新しい注文に関する通知も、Eメールとデザイナーを介して届きます。

Webflow APIやZapierインテグレーションを使用して注文の管理を行い、製品のフルフィルメントとストアの管理を簡単にすることもできます。

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談