オプションは、サイズや色の異なる服のように、同じ商品の異なるバリエーションを販売することを可能にします。オプションのそれぞれのユニークな組み合わせがバリアントとなります。各バリアントは別の商品として扱われ、設定可能な独自の商品フィールドを持ちます。

バリアントとは、プログラムの実行条件を設定した値を管理するオブジェクトのことです。 バリアントを指定してSAPジョブを実行することで、その実行条件に従ってプログラムを実行することができます。

重要:
各製品のバリアントは、サイトプランのアイテム制限にカウントされます。

このレッスンでは

  1. オプションセットの追加と管理
  2. バリアントの更新
  3. デフォルトの製品バリアントを設定する
  4. オプションセットの追加と管理

について説明しています。

1.オプションの追加と管理

異なるサイズや色など、異なるオプションが付属する製品を販売する場合、各オプションタイプにオプションセットを追加できます。これらのオプションの組み合わせに一致する製品の個々のバージョンは、バリアントです。例えば、Tシャツを複数のサイズ、色、デザインで販売する場合、3つのオプションセット（サイズ用、色用、デザイン用）を追加する必要があります。

A chart displaying three columns for Product, Option set and Option. These three contain visuals for 1 product, t-shirt and color coordinated details for size, color and design.

オプションセットを追加するには、オプションを持つ商品の詳細ビューを開き、オプションセクションまでスクロールして、+ オプションセットを追加します。

The options section displays a plus icon to add an option set.
商品コレクション内の個々の商品アイテムに対してオプションセットを作成することができます。


注意事項
1つの商品に対して、最大3つのオプションセットを作成することができます。

オプションの追加

オプションセットの名前（サイズ、色...）を決めて、オプションを追加していきます。各オプションを入力し、Enterキーを押すと、オプションが作成されます。サイズのオプションは以下の通りです。S、M、L、XL。色のオプションは次のとおりです。黒、白、青、など。

The Options section includes a new option set section that has text input field for name and options. There is a grayed out plus sign to add an option set. Also displayed is a delete icon, cancel and done buttons.

※各商品アイテムは、合計50のバリエーションを持つことができます。これは、追加できるオプションの数を制限するものです。例えば、オプションセット1に5つのオプションがある場合、オプションセット2には10以上のオプションを追加することができません（5*10=50）。

オプションの編集

間違えてしまったオプションの名前を変更したり、削除したりしたい場合は、オプションの名前の上にカーソルを置いて、表示される矢印をクリックします。名前の変更または削除を選択します。


The Blue option variant edit dropdown menu is highlighted on the options section. The two items in the dropdown menu are Rename option and Delete option.

また、オプションをダブルクリックすることで、名前を変更することができます。また、オプションフィールドにカーソルがあるときにバックスペースキーを押すと、オプションを最後から順に削除することができます。

オプションセットの管理

作成したオプションセットは、オプションセット名をクリックするか、オプションセット上にカーソルを置くと表示される設定アイコンをクリックすることで編集することができます。

A size variant with two variants is highlighted in the Options section. The size variant contains an XL and L option.

ここでは、オプションセットの名前の変更、オプションの管理、ゴミ箱アイコンをクリックしたオプションセットの削除ができます。

The Options section includes a name text field called Size, two variants, XL and L as options. Also included are a delete icon, cancel and done buttons.

オプションセットを削除すると、それに関連するバリアントがバリアントインベントリから削除されます。

2. バリアントの更新

オプションを追加すると、オプションセットのオプションの組み合わせごとに、バリアントが自動的に作成されることがわかります。つまり、サイズ、色、デザインが異なるTシャツのバリエーションは、S/黒/無地、M/黒/ドット柄、L/黄色/ストライプ柄、といった具合になります。

A chart including three option set columns called Size, Color, Design and a column for variants.

でも、このバリエーションの中には売ってないものもあります！例えば、黒いストライプのシャツがないとか、黄色いシャツは小さいサイズしかないとか。どうすれば、買い物客が販売していないバリアントを注文しないようにできるのでしょうか？販売されていないバリアントについては、バリアントの詳細を更新し、在庫追跡を有効にして、数量を0に設定します。これにより、オプションリストのドロップダウンでこれらのオプションを選択できないようにします。

バリアント詳細の更新

各バリアントは独立した製品で、設定できる独自の製品フィールドを持っています。メイン商品で設定されたメイン画像、その他の画像、SKU、価格、比較対象価格、計測値は、すべてのバリアントで継承されます。数量は、設定されている場合、最初に作成されたバリアントで継承されます。

継承された値を手動で更新したり置き換えたりするには、バリアントをクリックするか、バリアントの上にカーソルを置くと表示される設定アイコンをクリックします。

The Variants section includes three items at size S (small). The three options have different designs, Plain, dotted and striped.
バリアントをクリックすると、その詳細を編集することができます。
アドバイス：
‍製品のバリエーションが同じ（またはほとんど同じ）寸法でない限り、オプションセット（およびバリエーション）を作成する前に、メイン製品のこれらのフィールドの値をクリアするのが最善かもしれません。これは、多くのバリアントがある場合に便利です。これらの値はすべてのバリアントで継承されるので、継承されたフィールドの値を更新するのを忘れてしまうことがあるかもしれません。一方、空のフィールドを発見し、必要に応じて更新するのは簡単です。
The Variants section includes an image thumbnail, more images upload area, track inventory and include download switch buttons. Also included are input fields for quantity, SKU, price, compare-at-price, weight, width, height, length, file name and file URL.

各バリアントについて、以下のフィールドに値を設定することができます。バリアント画像、価格、比較可能価格、幅、高さ、長さ、重量。また、在庫追跡を有効にして、数量を設定することもできます

3. デフォルトの商品にバリアントを設定する

バリアントを追加すると、最初に作成されたバリアントがデフォルトバリアントとなります。これはバリアント在庫リストで星印⭑で表示されます。

The default size small variant is highlighted in the Variants section. There is a star next to the product thumbnail.

各バリアントについて、以下のフィールドに値を設定することができます。バリアント画像、価格、比較可能価格、幅、高さ、長さ、重量。また、在庫追跡を有効にして、数量を設定することもできます

デフォルトの商品バリアントを設定する

バリアントを追加すると、最初に作成されたバリアントがデフォルトバリアントとなります。これはバリアント在庫リストで星印⭑で表示されます。

デフォルトのバリアントを変更する。異なるバリアントをデフォルトバリアントとして設定するには、バリアントインベントリ リストでその名前をクリックして詳細にアクセスし、"デフォルトにする" というボタンをクリックします。これだけです!

A size small product is selected. The set as default button is highlighted in the Variants section.

バリアントデザイン

コレクションリストと製品ページで、データを引き出すことができるコレクションフィールドは、バリアントがあるかどうかにかかわらず、すべての製品で同じになります。それは、デフォルトのバリアントとメイン製品が同じものだからです。つまり、バリアントがある商品では、これらのフィールドはデフォルトのバリアントから詳細を取得します。

On the left, a product image of blue pillow cases is connected to the "Main Image" field of the "products" collection in the middle. On the right, a product image of gray ribbed pillow cases is displaying the "variant image" of the default variant because this product has multiple variants.

この画像要素は、"products" コレクションの "Main Image" フィールドに接続されています。左の画像は製品の「メイン画像」を表示しており、バリアントを持ちません。右側の画像は、この製品には複数のバリアントがあるため、デフォルトバリアントの「バリアント画像」を表示しています。

カートに入れる時のオプション

バリエーションがある商品の場合、「カートに入れる」コンポーネントには、オプションリストと呼ばれる追加のラッパーが表示されます。これにより、ユーザーは商品をカートに入れる前に、その商品で利用可能なさまざまなオプションから選択することができます。

The Navigator includes a wrapper called Option List. This wrapper is selected and highlighted.

買い物客がこれらの選択肢を選ぶと、デフォルトのバリアントのデータを表示している要素は、選択された選択肢のデータを表示するように更新されます。

On the left, option 1 is a size small silver cushion product. On the right, option 2 is a size medium silver cushion product.

デザイナーであるあなたは、バリアントドロップダウン要素の設定でデフォルトの「選択」テキストを置き換えることができます。

On the left, a select field is selected. On the right, the settings panel of the select field is filled out with the word "Pick" replacing the previous default text "Select".

4. チェックアウト・エクスペリエンスにおけるオプションとバリアント

選択されたオプションは、カート、チェックアウトページ、チェックアウト確認ページにオプションリストとして表示されます。

On the left, the option list wrapper is selected in the Navigator. On the right, the option list wrapper is selected in the checkout section of the Striped Cushion option.

このオプションリストは、コレクションリストをカスタマイズしてデザインするのと同じように、カスタマイズすることができます。

The customer cart includes three products with a quantity of 1 on each. The product name, price and size are also included. There is a remove button for each item. At the bottom is the subtotal of $59.97 USD and a continue to check out button.

バリアントはこのようにカートに表示されます。画像、価格、オプションリストが選択されたバリアントの詳細を表示していることに注目してください。