「バリエーション」設定の流れ
本機能はコマースクリエイター未利用・移行中（切替前）の店舗様はご利用いただけません。
ご利用に関する【重要事項・注意事項】を確認してください
＜目次＞
＜関連マニュアル＞
【参考】「代表バリエーション」とは
外部連携時に主に利用されます。
バリエーション単位で連携している場合には、各バリエーション毎に価格などの情報を連携しますが、
商品単位で連携している場合には、「代表バリエーション」に設定されたバリエーションの情報を連携します。
＜「代表バリエーション」の設定（指定）方法＞
以下のいずれかで行います。
【応用】バリエーション選択時に、商品コメントを切替える方法について
切替表示させるコメントの入力/表示欄としては、
「商品説明（大）」「商品説明（小）」「独自コメント（1）～（20）」
をご利用いただけます。
設定手順と表示イメージ（例）
「商品説明（大）」にサイズ別・カラー別・サイズ×カラー別にてコメントを表示されるよう例を示します。
以下のようなバリエーション登録をしたとします。利用するのは、「枝番号」です。
設定手順
- オリジナルCSSに入力
- 「任意で設定」のところは、店舗様で任意に指定してください。
- 「縦軸の枝番号」「横軸の枝番号」のところは、管理画面で設定した「バリエーション枝番号」を入力してください。
- 「任意で設定」と「縦軸の枝番号・横軸の枝番号を利用して、「属性」を作成し、「属性」を「商品説明」や「独自コメント」欄に入力して利用します。 「属性」は、.（任意で設定した［A］ or ［B］）-（［縦軸 or 横軸の枝番号］） の形です。
.productVariationInfo [class^='size（←任意で設定（縦軸用）［A））'],
.productVariationInfo [class^='color（←任意で設定（横軸用）［B］）'] {
display: none;
}
[data-fs-variation-vertical-no='kids（←縦軸の枝番号）'] .size（←［A］）-kids（⇒こちらが属性［1］となります）,
[data-fs-variation-vertical-no='junior（←縦軸の枝番号）'] .size（←［A］）-junior（⇒ちらが属性［2］となります）,
[data-fs-variation-horizontal-no='white（←横軸の枝番号）'] .color（←［B］）-white（⇒ちらが属性［3］となります）,
[data-fs-variation-horizontal-no='green（←横軸の枝番号）'] .color（←［B］）-green（⇒ちらが属性［4］となります）,
[data-fs-variation-vertical-no='kids（←縦軸の枝番号）'][data-fs-variation-horizontal-no='green（←横軸の枝番号）']
.size（←［A］）-kids-green（⇒ちらが属性［5］となります）{
display: block;
}
- 商品説明（大）」に入力（例）
<div class="productVariationInfo">
<div class="size-kids（属性［1］）">キッズサイズ用の「商品説明（大）」です。小さな子供でも扱いやすいサイズです。</div>
<div class="size-junior（属性［2］）">ジュニアサイズ用の「商品説明（大）」です。小学生高学年くらいまでご利用いただけるサイズです。</div>
<div class="color-white（属性［3］）">ホワイト用「商品説明（大）」です。清潔間のある、白さです。</div>
<div class="color-green（属性［4］）">グリーン用「商品説明（大）」です。オリーブ色にちかいグリーンです。</div>
<div class="size-kids-green（属性［5］）">キッズサイズ×グリーンが選択された際の「商品説明（大）」です。やわらかなグリーンで、女のお子様でも男のお子様でも、双方にお使いただけます。</div>
</div>
表示イメージ
【1】「サイズ：キッズ」を選択した場合
「キッズ」を選択した際に表示される「属性［1］」を指定したコメントが表示されます。
【2】「カラー：ホワイト」を選択した場合
「ホワイト」を選択した際に表示される「属性［3］」を指定したコメントが表示されます。
【3】「サイズ：ジュニア」と「カラー：グリーン」を選択した場合
以下が表示されます。
・「ジュニア」を選択した際に表示される「属性［2］」を指定したコメント
・「グリーン」を選択した際に表示される「属性［4］」を指定したコメント
【4】「サイズ：キッズ」と「カラー：グリーン」を選択した場合
以下が表示されます。
・「キッズ」を選択した際に表示される「属性［1］」を指定したコメント
・「グリーン」を選択した際に表示される「属性［4］」を指定したコメント
・「キッズ×グリーン」を選択した際に表示される「属性［5］を指定したコメント
