商品タグを登録する

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

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

CSVにて一括登録も可能

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

商品マークを登録する

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

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

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

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

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

［保存する］を押下します。

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

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

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

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

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

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

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

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

1. コマースクリエイター＞テーマよりスタートアップテーマ(PC/タブレット)の［レイアウト］ボタンを押下します。



2. レイアウト一覧より、カラーチップを表示したい「商品グループ（PC）」の を押下して、レイアウト変更画面を開きます。



3. レイアウト変更画面の左側の「レイアウト変更」エリアにて、 を操作し、「メインエリア＞コンテンツエリア＞商品グループエリア＞商品一覧」と階層を開きます。



4. 右側の「レイアウト選択」エリアにて、検索窓に「商品マーク」と入力し［検索する］を押下します。
   ［商品マークパーツ］が表示されます。



5. ［商品マークパーツ］の  をドラッグ&ドロップで左側の「レイアウト変更」エリアに配置します。
   以下の操作では、例として、「商品名」のすぐ下に配置するとします。



6. ［プレビュー］ボタンを押下し、「デザイン確認モード」で表示を確認します。
   プレビューの方法については、プレビューを表示するをご覧ください。





7. 問題がなければ［保存する］ボタンを押下します。

CSSを調整する（参考）

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

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

.mark-chips{
 border-radius: 10px;
 width: 20px;
 height: 20px; 
}