How can I modify my color swatch design on my website?

[oscaroline]

Hello

my website: www.sundaypaloma.com

I just updated my theme and my colour swatch design

is now back to the original design and I can’t remember how I modified it.

I want to modify this (I don’t like it when hovered or clicked the swatches become bigger and the outline is not visible)

I want it to look like this

1. no enlargement or zoom

2. black outline instead of thin outline

thank you

[Mike-Consentik]

Hi @oscaroline

This is Mike from Omega

You can try my solution

1. Open Theme → Edit code

2. Find file base.css or theme.css and paste this code to the bottom of file:

.product-form__input input[type=radio]+.color__swatch:hover:before, .product-form__input input[type=radio]+.color__swatch:hover:after {
    transform: scale(.6);
    border: 2px solid #333;
}

.product-form__input input[type=radio]:checked+.color__swatch:before {
    transform: scale(0.6);
}

.product-form__input input[type=radio]:checked+.color__swatch:after {
    border: 2px solid #333;
}

This is result:

Hope answer will help you

Mike from Omega

[Moeed]

Hey @oscaroline

Follow these Steps:

1. Go to Online Store

2. Edit Code

3. Find theme.liquid file

4. Add the following code in the bottom of the file above tag

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[oscaroline]

it still enlarges when clicked ..

can I make everything the same size even if it’s hovered and clicked or not clicked

but just have outline when clicked?

now when it’s clicked, the swatch is enlarged a little big

[Mike-Consentik]

Hi @oscaroline

Let’s try this code

.product-form__input input[type=radio]+.color__swatch:hover:before, .product-form__input input[type=radio]+.color__swatch:hover:after {
    transform: scale(.6) !important;
    border: 2px solid #333 !important;
}

.product-form__input input[type=radio]:checked+.color__swatch:before {
    transform: scale(0.6) !important;
}

.product-form__input input[type=radio]:checked+.color__swatch:after {
    border: 2px solid #333 !important;
}