FROM CACHE - jp_header
解決済

商品ページのバリエーション選択ボタンの色を変更したい(Dawn)

ff_dog
観光客
7 0 1

はじめまして、Ff_dogと申します。

 

Dawnテーマのデフォルト商品ページを使用しています。

現在、バリエーション選択ボタンがモノクロ表示となっていますが、この部分の色は変更可能でしょうか?

 

コードについての知識が乏しいため、ご教授いただければと思い投稿させていただきました。

何卒よろしくお願いいたします。

 

1 件の受理された解決策

株式会社フルバランス
Shopify Partner
1513 544 681

成功

Dawnテーマにおける、バリエーション選択ボタンの色の変更でしたら、
以下のcssコードを追加することで対応可能です。

/*バリエーションボタンの背景色、線の色、文字色の変更*/
.product-form__input input[type=radio]+label{
background-color: #ffffff; ⇦背景色
border-color: #aeaeae; ⇦線の色
color: #aeaeae; ⇦文字色
}

/*選択中のバリエーションボタンの背景色、線の色、文字色の変更 */
.product-form__input input[type=radio]:checked+label {
background-color: #ffffff; ⇦背景色
border-color: #000000; ⇦線の色
color: #000000; ⇦文字色
}

/*バリエーションボタンをホバーした時の線の色の変更*/
.product-form__input input[type=radio]+label:hover {
border-color: #000000; ⇦線の色
}

cssファイルを作成していないようでしたら、main-product.liquid内に添付のように記入していただけると変更が可能です。

スクリーンショット 0004-03-29 18.36.00.png

ちなみに上記のコードだと、デザインとしては以下のような表示となります。

スクリーンショット 0004-03-29 18.35.40.png

色の指定方法がわからないようでしたら、以下のサイトが役に立つかと思いますので、参考にしてみてください。
https://www.sejuku.net/blog/57425

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス

元の投稿で解決策を見る

2件の返信2

株式会社フルバランス
Shopify Partner
1513 544 681

成功

Dawnテーマにおける、バリエーション選択ボタンの色の変更でしたら、
以下のcssコードを追加することで対応可能です。

/*バリエーションボタンの背景色、線の色、文字色の変更*/
.product-form__input input[type=radio]+label{
background-color: #ffffff; ⇦背景色
border-color: #aeaeae; ⇦線の色
color: #aeaeae; ⇦文字色
}

/*選択中のバリエーションボタンの背景色、線の色、文字色の変更 */
.product-form__input input[type=radio]:checked+label {
background-color: #ffffff; ⇦背景色
border-color: #000000; ⇦線の色
color: #000000; ⇦文字色
}

/*バリエーションボタンをホバーした時の線の色の変更*/
.product-form__input input[type=radio]+label:hover {
border-color: #000000; ⇦線の色
}

cssファイルを作成していないようでしたら、main-product.liquid内に添付のように記入していただけると変更が可能です。

スクリーンショット 0004-03-29 18.36.00.png

ちなみに上記のコードだと、デザインとしては以下のような表示となります。

スクリーンショット 0004-03-29 18.35.40.png

色の指定方法がわからないようでしたら、以下のサイトが役に立つかと思いますので、参考にしてみてください。
https://www.sejuku.net/blog/57425

株式会社フルバランス(Shopify Experts)
Shopify専門のEC成長支援会社です。ストアの新規構築から運用や改善のサポートなどShopifyに関する幅広いサービスを行なっております。
ECの技術・実務・成長、お悩みのことがあれば、お気軽にご相談ください。
『すべてのブランドの特大成長エンジンを搭載する』 株式会社フルバランス
ff_dog
観光客
7 0 1

Fullbalance様

 

お世話になっております。

こちらの質問に、ご回答をいただいておりましたにもかかわらず、お礼が遅くなり申し訳ございません。

 

main-productのリキッドに添付の通り記載しましたら、無事に色の変更を行うことが出来そうです!

商品説明文のフォントサイズ変更に続き、大変参考になりました。

ありがとうございました。