カラーミーのどこでもカラーミー＆（カートJS)をカスタマイズする

カラーミーショップには「どこでもカラーミーショップ（カートJS機能）」という機能があり、カラーミーショップ以外のサイトやブログをお持ちの方は、ブログにソースを貼ると、カラーミーショップ内に登録した商品画像や内容が表示され、「カートに入れる」ボタンが表示されます。

「カートに入れる」をクリックするとカラーミーショップの購入画面につながる機能があります。

カスタマイズの設定として、商品名や商品画像、説明文などの表示／非表示はカラーミーショップショップのカートJS設定内で出来ますし、デザインも種類豊富に選べるのだけれど、このデザインがいまいち。

そして、生成されるコードがJSコードなので、細かいカスタマイズがしづらい。

今回、どうしてもカートJSのボタンの色を変えたくてカスタマイズしたので参考まで。

カートJSでデザインは「ノーマルグレー」で出すことを前提にしています。

どこでもカラーミーショップのボタン色を変える

1.カラーミーショップの「商品管理」からどこでもカラーミーショップのコードを出したい商品を探し、「修正」ボタンを押して、商品編集画面を表示する。

商品名上の「どこでもカラーミーショップ（カートJS機能）」のリンクをクリックする。

2.開いた画面で、デザインは「ノーマルグレー」にしておく。
他のデザインでもOKですが、これが一番使いやすいかなーと思っています。

3.吐き出されたコードをコピー＆ペーストで入れたいブログやサイト等に挿入する。

4.JSのコードはブログ等で表示される際には、HTMLコードに変換されるので、こちらをブログなどのスタイルシートにてカスタマイズする。

お使いのブログのスタイルシートに

.cartjs_cart_in input { background-color: #D66915 !important; }

上記の設定では、ボタンがオレンジになります。

!importantを付けることによって、JSで生成されるコードよりも優先されます。