Shopifyストアで、ブランドイメージに合わないボタンの色や、目立たないボタンサイズに悩んでいませんか？「カートに追加」ボタンは、ストアの売上に直結する最重要パーツです。ここを少し変更するだけで、クリック率やコンバージョン率が改善されることも少なくありません。この記事では、プログラミング初心者でもコピペで使える、ShopifyのボタンデザインをCSSで変更する具体的なコード例を紹介します。
CSSコードを追加する前の準備
本格的なコード編集は不要ですが、安心して作業を進めるために、3つの簡単な準備を行いましょう。
①テーマのバックアップ（複製）
万が一の事態に備え、作業前には必ずテーマを複製してバックアップを取りましょう。管理画面の「オンラインストア」＞「テーマ」から、編集したいテーマの「…」をクリックし、「複製する」を選択するだけで完了です。
②カスタムCSSの追加場所
コードの追加は、テーマカスタマイザーから行うのが最も安全です。「カスタマイズ」画面を開き、左下の歯車アイコン「テーマ設定」＞「カスタムCSS」と進みます。ここにコードを貼り付けるだけで、ストアにデザインを反映できます。
③ボタンのクラス名の調べ方
CSSでデザインを変更するには、変更したいボタンの「クラス名（名札のようなもの）」を調べる必要があります。ストアでボタンが表示されているページを開き、ボタンの上で右クリックして「検証」を選択します。表示された開発者ツールで、ボタンに対応するHTML要素（<button class="〇〇">など）を探し、クラス名をコピーします。
ボタンの色を変更するコード例
ボタンの色は、ストアの印象を大きく左右します。ここでは、背景色と文字色を変更する基本的なコードを紹介します。
背景色を変える
ボタンの背景色を変更するにはbackground-colorを使います。以下のコードは、多くのテーマで「カートに追加」ボタンの背景を黒色に変更します。
CSS
/* カートボタンの背景色を黒にする */
.product-form__submit {
background-color: #000000 !important;
}
文字色を変える
ボタンの文字色を変更するにはcolorを使います。背景色を濃くした場合は、文字色を白にすると見やすくなります。
CSS
/* カートボタンの文字色を白にする */
.product-form__submit {
color: #ffffff !important;
}
背景色と文字色を同時に変える
もちろん、背景色と文字色を一度に指定することも可能です。!importantは、他のCSS設定よりこの指定を優先させるための強力な命令です。
CSS
/* カートボタンの背景を黒、文字を白にする */
.product-form__submit {
background-color: #000000 !important;
color: #ffffff !important;
}
ボタンの装飾を変更するコード例
色だけでなく、大きさや形、マウスを乗せたときのアクションを変えることで、さらにユーザーの目を引くボタンにできます。
サイズ（横幅・高さ）を変える
ボタンのサイズはwidth（横幅）とpadding（内側の余白）で調整します。paddingで高さを出すのが最近の主流です。
CSS
/* カートボタンの横幅を100%、高さを出す */
.product-form__submit {
width: 100%; /* 横幅いっぱい */
padding-top: 15px; /* 上の余白 */
padding-bottom: 15px; /* 下の余白 */
}
角を丸くする
ボタンの角を丸くするにはborder-radiusを使います。数値を大きくするほど角の丸みが増し、柔らかい印象になります。
CSS
/* カートボタンの角を少し丸くする */
.product-form__submit {
border-radius: 5px;
}
マウスオンで色を変える
マウスカーソルを乗せた（ホバーした）時の色を変えると、クリックできることが分かりやすくなります。クラス名の後ろに:hoverを付け加えます。
CSS
/* マウスを乗せたら背景をグレーにする */
.product-form__submit:hover {
background-color: #555555 !important;
}
まとめ
Shopifyのボタンデザインは、カスタムCSSを使えば、専門知識がなくても簡単に変更できます。今回紹介したコードは、クラス名をあなたのストアのものに書き換えれば、すぐに使えるものばかりです。「カートに追加」ボタンの色やサイズを少し変えるだけで、ストアの印象は大きく向上し、売上アップに繋がる可能性があります。必ずバックアップを取ってから、コピペで気軽に試してみてください。
コメント