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

今回は買い物かごの中身を表示できる「カートを見る」ボタンのデザインをカスタマイズする方法をご紹介します!

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

・「カートを見る」の画像を変えたい!
【Fashion】テンプレートのボタンデザインを変更したい

【基本】「カートを見る」ボタンの設置方法

まずは基本的な「カートを見る」の設置から確認してみましょう。

【独自デザイン(PC)】>【トップページ編集】>【上段メニュー管理】へ

このタグを入力すると「カートを見る」ボタンを表示することができます。
「?」部分を数字にするとボタンの色を変更することができます。
(「1=赤」「2=白」「3=黒」)

[CART_INSIDE1] [CART_INSIDE2] [CART_INSIDE3]
カートを見る赤ボタン カートを見る白ボタン カートを見る黒ボタン

参考:オンラインマニュアル「上段メニュー管理」

[難易度 ★☆☆ ]
「カートを見る」ボタンの画像をカスタマイズする方法!

その1. ボタンのサイズを変更しないで画像を変える編

この元の画像を参考に別のボタンへ差し替えてみましょう。

カートを見るボタン画像

↓↓このように同じサイズ「幅126px × 高さ26px」の画像を用意します。

カートを見るボタン画像

(1)CSSを追加!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

のエディターエリアに下記を追記してください。

・変数タグから出力されている画像を強制的にお好みの画像で表示します。

・"画像のURLパス" ←アップロードした同じサイズの画像のパスを記述します!
 参考記事:「画像やCSSファイルをアップロードしたい

(2)完了!

↓↓できあがり!
カートを見るカスタマイズボタン

一番かんたんなカスタマイズ方法です!

その2. ボタンの画像サイズも変更する編【上級者向け】

↓↓このような「幅172px × 高さ40px」画像を用意します。初期値より少し大きめですね。

カートを見るボタン画像

(1)CSSを追加!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

のエディターエリアに下記を追記します。

・作成したボタンの画像サイズに合わせて、幅(width)、高さ(height)のサイズを指定
 しましょう。
・"画像のURLパス" ←アップロードした画像のパスを記述します!

(2)完了!

↓↓できあがり!
カートを見るカスタマイズボタン

雰囲気が変わりますね。

[難易度 ★☆☆ ]
【Fashion】テンプレートで「カートを見る」ボタンの色を変更する方法!

カスタマイズテンプレート【Fashion】では

↓↓このようにCSSでボタンを作成しています。

カートを見る

(1)CSSを編集!

【独自デザイン(PC)】>【トップページ編集】>【共通CSS管理】

のエディターエリアの下記の指定を変更しましょう。

指定されている色を変更してみましょう!

 color: #fff; ←ボタンの文字色(白)
 background: #000; ←ボタンの背景色(黒)

・外部参考サイト:カラーコード表

→かんたんですね。
ショップをみるで確認してみましょう!

いかがでしたでしょうか。
お好みのカスタマイズ方法をぜひお試しください!それではまた!