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

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

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

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

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

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

　CSSの指定を変更する！

【ショップデザイン（スマホ）】> 【スマホデザインの設定】
　適用中のスマホテンプレートの「編集」をクリック
【商品詳細画面】 へ

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

・ボタンの色は、backgroundに指定している色のカラーコードを変更しましょう。
・「カートに入れる」の文字色は、colorに指定している色のカラーコードを変更しましょう。

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

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

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

　HTMLを修正する！

【ショップデザイン（スマホ）】> 【スマホデザインの設定】
　適用中のスマホテンプレートの「編集」をクリック
【商品詳細画面】 へ

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

　↓

・inputで書いてある箇所をa onclick～の記述に変更してボタン用の画像を指定します。
・ボタン用の画像は、「100MBサーバー/ギガプラス10」からアップロードしましょう！
　参考記事「画像やCSSファイルをアップロードしたい」

完了！

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

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