この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元オプションを使用すると、同じ製品の異なるバリアント、たとえば異なるサイズや色の洋服を販売できます。オプションの各ユニークな組み合わせは、バリアントにつながります。各バリアントは個別の製品として扱われ、設定できる独自の製品フィールドを持っています。
重要: 各製品バリアントは、サイトプランのアイテム制限にカウントされます。サイトプランのアイテム制限を理解する。
このレッスンで学ぶこと
オプションセットの追加と管理
異なるオプションを持つ製品、たとえば異なるサイズや色を持つ製品を販売する場合、各オプションタイプに対してオプションセットを追加できます。これらのオプションの組み合わせに一致する製品の個別のバージョンはバリアントです。たとえば、Tシャツを複数のサイズ、色、デザインで販売する場合、サイズ用、色用、デザイン用の3つのオプションセットを追加する必要があります。
オプションセットを追加するには、オプションのある商品の詳細ビューを開き、オプションセクションまでスクロールし、+ Add an option setを追加します。
商品コレクション内の個々の商品アイテムに対してオプションセットを作成できます。
必ず知っておくべきこと；各製品ごとに最大3つのオプションセットを作成できます。
オプションの追加
オプションセットのname（サイズ、色など）を定義し、オプションを追加し始めます。各オプションを入力し、Enterキーを押してオプションを作成します。サイズのオプションの例：S、M、L、XL。色のオプションの例：Black、White、Blue などがあります。
必ず知っておくべきこと： 各製品アイテムは合計で50のバリアントを持つことができます。これは追加できるオプションの数を制限します。たとえば、オプションセット1に5つのオプションがある場合、オプションセット2には10以上のオプションを追加することはできません。 (5*10=50)。
オプションの編集
誤ってオプションの名前を変更したり削除したりする必要がある場合、オプション名の上にカーソルを合わせ、表示される矢印をクリックします。オプションの名前を変更または削除を選択します。
オプションの名前をダブルクリックしても名前を変更できます。また、オプションを削除する別の方法は、カーソルがオプションフィールドにあるときにバックスペースキーを押すことです。
オプションセットの管理
オプションセットを作成した後、オプションセットの名前をクリックするか、オプションセットの上にカーソルを合わせたときに表示される設定アイコンをクリックして、オプションセットを編集できます。
ここで、オプションセットの名前を変更したり、オプションを管理したり、ゴミ箱アイコンをクリックしてオプションセットを削除したりすることができます。
オプションセットを削除すると、バリアントインベントリでそれに関連するバリアントがすべて削除されます。
アップデートのバリエーション
オプションを追加すると、オプションセットからオプションの組み合わせごとにバリアントが自動的に作成されるのがわかります。つまり、サイズ、色、デザインが異なるTシャツのバリエーションには、S/黒/無地、M/黒/ドット柄、L/黄色/ストライプ柄などが含まれます。
しかし、これらのバリアントのいくつかは販売していませんか？
おそらく、黒いストライプのシャツを持っていないか、黄色のシャツは小さいサイズのみで利用可能です。お客様が販売していないバリアントを注文しないようにするにはどうすればよいでしょうか？ 利用できないバリアントに対して、バリアントの詳細を更新し、在庫の追跡を有効にし、数量を0に設定します。これにより、これらのオプションはオプションリストのドロップダウンで選択不可になります。
バリアントの詳細を更新
各バリアントは個別の製品であり、独自の製品フィールドを設定できます。メインの画像、追加の画像、SKU、価格、比較価格、および主要な製品に設定された測定値は、すべてのバリアントに引き継がれます。数量が設定されている場合、最初に作成されたバリアントに引き継がれます。
バリアントをクリックするか、カーソルを合わせたときに表示される設定アイコンをクリックして、引き継がれた値を手動で更新および置換できます。
詳細を編集するにはバリアントをクリックします。
Pro tip：商品のバリアントが同じ（またはほとんど同じ）寸法を持つ場合を除き、オプションセット（およびバリアント）を作成する前に、メイン商品のこれらのフィールドの値をクリアするのが最善かもしれません。これはバリアントがたくさんある場合に便利です。これらの値はすべてのバリアントに継承されるので、継承されたフィールドの値を更新し忘れることがあるかもしれません。一方、空のフィールドを見つけ、必要に応じて更新するのは簡単です。
それぞれのバリアントについて、以下のフィールドに値を設定することができます： バリアント画像、価格、比較価格、幅、高さ、長さ、重量。在庫追跡を有効にして、数量を設定することもできます。
デフォルトの製品バリアントを設定する
バリアントを追加すると、最初に作ったバリアントがデフォルトのバリアントになります。バリアントのインベントリリストでは星印 ⭑ で表示されます。
デザインでは、価格や画像などの商品フィールドに接続された要素は、デフォルトのバリアントの値を表示します。
そして、商品を保存するとすぐに、次に商品の詳細にアクセスしたとき、画像、その他の画像、数量、SKU、価格、比較価格、寸法（幅、高さ、長さ、重さ）の主なフィールドは、その商品では利用できなくなります。デフォルトバリアントの値はこの商品のデフォルトになります。つまり、商品コレクションリストや商品ページで、これらのフィールドに接続された要素はデフォルトバリアントの値を表示します。
知っておくべきこと：すべてのオプションセット（バリアント）を削除すると、その商品のデフォルトコレクションフィールドとその値が復元されます。
デフォルトのバリアントを変更する
別のバリアントをデフォルトのバリアントとして設定するには、バリアントインベントリリストでその名前をクリックして詳細にアクセスし、"Make default" というボタンをクリックします。
バリアントのあるデザイン
商品コレクションリストと商品ページをデザインするとき、データを取り出せるコレクションフィールドは、バリアントがあってもなくても、すべての商品で同じです。デフォルトのバリアントとメインの商品は同じものだからです。ですから、バリアントがある商品では、これらのフィールドはデフォルトのバリアントから詳細を引き出します。
この画像要素は「products」コレクションの「Main Image」フィールドに接続されています。左の画像は商品の「メイン画像」を表示しており、バリアントはありません。右の画像はデフォルトのバリアントの「バリアント画像」を表示しています。
カートに入れる時のオプション
バリアントがある商品の場合、"add to cart" コンポーネントはオプションリストと呼ばれる特別なラッパーを表示します。これにより、ユーザーは商品をカートに追加する前に、その商品で利用可能な異なるオプションから選択することができます。
買い物客がこれらのオプションのどちらかを選ぶと、デフォルトのバリアントのデータを表示しているすべての要素は、選択されたオプションのデータを表示するように更新されます。
あなたはデザイナーとして、バリアントドロップダウン要素の設定でデフォルトの「select」テキストを置き換えることができます。
チェックアウト時のオプションとバリエーション
選択したオプションは、カート、チェックアウトページ、チェックアウト確認ページのオプションリストに表示されます。
このオプションリストは、コレクションリストをカスタマイズしてデザインするのと同じようにカスタマイズできます。
このようにバリアントがカートに表示されます。選択されたバリアントの詳細を示す画像、価格、オプションリストに注目してください。