商品カードバッジのデザインカスタマイズ

表示位置、件数、形状と、高度なCSSセレクタ

商品カードバッジの見た目は、設定画面の「商品カードバッジ」で、ストア全体に共通して設定します。

次の項目を設定できます。

(1) 設定を開く

アプリ左側メニューの「設定」を開き、「商品カードバッジ」を開いてください。

(2) デザインを設定する

表示位置、間隔、最大表示件数、形状、文字サイズ、文字の太さを設定してください。

項目

内容

表示位置

商品カードの左上、右上、左下、右下

間隔

選んだ角から、上下と左右の間隔(px)

最大表示件数

1つの商品カードに出す件数。既定は2件、最大は10件

形状

四角、ピル、タグ、カスタム。カスタムでは角丸の大きさ(px)も指定できます

文字サイズ・文字の太さ

バッジ内テキストのフォント

(3) 保存する

「保存」を選択してください。

バッジのテキスト、背景色、文字色は、この画面ではなく販売期間ルールごとに設定します。

テキストと色の設定は、「商品カードバッジの設定/変更」を確認してください。

既定のセレクタで商品カードや挿入位置を検出できないテーマでは、「高度な設定」でCSSセレクタを指定してください。空のままで問題ない場合は、入力する必要はありません。

  • 商品カードのCSSセレクタ: 商品カード全体を示すセレクタ

  • バッジ挿入先のCSSセレクタ: バッジを挿入する位置を示すセレクタ