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

Eコマース コレクション

Webflow Ecommerceの製品およびカテゴリコレクションについて学びましょう。

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

Ecommerceコレクションは、プロジェクトでEcommerceを有効にした場合、自動的に作成されます。左のサイドバーにあるEcommerceパネルにある2つのコレクション、つまり製品とカテゴリを見ることができます。これらのコレクションの設定を編集して、カスタムフィールドでカスタマイズおよび充実させることができます。その後、製品とカテゴリを入力またはインポートして、ストアのデータベースを構築できます。

このレッスンで学ぶこと

Ecommerceパネル

左のサイドバーにあるEcommerceアイコンをクリックすると、Ecommerceパネルが開き、Ecommerceコレクション(製品とカテゴリのコレクション) にアクセスできるようになります。また、Setupガイドにもアクセスでき、これはストアの設定プロセスを最初から最後まで案内します。

このガイドは、ストアの設定、デザイン、および立ち上げをサポートします。

また、Ecommerceパネルでordersにアクセスし、新しい注文について通知を受けることもできます。

製品とカテゴリコレクション

Ecommerceコレクションは実際には動的なコレクションですので、製品やカテゴリを追加することはコレクションアイテムを作成するのと非常に似ています。ただし、CMSコレクションとは異なり、Ecommerceコレクションにはコレクションスキーマで編集できない一連のデフォルトフィールドがあります。それにもかかわらず、Ecommerceコレクションを充実させるためにカスタムフィールドを追加できます。例えば、カラーフィールド、スイッチフィールド、製品のカタログや製品のPDF仕様をアップロードできるファイルフィールドを追加できます。

デフォルトの製品コレクションフィールド

製品コレクションには以下のデフォルトフィールドが付属しています。

Name (必須)

これは製品の名前です。最初に適用した名前に基づいてスラッグが自動生成されます。名前の下にあるコレクションアイテムURLをクリックしてスラッグを変更できます。

Description(説明)

このフィールドには製品の説明を追加できます。これはプレーンテキストフィールドであり、デザインの段落要素にこの説明を接続したり、製品コレクションの設定でSEOとオープングラフの説明に接続したりできます。

Main image(メイン画像)

image fieldを使用して、製品の単一の画像を追加できます。

More images(その他の画像)

multi-image fieldを使用して、製品の複数の画像を追加できます。

Price (必須)

Price(価格)は必須フィールドです。これは数値フィールドであり、Ecommerceの一般設定から通貨単位を継承します。通貨を変更すると、既存の製品が下書きとして保存されます。新しい通貨値に価格を手動で更新する必要があります。また、以前に設定した送料方法をすべて更新する必要があります。

Compare-at price(比較価格)

製品がセール品の場合、このフィールドに元の価格を設定します。

Product tax class(製品税区分)

一部の製品は消費税の対象外であり、他の製品は低い消費税率が適用されます。これはあなたが販売している製品の種類に依存します。製品が課税対象である場合、製品の税区分を指定して、自動税計算をより正確にします。製品が非課税の場合、その製品に対して消費税を請求しないようにするために「税免除」を選択します。このフィールドのデフォルト設定は、すべての製品に対して「標準の自動税計算」です。

Categories(カテゴリ)

これは製品を既存の1つまたは複数のカテゴリに追加したり、製品アイテムの設定から直接新しいカテゴリを作成したりするためのマルチリファレンスフィールドです。

Measurements(寸法)

ここでは、製品の幅、高さ、長さ、重量などのすべての寸法を入力できます。これらの詳細は送料を決定するために使用できます。

在庫追跡

在庫を追跡したい場合は、「Track inventory」スイッチをオンにします。これにより、この製品の数量を指定できるようになります。

SKU

これは製品をそのSKU(在庫管理ユニット、特定の製品を識別するための一意の英数字IDコード)に関連付けるためのプレーンテキストフィールドで、在庫の追跡に使用されます。

Options(オプション)

このセクションでは、製品オプションセットを作成し、各製品に提供するオプションをリストアップできます。各オプションの組み合わせごとにバリアントが作成されます。各バリアントはそれ自体が製品であり、各バリアントの詳細を編集し、各バリアントに対して以下のフィールドを指定できます:画像、数量、SKU、価格、比較価格、および寸法。

デフォルトカテゴリコレクションフィールド

カテゴリコレクションには以下のデフォルトフィールドが付属しています:

Name (required) - 名前(必須)

これは製品カテゴリの名前です。最初に適用した名前に基づいてスラッグが自動生成されます。名前の下にあるコレクションアイテムURLをクリックしてスラッグを変更できます。

Products(製品)

これは、すべての製品をカテゴリに追加できるマルチリファレンスフィールドです。また、このカテゴリに追加した製品が、製品アイテムの設定からそのカテゴリに自動的に追加されます。

製品とカテゴリの関係

カテゴリと製品をリンクするマルチリファレンスフィールドは、カテゴリコレクションのフィールドが、そのカテゴリに属する製品に自動的に入力されるという点でユニークです。製品を作成する際に、そのカテゴリに属する製品を入力した場合、カテゴリコレクションのカテゴリフィールドにそのカテゴリが自動的に入力されます。同様に、カテゴリコレクションですべての製品をカテゴリに追加した場合も、それらのアイテムのカテゴリフィールドはそのカテゴリで自動的に入力されます。

コレクション設定とカスタムフィールド

製品またはカテゴリコレクションの設定にアクセスすると、上記で説明したデフォルトフィールドが表示されますが、これらのフィールドは編集できません。ただし、製品とカテゴリに関連する追加のデータを追加するためにカスタムフィールドを追加および編集できます。

コレクション設定の更新

製品とカテゴリのコレクションの名前を変更し、カスタムコレクションフィールドを追加できます。デフォルトのコレクションフィールドは編集または削除できません。

現時点では、Ecommerceコレクションのコレクションスラッグの名前は変更できません。また、既存のサイトでEcommerceを有効にする場合、現時点ではEcommerceのために予約されたスラッグを持つCMSコレクションと静的ページまたはフォルダを持つことはできません(製品およびカテゴリなど)

カスタムフィールドの追加と更新

Ecommerceコレクションを充実させるために選択できるさまざまなコレクションフィールドタイプがあります。これらのフィールドの内容を使用して、Ecommerceページとリストをデザイン、スタイル、整理できます。

これらのカスタムフィールドはいつでも更新できます。新しいフィールドを追加したり、既存のフィールドを編集したり、フィールドを完全に削除したりできます。各フィールドでは、ラベルとヘルプテキストを変更できます。

デザイン、コレクションページの設定、フィルター、条件付き表示など、デザインで使用されていないフィールドのみ削除できます。

目次

あなたもNoCodeのプロに

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

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

  • チャットサポート

  • 個別ビデオ通話相談