makeshopサポート │ オプショングループ設定時の商品価格表示を変更する方法

こんにちは、makeshopのあらいです。
いつもmakeshopをご利用いただきありがとうございます。

今回は商品詳細ページの（バリエーション/オプショングループを設定時）
価格が小さくなってしまう場合のカスタマイズ方法をご紹介します！

こんなお悩みありませんか？

・特定の商品詳細ページの価格の文字だけ小さくなる…
・バリエーション/オプショングループを設定した商品の価格も色をつけたり、大きく表示したい

ショップデザイン / テンプレート選択・編集 / トップページ編集 / 共通CSS管理

共通CSS管理のエディターエリアに下記のスタイル指定を追記してください。

.m_price{
font-size:20px !important;/* フォントサイズの指定*/
color:#cc0000;/* フォント色の指定*/
width:70px;/* 幅の指定*/
}

反映しない場合は、↓で指定してみてください。

#M_price1,#M_price2{
font-size:20px !important;/* フォントサイズの指定*/
color:#cc0000;/* フォント色の指定*/
width:70px;
}

・商品にバリエーション/オプショングループを設定している場合、登録された商品価格が他の商品とちがって<input>タグで出力されます。そのため、スタイル指定を追記することで表記を変更できます！

・「フォントサイズ」「フォントの色」「幅」の指定は、お好みで設定することができます。
・「幅」の指定は、あまり狭い幅にすると価格表示が切れてしまいますので、商品価格の桁数を考慮して必要に応じて設定しましょう！

・このスタイル指定では変更できない場合もあります。

ショップをみるで確認してみましょう！

いかがでしたでしょうか。
ぜひお試しください！それではまた！

価格の表示が小さくなってしまう時の対処方法【バリエーション/オプショングループ編】【ベーシックモード】