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

今回はスマホテンプレートより
【Primary】の商品詳細ページ「カートに入れる」ボタンのデザイン変更方法をご紹介します！
参考：スマホサンプルショップ【Primary】

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

・【Primary】のテンプレートがかっこいいから使ってるけど「カートに入れる」の色は変えられる？
・【Primary】の「カートに入れる」は、作成した画像にしてみたい！

[難易度 ★☆☆ ]
かんたん！スマホ【Primary】
「カートに入れる」ボタンのデザイン変更方法！

「カートに入れる」ボタンの色を変更する場合

　CSSの指定を変更する！

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
適用中のスマホテンプレートの「編集」をクリック
商品詳細画面へ

商品詳細ページ編集の「CSS編集」エディターエリアに記載されている下記の色の指定を変更します。

/* カートに入れるボタン */
.btnCart,.btnRestock{
	background:#54B3DE;/*ボタンの色の指定*/	
	color:#fff;/*「カートに入れる」の文字色の指定*/
	width:100%;
	font-size:17px;/*「カートに入れる」の文字サイズの指定*/
	padding:15px 0;
	font-weight:bold;
}

「カートに入れる」を画像のボタンにする場合

ボタンの画像が用意できたら、ソースを修正します。

　HTMLを修正する！

ショップデザイン / テンプレート選択・編集 / スマホデザインの設定
適用中のスマホテンプレートの「編集」をクリック
商品詳細画面へ

商品詳細ページ編集の「HTML編集」エディターエリアに記載されている下記の指定を変更します。

<input type="submit" class="btn btnCart" value="カートに入れる" onclick="<{$get_basket_url}>">

　↓

<a onclick="<{$get_basket_url}>"><img src="ボタン用の画像のURL(パス)"></a>

完了！

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

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