Shopify themes, liquid, logos, and UX
We're moving the community! Starting July 7, the current community will be read-only for approx. 2 weeks. You can browse content, but posting will be temporarily unavailable. Learn more
Hi all,
Mu current color variant is square with a small round circle in the midle - It doesn't look good. I would like to have it round fully coloured, Any ideas on how to achieve that? Thanks in advance
Solved! Go to the solution
This is an accepted solution.
Please update the code
.product-information .variations .product-form__input--color input[type=radio]+label:after {
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
}
.product-form__input--color label {
box-shadow: unset !important;
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi @Ahazoh
Please share the link to your product page so I can check and give you the code
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you for helping.
Please see below the link to my page:
https://www.ahazoh.com/collections/casualwear/products/cire-mens-t-shirt-with-side-detail
Psw:2025
.product-information .variations .product-form__input--color input[type=radio]+label:after {
border-radius: 50%;
top: 9px;
left: 9xp;
right: 9px;
bottom: 9px;
}
Please add this code to Cutom CSS in Online Store > Themes > Customize > Theme settings
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Hi Dan,
Thanks for that but no joy. See below the output:
I am looking for something like this:
I dont want to circle inside the square.
Thanks in advance for your help
This is an accepted solution.
Please update the code
.product-information .variations .product-form__input--color input[type=radio]+label:after {
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
}
.product-form__input--color label {
box-shadow: unset !important;
}
- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
amazing! Thank you so much for all your help.
It is perfect now 🙂
Have an amazing day . All the best