製品の選択と多様性を確立する

Webflow Eコマースで特定の商品のバリエーションを生成し、サイズや色のオプションを自動的に考慮します。

選択肢 さまざまなマーケティングを可能にする 品種 同じアイテムの異なるサイズや色合いの衣類など、さまざまなバリエーションがあります。選択肢のユニークな組み合わせごとにバリエーションが作成されます。各バリエーションは個別の製品とみなされ、設定可能な特定の製品フィールドがあります。

重要な:
各製品バリエーションは、サイト サブスクリプションのアイテム最大数に影響します。サイト プランのアイテム制限を理解してください。

このセッション中:

  1. 選択パックの組み込みと監視
  2. 多様性を見直す
  3. デフォルトの製品バリアントを確立する

選択パックの組み込みと監視

さまざまなサイズや色など、さまざまなオプションを備えた商品を販売する場合、オプションの分類ごとにセレクション パックを追加できます。これらのオプションの組み合わせに適合する商品の個別のバージョンが、多様性です。たとえば、さまざまなサイズ、色、パターンの T シャツを販売する場合、サイズ用、色用、パターン用の 3 つのセレクション パックを追加する必要があります。

製品、オプション セット、オプションの 3 つの列を示すグラフ。これらの 3 つの列には、1 つの製品 (T シャツ) のビジュアルと、サイズ、色合い、パターンのカラー調整された詳細が含まれています。

選択パックを追加するには、オプション付きの製品の詳細ビューを起動し、オプションセクションまでスクロールして + 組み込む セレクションパック.

オプション セクションには、選択パックを組み込むためのプラス アイコンが表示されます。
製品コレクション内の個々の製品項目の選択パックを作成する機能があります。
知っておくべき重要なこと
製品ごとに最大 3 つの選択パックを作成できます。

選択肢を組み込む

定義する タイトル 選択パックのサイズ (大きさ、色相など) を入力し、オプションの入力を開始します。各オプションを入力し、Enter キーを押して選択を確定します。大きさのオプションは、S、M、L、XL です。色相のオプションは、黒、白、青などです。

オプション セクションには、タイトルと選択肢のテキスト入力フィールドを備えた新しい選択パック セクションがあります。選択パックを含めるための鈍いプラス記号があります。また、削除アイコン、キャンセル、および完了ボタンもあります。
知っておくべき重要なこと
各製品アイテムには合計 50 種類の選択肢を含めることができます。これにより、追加できる選択肢の数が制限されます。たとえば、選択パック 1 に 5 つの選択肢がある場合、選択パック 2 には 10 を超える選択肢を追加することはできません (5*10=50)。

選択を調整する

間違いを犯して選択肢の名前を変更したり削除したりする必要がある場合は、選択肢の名前の上にマウスを移動し、表示される矢印を選択します。名前を変更するか削除するかを選択します。

オプション セクションでは、青色の選択肢多様性編集ドロップダウン メニューが強調表示されています。ドロップダウン メニューの 2 つの項目は、選択肢の名前変更と選択肢の削除です。

選択肢をダブルクリックして名前を変更することもできます。選択肢を最後から最初まで順番に削除する別の方法は、カーソルが選択肢フィールドにあるときにバックスペース キーを押すことです。

選択パックの監視

選択パックの作成後に、選択パックのタイトルをクリックするか、マウスをホバーすると表示される設定アイコンをクリックすることで、選択パックを変更できます。

オプション セクションでは、2 つの多様性を持つマグニチュード多様性が強調表示されます。マグニチュード多様性には、XL と L の選択肢が含まれます。

この時点で、選択パックのタイトルを変更したり、選択肢を管理したり、ゴミ箱アイコンを選択して選択パックを削除したりできます。

オプション セクションには、サイズというタイトル テキスト フィールドと、オプションとして XL と L の 2 つの種類が含まれています。削除アイコン、キャンセル、完了ボタンが含まれています。

選択パックを削除すると、多様性インベントリ内の関連する多様性がすべて消去されます。

多様性を見直す

オプションを追加すると、選択パックのオプションの組み合わせごとに多様性が自動的に生成されることがわかります。したがって、さまざまなサイズ、色、パターンの T シャツの多様性には、s/黒/無地、m/黒/ドット、large/黄色/ストライプなどが含まれます。

サイズ、色、デザインという 3 つの選択パック列と多様性の列を組み込んだチャート。

しかし、これらの品種のいくつかは販売していないのでしょうか?

おそらく、黒のストライプのシャツは持っていなかったり、黄色のシャツは小さいサイズでしか入手できなかったりするでしょう。どうすれば、顧客があなたが販売していない品種を選択しないようにできるでしょうか? 入手できない品種については、品種の詳細を調整し、在庫監視を有効にして、数量を 0 に指定します。これにより、それらのオプションは代替リストのドロップダウンで選択できなくなります。

バリアントの詳細を修正する

各バリアントは個別の製品を表し、設定可能な個別の製品フィールドを持ちます。メイン製品に割り当てられたメインの描写、追加の画像、SKU、価格、価格比較、および測定メトリックは、すべてのバリアントに渡されます。数量は、指定された場合、最初に作成されたバリアントに付与されます。

バリアントを選択するか、バリアントの上にマウスを置いて歯車アイコンを表示すると、継承された値を手動で調整して置き換えることができます。

バリエーション セグメントは、S (小) サイズの 3 つのアイテムで構成されています。3 つの選択肢は、無地、ドット、ストライプのさまざまなデザインを誇ります。
バリアントをクリックして詳細を調整します。
貴重なヒント
製品のバリアントが異なる (またはほぼ同一の) ディメンションを示す場合、オプション コレクション (およびバリアント) を作成する前に、メイン製品のそれらのフィールドのデータをクリアすると便利です。この方法は、多数のバリアントが関係するシナリオで役立ちます。これらの値はすべてのバリアントで継承されるため、継承されたフィールドの一部の値の更新を忘れてしまう可能性があります。逆に、空のフィールドを特定して、それに応じて変更する方が簡単です。
バリエーション セクションには、サムネイル画像、追加の画像をアップロードするための領域、在庫追跡とダウンロードに含めるための切り替えボタンが含まれています。さらに、数量、SKU、コスト、価格比較、重量、幅、高さ、長さ、ファイル名、ファイル URL を入力するためのフィールドも用意されています。
各バリエーションに関して、バリエーション画像、価格、価格比較、幅、高さ、長さ、重量のフィールドのオプションを設定できます。在庫追跡を有効にして数量を固定することもできます。

主要な製品バリエーションを確立する

バリアントを追加すると、最初に確立されたバリアントがプライマリバリアントの役割を引き継ぎます。このような指定は、 ⭑ バリアント在庫リスト内。

強調表示されたデフォルトの小型バリアントは、バリアント セグメントに表示されます。製品プレビューの隣にはアスタリスクが表示されます。
デザイン内では、価格や画像などの製品フィールドにリンクされた要素に、主要なバリエーションに関連する値が表示されます。

製品を保存すると、画像、追加画像、数量、SKU、コスト、価格比較、寸法 (幅、高さ、長さ、重量) を含む主要なフィールドにはアクセスできなくなります。デフォルトのバリアントにリンクされた値は、この製品のデフォルトとして機能します。したがって、製品コンパイル内または製品ページでこれらのフィールドにリンクされているコンポーネントは、デフォルトのバリアントの値を示します。

重要な情報
すべてのオプション セット (バリアント) を削除すると、その製品のデフォルトのコレクション フィールドとそれに対応する値が復元されます。

プライマリバリアントを変更する

代替バリアントをプライマリ バリアントとして指定するには、バリアント インベントリ リスト内でバリアントの名前を選択して詳細にアクセスし、[デフォルトとして設定] ボタンをクリックします。これで完了です。

小さいサイズの商品が選択されます。ハイライトは

バリエーションと一緒にクラフトする

設計する際 製品コレクションリスト そしてその 製品ページ、データ取得に使用される収集フィールドは、製品にバリエーションがあるかどうかに関係なく、すべての製品で統一されています。これは、デフォルトのバリエーションと主要製品が統合されているためです。したがって、バリエーションを備えた製品の場合、これらのフィールドはデフォルトのバリエーションから詳細を抽出します。

左側の青い枕カバーの製品画像は、中央の「製品」コレクションの「メイン画像」フィールドに対応しています。右側のグレーのリブ付き枕カバーの製品画像は、この製品に複数のバリエーションが存在するため、デフォルトのバリエーションの「バリエーション画像」を示しています。
この画像コンポーネントは、「製品」コレクション内の「メイン画像」フィールドに対応しています。左の画像は、バリエーションのない製品の「メイン画像」を示しています。対照的に、右の画像は、製品に複数のバリエーションがあるため、デフォルトのバリエーションの「バリエーション画像」を示しています。

さらに詳しく: Eコマースコレクションの調査

カートに追加プロセスにおける選択肢

バリエーションが明示された製品の場合、「カートに追加」メカニズムには、 代替リストこれにより、ユーザーは商品をカートに追加する前に、その商品で利用可能なさまざまな選択肢から選択できるようになります。

ナビゲーター内には、「オプション リスト」というコンパートメントがあります。このコンパートメントは選択され、強調されます。

消費者がこれらの選択肢をナビゲートすると、デフォルトのバリアントから取得されたデータを表示するコンポーネントが、選択されたオプションの情報を表示するように調整されます。

左側の選択肢 1 は、小さいサイズのシルバー枕製品です。右側の選択肢 2 は、中サイズのシルバー枕製品です。

デザイナーは、バリアント ドロップダウン コンポーネントの構成でデフォルトの「選択」テキストを置き換えることができます。

左側では、選択フィールドが選択されています。右側では、選択フィールドのオプション パネルが完了し、以前の既定のテキスト「選択」が「選択」に置き換えられています。

チェックアウトプロセスにおける選択肢とバリエーション

選択した選択肢は、 バスケットチェックアウト セクション、および チェックアウト確認 セクション。

左側では、ナビゲーターでオプション リスト ラッパーが選択されています。右側では、ストライプ クッション オプションのチェックアウト部分でオプション リスト ラッパーが選択されています。

コレクション リストをカスタマイズしてスタイル設定するのと同様に、この選択リストをパーソナライズする機能があります。

ショッピングカートには、数量がそれぞれ 1 の商品が 3 つ入っています。商品名、価格、サイズも指定されています。各商品には削除ボタンがあります。下部には、合計金額 $59.97 USD とチェックアウトに進むボタンがあります。
バリエーションはショッピング カートにこのように表示されます。選択したバリエーションの詳細を示す画像、価格、オプション リストを確認します。

さらに詳しく: ショッピング体験のカスタマイズ

特徴的な言及
バリアントの最初のリリースが公開されました。 私たちが検討している追加機能と拡張機能をご覧くださいバリエーションやオンライン取引全般について、さらに改善してほしい点がある場合は、お気軽にリクエストを送信してください。 提案リストご協力をよろしくお願いいたします。
ユアン・マック