How to create a clicked swatch outline on a product page?

[oscaroline]

I would like to make an outline around a clicked swatch on product page only (NOT ON COLLECTION PAGE)

like the photo.

www.sundaypaloma.com

[EBOOST]

Hi @oscaroline ,

May I suggest to update code these steps:

1. Go to Store Online-> theme → edit code
2. Assets/base.css
3. Add code below to end of file

body.template-product .product-form__input input[type="radio"]:checked + .color__swatch::before,
body.template-product .product-form__input input[type="radio"]:checked + .color__swatch:hover::before{
	border-color: #fff!important;
}
body.template-product .product-form__input input[type="radio"]:checked + .color__swatch::after, 
body.template-product .product-form__input input[type="radio"]:checked + .color__swatch:hover::after {
	width: calc(100% + 4px);
	height: calc(100% + 4px);
	border-color: #000 !important;
	top: -2px;
	background: none !important;
	left: -2px;
}
body.template-product .product-form__input input[type="radio"] + .color__swatch::before {
	box-shadow: inset 0 0 0 3px #fff;
}