Shopify themes, liquid, logos, and UX
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!
Try this css
.variations .product-form__input--block input[type=radio]:checked+label {
background-color: #000;
color: #fff;
border-radius: 50%;
}
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;
}
- 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.
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.
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.
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025