How to highlight selected product sizes and colors?

How to highlight selected product sizes and colors?

JoeyRoo
Explorer
77 0 13

Hi,

Hi,

 

Is there a way to create a highlight or outline which pops up when someone selects a size or color on one of my products. I want to keep the colors and sizes the way they are now, but the color swatch or size, which is selected will be highlighted. Something like a black box.

 

Site: https://theothelabel.com/password

Password: theo2024

 

Thank you!

Replies 4 (4)

Guleria
Shopify Partner
3997 795 1134

Try this css

.variations .product-form__input--block input[type=radio]:checked+label { 
    background-color: #000;
    color: #fff;
    border-radius: 50%;
}
- Custom themes, UI/UX design, ongoing maintenance & support.
- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com Skype: live:navrocks1
- Try GEMPAGES a great page builder

Dan-From-Ryviu
Shopify Partner
11017 2157 2302

Go to your Online store > Themes > Edit code > open product.css file, add this code at the bottom 

 

.variations .product-form__input--block input[type=radio]:checked+label {
background: #000 !important;
color: #fff !important;
font-weight: 700;
}

Screenshot 2024-01-15 at 10.09.02.png

 

 

 

- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

JoeyRoo
Explorer
77 0 13

This is perfect, thank you. Is there a way to create a black border around the selected color as well? Looking for maybe a black circle outline or something similar. 

PageFly-Henry
Shopify Partner
1184 335 296

Hi @JoeyRoo 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file product.css

Step 3: Paste the below code at bottom of the file -> Save

 

.variations .product-form__input--block input[type=radio]:checked+label {

    background: red !important;

    border-radius: 50px !important;

    color: white !important;

    font-weight: 600 !important;

}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.