カテゴリー別アーカイブ: カラーミーコーディング

カラーミーの価格表示設定

カラーミー(ECサイト)で、通常価格よりも商品をお安く販売をする際、
例えば「本来は20,000円だけど、今は15,000円でオトクに販売しています!」
という時、その値引き額(「5,000円も安くなってるんですよ!」ということ)をユーザーに知らせたいですよね。

そんなときは、商品登録の際、「定価」と「販売価格」の両方に入力すれば自動で2つの価格が表示されるわけですが、
「定価」に打ち消し線をつけ、かつ、線の色だけ赤にしたい!
というお声がございましたので、その際のコーディング方法をお伝えします。

カラーミーの
「お店を作る」「デザインを設定する」→「商品詳細」html編集をクリックし、以下の箇所を探しましょう。

htmlサンプル1—————————-————————–

<tr>
<th>定価</th>
<td><{$product.price}></td>
</tr>

————————————————————————

ここに定価表示の設定がされているため、スタイルをかけて調整していきます。

tdタグの欄に以下を追加し、CSSで打ち消し線の色を設定します。
定価の数字も赤で問題ないかたは、spanタグの設定は不要です。

htmlサンプル2————————————

<tr>
<th>定価</th>
<td><p class=”line-red”><span><{$product.price}></span></p></td>
</tr>

CSSサンプル——————————————————–

p.line-red{text-decoration:line-through;color: red;}

p.line-red span{color:#000;}

————————————————————————

これで定価の数字は黒色、打ち消し線のみ赤、の設定ができました。
↓↓↓こんな感じ

sample_1

「定価」と「販売価格」を設定した商品については、基本的には全ページ共通の表示となりますのでご注意くださいませ。

それでは~