Hello,
I need to make the color/size swatches circular. The option is unavailable and when I use Shopify’s sidekick it shows a circle and a square combined.
Can someone assist me with this?
Hi @yonicque
You can make the swatches circular with a simple CSS edit.
Go to Online Store Themes Edit code → base.css or theme.css and add
.product-form__input input[type="radio"] + label {
border-radius: 50% !important;
overflow: hidden;
}
.product-form__input input[type="radio"] + label span {
border-radius: 50% !important;
}
If you’re using color swatches with background images, also add:
.swatch,
.swatch label {
border-radius: 50% !important;
}
Save and refresh.
If it doesn’t apply, let me know your theme name and I’ll give the exact selector
Hello @yonicque Thanks for reaching out to Shopify community with your concern. You need to add this code in the theme files. For which you need to go to Online Store > Actions (Active theme) > Edit Code > Assets, under assets add the code at the bottom of theme.css file.
.variant-input-wrap input[type=radio]:checked+label, .variant-wrapper label[for]{
border-radius: 25px !important;
}
.color-swatch:before{
border: 0px !important;
}
.variant-input .color-swatch{
width: 30px !important;
height: 30px !important;
}
Its only showing on the product page, but not the collect pages or the featured collections.
Its live now @NerdCurator https://www.yonicque.com
@yonicque Please add this CSS too in the same file.
.grid-product__colors .color-swatch{
border-radius: 20px !important;
}
Thanks! @NerdCurator
@nerdcurator I noticed that the code only applied on mobile for some odd reason. Can you look into this for me again? Our website is https://www.yonicque.com
Hello, we are looking to change the image once the member selects the color.
Hi @yonicque 
Should you wish the product image to automatically change when a customer selects a color, Easify Product Options can fully achieve this without any theme code modifications.
Here’s an example I’ve created so you can see how it works:
- This is the result:
- This is the app setting:
First, create your product in Shopify as usual. Then go to the app and create a Color Swatch option, adding all the colors you want to display on the product page.
Next, create additional options corresponding to each color (for example: design layer red, design layer black, etc.). In each of these options, enable Product Personalizer, then upload the product image that matches the respective color. Repeat the same steps for the remaining colors so each color has its own image.
Finally, go to Advanced Settings and set up Conditional Logic: when Color = White, show design layer White; when Color = Black, show design layer black, and so on. This way, when customers select a color, the product image will automatically update to match the chosen color.
The app is designed to be very user-friendly and easy to use, with no coding knowledge required. If you need any assistance during setup, our team is always ready to help.