1. オンラインマニュアル
  2. よく使われる機能&活用法ガイド
  3. 商品にバリエーションカラーチップを表示する
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル
コマースクリエイターでのショップ開店がはじめての方はこちら ショップ開店ガイド
管理画面メニュー別ガイド
決済機能について
外部連携・フィード・API
一括登録・一括取得
オプション
  • フューチャーカートリカバリー
  • futureサジェストリンク
  • futureRecommend2
その他
  • セキュリティ対策について
コマースクリエイター構築リファレンス
  • はじめてのコマースクリエイター
  • 画像登録
  • コマースクリエイターへの移行
<ご契約状況管理画面の使い方>
  • 契約管理ポータル

商品にバリエーションカラーチップを表示する

表示イメージ:「商品グループ」画面でのカラーチップ表示(例)

※表示イメージはスタートアップテーマ(カスタマイズ前)です。
利用するパーツや項目設定により表示内容やレイアウトを変更することができます。詳しくは説明をご覧ください。

カラーチップを表示することで、バリエーションカラー展開があることなどを訴求できます。

商品タグ商品マークを利用します。

  1. 商品タグを登録する
  2. 商品マークを登録する
  3. 表示したい「商品グループ」レイアウトに「商品マーク」パーツを配置する
  4. CSSを調整する(参考)

表示手順

商品タグを登録する

カラーチップを表示したい商品の「商品タグ」欄に、カラーチップを表示する際のタグを入力します。(タグ名は任意に指定してください。)

例では、「桃玉」「黄玉」としています。

CSVにて一括登録も可能

商品タグ一括登録をご参照ください。

商品マークを登録する

コマースクリエイター>テーマを開き、利用中テーマの[商品マーク]を押下します。

「商品マーク一覧」画面より[商品マークを追加する]ボタンを押下します。

「商品マーク追加」画面にて、以下を参考に入力します。

「カラー」で色を指定し、CSSで表示調整を行います。

  • ラベル:半角スペース
  • class:CSSで表示を調整する場合は入力してください。例では、"mark-chips"を指定しています。
  • 画像:空白
  • 商品タグ:[手順1]で登録した「商品タグ」を選択します。例では「桃玉」を選択しました。

[保存する]を押下します。

同じ要領で、表示したいカラーチップ分、商品マークを作成します。

カラーチップに使用したい「カラー」がない場合は、「商品マーク追加」画面の「カラー」に、カラーチップに使用したい色がない場合をご参照ください。

必要なカラーチップをすべて登録すると、左図のように一覧に表示されます。

再度[保存する]ボタンを押下してください。

表示したい「商品グループ」レイアウトに「商品マーク」パーツを配置する

カラーチップを画面上に表示するためには、「商品グループ」レイアウトに「商品マーク」パーツを配置する必要があります。

「商品検索結果一覧」にも表示したい場合は「商品検索結果一覧」レイアウトに、「バンドル商品一覧」にも表示したい場合は「バンドル商品一覧」レイアウトに、「クーポン対象商品一覧」にも表示したい場合は「クーポン対象商品一覧」レイアウトに、それぞれ別途配置します。

以下では、例として「PC・タブレット」で表示される「商品グループ」レイアウトにて表示します。
表示したいテーマとレイアウトにより適宜選択し、操作してください。スマートフォンやタブレットで、テーマを分けている場合は、それぞれのテーマでの操作が必要です。

  1. コマースクリエイター>テーマよりスタートアップテーマ(PC/タブレット)の[レイアウト]ボタンを押下します。
  2. レイアウト一覧より、カラーチップを表示したい「商品グループ(PC)」の を押下して、レイアウト変更画面を開きます。
  3. レイアウト変更画面の左側の「レイアウト変更」エリアにて、 を操作し、「メインエリア>コンテンツエリア>商品グループエリア>商品一覧」と階層を開きます。
  4. 右側の「レイアウト選択」エリアにて、検索窓に「商品マーク」と入力し[検索する]を押下します。
    [商品マークパーツ]が表示されます。
  5. [商品マークパーツ]の  をドラッグ&ドロップで左側の「レイアウト変更」エリアに配置します。
    以下の操作では、例として、「商品名」のすぐ下に配置するとします。
  6. [プレビュー]ボタンを押下し、「デザイン確認モード」で表示を確認します。
    プレビューの方法いついては、プレビューを表示するをご覧ください。
  7. 表示イメージ
  8. 問題がなければ[保存する]ボタンを押下します。

表示されない場合はカラーチップが「表示されない場合」のチェックポイントをご覧ください。

CSSを調整する(参考)

カラーチップのように表示するためにCSSを調整します。以下を参考にご調整ください。
例では、正円で表示するように調整しています。

CSSは、オリジナルCSSアイテムにて追加してください。

.mark-chips{
 border-radius: 10px;
 width: 20px;
 height: 20px; 
}
CSS調整前
CSS調整後

参考情報

「商品マーク追加」画面の「カラー」に、カラーチップに使用したい色がない場合

カラーチップを画像で作成し、アイテムにアップロードします。

「商品マーク追加」画面にて以下のように登録します。

  • ラベル:カラーチップ用だと分かりやすい任意の名前をつけます。(ユーザー画面には表示されません。)
  • class:CSSで表示を調整する場合は入力してください。
  • 画像:あらかじめ用意していた画像を登録します。登録の流れはこちらをご参照ください。
  • 商品タグ:[手順1]で登録した「商品タグ」を選択します。

画像登録の流れ

[画像を読み込む]ボタンを押下します。

「アイテム検索」モーダルが開くので、[アイテムをアップロードする]ボタンを押下するか、「アップロードするファイルをドロップしてください。」欄にアップしたい画像をドラッグ&ドロップし、画像をアップロードします。

「アイテム追加」モーダルが開くので、「アイテム名」や「パス」「管理タグ(指定すると検索する際に絞り込みができ便利です)」を入力し、[保存する]ボタンを押下します。

再び「アイテム検索」モーダルが開くので、「管理タグ」や「アイテム名」などで検索します。
検索結果に表示された、指定したいカラーチップの画像のを押下します。

以上で、カラーチップ用の画像が指定されました。


カラーチップが「表示されない場合」のチェックポイント

まず以下をご確認ください。

配置したレイアウトが、「利用中(有効)」であるか。
「レイアウト変更」画面にて「有効にする」のチェックがついているレイアウトかどうかご確認ください。
チェックOFFの場合は、レイアウト自体が利用されておりません(表示されていません)。
この場合、プレビューでは「商品マーク」が表示されますが、実際のサイトでは表示されません。
表示したい商品が属する「商品グループ」に割り当てられたレイアウトに、配置しているか。
誤ったレイアウトに配置している可能性があります。
例えば以下の場合、誤ったレイアウトに「商品マーク」パーツを配置しているので表示されません。
レイアウト割当については割当名(商品詳細・商品グループ・フリーページ用レイアウト)を設定するをご覧ください。
「カタログ表示用」が割り当てられてるグループ
レイアウト割当「レディース」で操作している