商品付加画像の設定について

*当記事はカラーミーSEO+テンプレート限定のカスタマイズ内容です。他テンプレートでは動作しませんのでご了承ください。

商品に付加画像を設定する

カラーミーショップの商品付加画像一覧

カラーミーでは商品を目立たせるためのアイコンマークが62種類用意されています。
付加画像を設定すると、商品名の前か後ろに自動的に画像が組み込まれ、商品一覧や個別ページなどで表示されます。

 

ただ見ての通り、ちょっと前時代的なデザインですので、カラーミーSEO+テンプレートでは文字に変えています。
実際の表示はこのようになります。

カラーミーSEO+の商品一覧スクリーンショット

付加画像を設定するにあたり、注意点2つと、カスタマイズ方法について説明しておきます。

 

付加画像は「前方に表示」を設定する

付加画像は、商品の個別編集ページで下の方にスクロールすると設定箇所が出てきます。(参考:カラーミー商品登録

 

表示設定は、「表示しない」「前方に表示」「後方に表示」の3種類ありますが、必ず「前方に表示」を選択してください。
後方を選ぶと文字に変換されずにそのままの画像が出力されます。

付加画像の色や点滅は選べません

元の付加画像には点滅対応や色違いなど様々なパターンが用意されていますが、どれを選んでも同じデザインに変換されて出力されます。
*CSSを使って個別に編集することは可能です。

販売している商品タイプによって、色や文言を変更したい場合もあると思います。
そこで次に付加画像のカスタム方法を書きましたのでご確認ください。

付加画像のカスタム方法

SEO+テンプレートでの付加画像は、

・おすすめ商品一覧(トップページ)
・カテゴリー/グループ一覧
・商品詳細ページ
・検索結果ページ
・お気に入り商品ページ

で使用されています。

 

フォントのサイズや色は「共通」のcssで定義していますので、共通.cssを変更すれば全体の変更ができます(あえてページごとに変えたい、ということも可能です)

付加画像の色・背景色などを変更する

初期のcss設定は以下の通りです。

/* 付加画像共通 */
.mark{
  font-size:12px (PCは14px);
  font-weight: bold;
  width: max-content;
  padding: 5px (PCは8px);
}
/* 「New」 */
.newmark{
  color:#fff;
  background:#be3737;
}
/* 「Sale」 */
.salemark{
  color:#fff;
  background:#d72323;
}
/*「おすすめ」 */
.osumark{
  color:#fff;
  background:#66c079;
}
/* 「値下げ」 */
.sagemark{
  color:#fff;
  background:#1d417a;
}
/* 「売切れ」 */
.sldmark{
  color:#fff;
  background:#5c6a7d;
}
/* 「再入荷」 */
.saimark{
  color:#fff;
  background:#000;
}

「共通」のCSS編集スペースに変更したいものだけ追記してくだされば、全体に適用されます。

・操作場所:
管理画面 > ショップ作成 > デザイン > デザイン:テンプレート編集

表示されるテキスト内容を変更する・独自で画像を用意する

初期設定では「New・Sale・おすすめ・値下げ・SoldOut・再入荷」というテキスト表示になりますが、ショップの雰囲気に合わせた文言に変更したい、あるいは自分で用意した画像に変更したい というご要望もあると思います。

テキスト内容の変更・または画像の差し替えは共通で設定することが出来ないため、各ページごとに行う必要があります。

html編集の「共通」「トップ」「商品一覧」「商品詳細」「検索結果」に、それぞれ下のような箇所があるはずなので、この「New」や「送料無料」の文字を変えてやればOKです。

<!-- 付加画像 -->
<{if $mark != ""}>
<{if $mark <= 15}><p class="mark newmark">New</p>
〜中略〜
<{else}><p class="mark freemark">送料無料</p><{/if}>
<{/if}>
<!-- // 付加画像-->

画像に差し替えたい場合は、文字の代わりに「<img src="xxx" alt="xxx" />」タグを書き込めばOKです。

2020年6月23日カラーミーカスタマイズcss

Posted by ミフネWEB