「バリエーション価格」表示機能について

「バリエーション価格」表示機能については、コマースクリエイター運用中（新規・切替後）のみご利用可能です。

ただし、「バリエーション価格」機能追加に伴い、コマースクリエイター未利用・移行中（切替前）の店舗様の登録画面や項目に影響がございます。
詳しくは、本マニュアルの「バリエーション価格」表示機能追加に伴う、管理画面/各種仕様の変更点をご覧ください。

＜目次＞

• バリエーション価格表示機能の概要
• 「バリエーション価格」表示機能の概要
• 「バリエーション価格」表示機能の基本的な仕様
• 「バリエーション価格」表示機能追加に伴う、管理画面/各種仕様の変更点
  • commerce creatorメニューにおける変更点
  • 運用＞商品管理メニューにおける変更点
  • CSVでの一括登録における変更点
  • 構造化データにおける変更点
  • 置換文字における変更点
  • 測定タグにおける変更点
  • レコメンド2/future AI Recommendにおける変更点
  • Facebookピクセル（Metaピクセル）利用時のコンバージョンAPIにおける変更点
  • Google Analytics拡張eコマースにおける変更点
  • 外部連携における変更点
• ユーザー画面の表示について
  • 商品詳細・商品一覧ページ上の、価格とポイントの表示について
  • 各カートパーツにおけるバリエーション価格の表示について
  • お気に入り商品一覧の表示について'
  • 「価格でのソート」・「検索による結果表示」について
• 「バリエーション」設定の流れ
• 【応用】バリエーション選択時に、商品コメントを切り替える方法について

カラーやサイズなどのバリエーション設定がある商品で、バリエーションごとに価格が異なる場合でも、1つの「商品詳細」画面に全てのバリエーションとその価格を表示し、お客様（消費者）に選択いただけます。

画面遷移をしていただく必要がないので、「欲しいバリエーションが探せない」「どれがどのバリエーションか分かりにくい」といった不便さをなくします。

また商品登録においても、価格が異なるからといってバリエーション毎に商品登録を分ける必要がありません。
1つの商品登録画面に設定したバリエーションに、それぞれバリエーション価格を登録すれば完了です。

バリエーション商品における「探せない」「探しにくい」をなくし、さらに商品登録や管理の煩雑さをなくし、売上向上につなげましょう。

コマースクリエイター運用中（新規・切替後）のみご利用可能な機能です

＜表示における仕様＞

• バリエーション価格の登録前に、商品を公開してしまうと、販売価格で販売されてしまいます。
  適宜「非公開」にするなど設定手順にご注意ください。
• バリエーション商品において、バリエーション価格の登録がない場合は以下のように表示されます。
• 「通常商品」の場合は、販売価格が表示されます。
• 「予約商品」の場合は、、予約設定 に新設された 「予約販売価格」設定 の設定により異なります。
  下表をご覧ください。

• バリエーション価格を利用する際は、会員価格・通常価格(定価)利用・表示できません（取り消し線表示もできません）。
• 商品レビュー一覧表示は、バリエーション価格で表示されます。

＜「バリエーション価格」対応・非対応について＞

• 定期・頒布会商品 には対応していません。
  ※定期・頒布会機能を利用する際には、バリエーション価格の利用ができません。
• 予約商品 に対応しています。
• ポイントについては、バリエーション価格ごとに計算して表示・付与されます。店舗様の作業は必要ありません。
• カートボタン（HTML出力）を利用してカートボタンを表示した場合、ページにはバリエーション価格は表示されませんが、カート内では、バリエーション価格で販売されます。
  ご利用中の店舗様の作業は必要ありません。
• バンドル販売商品 においても、バリエーション価格は利用できます。
  バリエーション価格が設定されている場合でも、バンドル販売による定額値引き・定率値引き・定額設定が適用されます。
• STAFF START ご利用の場合、コーディネート商品に関する表示は、バリエーション価格に対応しています。

「バリエーション価格」表示機能追加により、コマースクリエイター未利用・移行中（切替前）店舗様の登録画面や項目にも影響がございます。
影響のある店舗様のステータスを記載しますので、コマースクリエイター切替後 ・コマースクリエイター未利用・移行中（切替前）の表示を併せてご確認ください。

commerce creatorメニューにおける変更点

コマースクリエイター切替後・コマースクリエイター未利用・移行中（切替前）

税表示において、「（税込）」のみとなります。

以下の コマースクリエイター＞テーマ＞テーマ設定-価格表示パターンは廃止となります。（コマースクリエイター）

運用＞商品管理メニューにおける変更点

以下の変更点については、特記がない場合は、コマースクリエイター切替後・コマースクリエイター未利用・移行中（切替前）いずれの管理画面も変更になります。

バリエーション情報の登録メニュー（画面）の変更

以下の対応表をご覧下さい。

管理画面対応表

「代表バリエーション」の新設

コマースクリエイター運用中（新規・切替後）のみ

「代表バリエーション」とは

外部連携時に主に利用されます。
バリエーション単位で連携している場合には、各バリエーション毎に価格などの情報を連携しますが、
商品単位で連携している場合には、「代表バリエーション」に設定されたバリエーションの情報を連携します。

＜「代表バリエーション」の設定（指定）方法＞

以下のいずれかで行います。

・管理画面： 商品バリエーション設定（確認用画面）
・CSVでの一括登録：バリエーション詳細登録用ファイル （後述します。）

• 2023.07バージョンUP前に登録された商品は、バリエーションNOが最も小さいものを自動的に「代表バリエーション」として設定しています。
  変更する場合は、商品バリエーション設定（確認用画面） より操作してください。

CSVでの一括登録における変更点

コマースクリエイター切替後・コマースクリエイター未利用・移行中（切替前）

時期は未定となりますが、一部のファイルが廃止予定です。 後継のファイルは表にてご確認ください。

• 2023.07現在、廃止予定ファイルもご利用可能ですが、できる限り新規（後継）ファイルをご利用ください。
• 特にコマースクリエイター切替後、コマースクリエイター切替予定の店舗様は、コマースクリエイター切替後にのみ利用できる機能や項目などがございますので、必ず後継のファイルをご利用ください。

バリエーション登録に関するファイル

• バリエーション登録用ファイル（※廃止予定） を利用された場合、代表バリエーションの登録欄がありません。
  自動的に一番小さいバリエーションNoを代表バリエーションとして設定します。

予約商品のバリエーション登録に関するファイル

予約商品登録に関するファイル

• コマースクリエイター切替後、 予約設定登録用ファイル（※廃止予定） を利用された場合は、自動的に以下のように処理されます。
  ・予約販売価格が設定されている場合：「予約販売価格・バリエーション予約販売価格で販売する」で登録
  ・設定されていない場合：「販売価格・バリエーション販売価格で販売する」で登録

エラー処理

コマースクリエイター運用中（新規・切替後）のみ

「バリエーション価格」機能追加にともない、その他エラー処理についても、新たに追加されています。
詳しくは 一括登録のエラー内容について をご覧ください。

構造化データにおける変更点

コマースクリエイター運用中（新規・切替後）のみ

バリエーション価格が設定されている商品の場合、「price（商品価格）」でバリエーション価格を出力します。

置換文字における変更点

コマースクリエイター運用中（新規・切替後）のみ

以下の置換文字は、バリエーション価格を考慮した出力となります。

• 販売価格：{% product.sales_price %}
• 通常価格：{% product.list_price %}
• 予約価格：{% product.pre_sales_price %}
• 販売価格（OGP）：{% product.tax_in_price_raw %}

出力条件について

以下をご参照ください。

＜販売価格　{% product.sales_price %}＞

＜通常価格　{% product.list_price %}＞

＜予約価格　{% product.pre_sales_price %}＞

＜販売価格（OGP）　{% product.tax_in_price_raw %}＞

・通常販売の場合

・予約販売の場合

測定タグにおける変更点

コマースクリエイター運用中（新規・切替後）のみ

以下の置換文字を利用した場合、バリエーション価格を考慮した出力となります。

• 商品単価（オプション価格除く・税抜）：{% analytics.product.price_excluding_tax %}
• 商品単価（オプション価格除く・税込）：{% analytics.product.price_including_tax %}
• 消費税（販売価格）：{% analytics.tax %}
• 付与ポイント数：{% analytics.earn_points %}

出力条件について

以下をご参照ください。

• 「付与ポイント数」は、以下を元にして計算されます。

＜通常販売商品の場合＞

• 「商品単価（オプション価格除く・税抜）」と「商品単価（オプション価格除く・税込）」の「ショッピングカート」以降での出力の場合は、「代表バリエーション」ではなく、「個別バリエーションの販売価格」を出力

＜予約販売商品の場合＞

• 「商品単価（オプション価格除く・税抜）」と「商品単価（オプション価格除く・税込）」の「ショッピングカート」以降での出力の場合は、「代表バリエーション」ではなく、「個別バリエーションの予約販売価格」を出力

レコメンド2/future AI Recommendにおける変更点

コマースクリエイター運用中（新規・切替後）のみ

レコメンド２

• 商品の閲覧・購入時に、自動出力されレコメンドサーバに連携される「行動履歴収集タグ」 の価格・ポイントにおいて、
  バリエーション価格を設定している商品の場合は、代表バリエーション価格に基づいたデータを連携します。
  （データの蓄積・レコメンド商品の価格表示）
• レコメンド管理画面上での、「アイテム（商品）データ一括登録」用のCSVファイル 上の「price」において、
  バリエーション価格を設定している商品の場合は、代表バリエーションの価格を連携します。

future AI Recommend

レコメンド「表示枠」への連携

「表示枠」内のレコメンド商品に表示される価格・画像については以下の通りです。

• 通常価格：代表バリエーション価格（※登録がない場合は「販売価格」を表示）
• 予約価格：代表バリーション予約価格（※登録がない場合は「予約販売価格」を表示）
• 画像：「商品サムネイル画像に指定する」 が設定された画像
• 「値下げされた商品」レコメンドに関する「値下げ」の判定：代表バリエーション価格の「値下げ」により判定
  （※バリエーション登録自体の変更による価格の変動は、判定対象外です。）

レコメンドを表示するための行動履歴・注文履歴の連携

バリエーション価格の連携は、ユーザーのアクションによって以下のようになります。

• ［A］「「商品詳細」画面からのカート追加・削除」「ショッピングカートを表示」した場合：
  AI Recommend側に連携する項目「税込み価格」において、バリエーション価格を設定している商品の場合は、バリエーション価格を連携
• ［A］以外のアクションの場合：
  • バリエーション商品の場合：
• バリエーションの価格が設定されている場合は、代表バリエーションの価格を連携
• バリエーション価格が設定されていない場合は、販売価格を連携
  • バリエーション商品ではない場合：販売価格を連携

Facebookピクセル（Metaピクセル）利用時のコンバージョンAPIにおける変更点

コマースクリエイター運用中（新規・切替後）のみ

コンバージョンAPIご利用方法（Facebookピクセル（Metaピクセル）利用時） をご利用の場合です。

以下のアクション時にFacebookピクセル（Metaピクセル）側に連携する項目において、
バリエーション価格を設定している商品の場合は、バリエーション価格で連携します。

• 購入
• カートに追加
• チェックアウト開始
• ウィッシュリストに追加
  • バリエーション単位で追加した場合：バリエーション単位でのバリエーション価格での連携
  • 商品単位で追加した場合：代表バリエーション価格での連携

Google Analytics拡張eコマースにおける変更点

コマースクリエイター運用中（新規・切替後）のみ

以下のアクション時の連携項目「price」において、バリエーション価格に対応します。

• 商品一覧IMP
  • お気に入り画面の時は、以下の通り。
• バリエーション単位で登録した場合：該当バリエーションの価格を出力する
• 商品単位で登録した場合：商品価格レンジで出力する
• 商品IMP(view_item)
• 商品CLK(select_content・select_item)
  • お気に入り画面の時は、以下の通り。
• バリエーション単位で登録した場合：該当バリエーションの価格を出力する
• 商品単位で登録した場合：商品価格レンジで出力する
• カート増加(add_to_cart)
• 決済開始(begin_checkout)
• カート減少(remove_from_cart)
• 決済ステップ(set_checkout_option→add_payment_info)
• カート表示(view_cart)

外部連携における変更点

コマースクリエイター運用中（新規・切替後）のみ

＜任意商品データフィードにて、商品情報と販売価格を連携をしている場合＞

出力先により異なります。
詳しくは、商品フィード連携について と同マニュアル内の 表の見方（出力条件について） をご覧ください。

＜APIにて、商品情報と販売価格を連携をしている場合＞

• APIにて「商品情報」を連携しているか否かについては、連携先にご確認ください。

「販売価格」が連携され、表示されます。（2023.07.11現在）

商品詳細・商品一覧ページ上の、価格とポイントの表示について

＜商品詳細ページの場合＞
設定＞商品・商品グループ＞商品ページ設定-バリエーション販売価格・バリエーション予約販売価格表示設定での設定により表示が異なります。

＜商品詳細ページの場合＞
設定＞商品・商品グループ＞商品一覧ページ設定-バリエーション販売価格・バリエーション予約販売価格表示設定での設定により表示が異なります。

最小価格、および、最小価格をもとにした付与ポイント数が表示されます。

最小価格が表示されます。

最小価格と最高価格が表示され、それぞれの価格をもとにした付与ポイント数が表示されます。

最小価格と最高価格が表示されます。

予約商品の場合の表示

予約販売・通常販売価格のいずれか一方でもバリエーション価格を利用している場合には、予約販売・通常販売価格が異なっていても、通常販売時の価格は表示されません。

予約販売価格	通常販売価格	商品詳細ページでの表示	商品一覧ページでの表示
バリエーション価格あり	バリエーション価格あり			通常販売時の価格は表示されません。
	バリエーション価格なし
バリエーション価格なし	バリエーション価格あり			通常販売時の価格は表示されません。
	バリエーション価格なし	※既存の表示と同様	※既存の表示と同様	予約販売価格・通常販売価格が異なる場合、 通常販売時の価格が上部に表示されます。

バリエーション選択時の表示

各カートパーツにおけるバリエーション価格の表示について

「バリエーション価格」表示機能の追加に伴い、新規パーツ「カート・バリエーション選択スライダー」が追加されます。
既存パーツは、バリエーション価格利用時の表示設定など、追加となる仕様があります。

カート・バリエーション選択スライダー利用時の表示

お気に入り商品一覧の表示について

バリエーション指定でお気に入り登録している場合は、該当バリエーションの価格を表示します。

商品指定でお気に入り登録している場合は、設定＞商品・商品グループ＞商品一覧ページ設定-バリエーション販売価格・バリエーション予約販売価格表示設定に従い、商品価格レンジを表示します。

• 「最小価格〜最高価格」の形式で表示する選択時

• 「最小価格〜」の形式で表示するの形式で表示する選択時

「価格でのソート」・「検索による結果表示」について

• 価格ソートは最小価格でソートを行います。
• 価格での検索の場合、最小／最大レンジいずれか一方でも、検索条件に合致した場合は検索結果として表示します。
• 検索結果での表示は、レンジで表示します。

管理画面内

ユーザー画面内

CSSとコメント設定にhtmlを用いることで、バリエーション毎に表示するコメントを変更することが可能です。
枝番をデータ属性として利用し出力させます。

切替表示させるコメントの入力/表示欄としては、
「商品説明（大）」「商品説明（小）」「独自コメント（1）～（20）」 をご利用いただけます。

設定手順と表示イメージ（例）

「商品説明（大）」にサイズ別・カラー別・サイズ×カラー別にてコメントを表示されるよう例を示します。
以下のようなバリエーション登録をしたとします。利用するのは、「枝番号」です。

設定手順

1. オリジナル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;
}

2. 商品説明（大）」に入力（例）

<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］を指定したコメント