Liquid、JavaScriptなどに関する質問
はじめまして、Ff_dogと申します。
Dawnテーマのデフォルト商品ページを使用しています。
現在、バリエーション選択ボタンがモノクロ表示となっていますが、この部分の色は変更可能でしょうか?
コードについての知識が乏しいため、ご教授いただければと思い投稿させていただきました。
何卒よろしくお願いいたします。
解決済! ベストソリューションを見る。
成功
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内に添付のように記入していただけると変更が可能です。
ちなみに上記のコードだと、デザインとしては以下のような表示となります。
色の指定方法がわからないようでしたら、以下のサイトが役に立つかと思いますので、参考にしてみてください。
https://www.sejuku.net/blog/57425
成功
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内に添付のように記入していただけると変更が可能です。
ちなみに上記のコードだと、デザインとしては以下のような表示となります。
色の指定方法がわからないようでしたら、以下のサイトが役に立つかと思いますので、参考にしてみてください。
https://www.sejuku.net/blog/57425
Fullbalance様
お世話になっております。
こちらの質問に、ご回答をいただいておりましたにもかかわらず、お礼が遅くなり申し訳ございません。
main-productのリキッドに添付の通り記載しましたら、無事に色の変更を行うことが出来そうです!
商品説明文のフォントサイズ変更に続き、大変参考になりました。
ありがとうございました。
いつもShopifyをご利用いただき、ありがとうございます。 Shopifyは、皆様の日本語での利用体験の向上に努めております。さらなる改善のために皆様のご意見をお寄せい...
By JasonH May 9, 2025Shopify アカデミーの学習パスと認定スキルバッジExpanding Your Shopify Business Internationallyを活用して、国際的にビジネ...
By Shopify Feb 7, 2025Shopify アカデミーの学習パスB2B on Shopify:立ち上げとカスタマイズで卸売販売に進出しましょう。これら3つの無料コースは、ShopifyストアでB2B機能...
By Shopify Jan 31, 2025