Different Background for White Color Swatches

Hi Team,

I use pure white background hence white color swatch blends into the background making it difficult for the customers to see the color option.

I would like this to be changed so that the color swatches area should have a border or background color of the block/section is slightly grayish to make it distinguishable.

https://go.screenpal.com/watch/cTiuoPnITO4

Attachments:

You must be logged in to view attached files.

[marcopolo]

Nevermind, resoved this with chatgtp’s help.

Used this code:

/* === Variation Section Box === */
.variations_form .variations {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 20px;
    margin-top: 20px;
    margin-bottom: 25px;
    display: inline-block;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

/* === Variation Labels (Color:, Size:) === */
.variations_form .variations td.label label {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 10px;
    display: block;
    color: #333;
}

/* === Options Wrapper === */
.variations_form .variations td.value {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    align-items: flex-start;
}

/* === Swatch Wrapper (Circle + Text) === */
.variations_form .variations .swatch-wrapper {
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* === Swatch Circle === */
.variations_form .variations .swatch {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    border: 2px solid #ccc;
    display: inline-block;
    margin-bottom: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}

/* === Hover Effect === */
.variations_form .variations .swatch-wrapper:hover .swatch {
    border-color: #027BC3;
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(2,123,195,0.4);
}

/* === Selected Swatch === */
.variations_form .variations .swatch.selected {
    border-color: #027BC3;
    box-shadow: 0 0 8px rgba(2,123,195,0.5);
}

/* === Swatch Label (Name Below Circle) === */
.variations_form .variations .swatch-label {
    font-size: 13px;
    color: #333;
    font-weight: 500;
    display: block;
}

/* === Disabled Swatch === */
.variations_form .variations .swatch.disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* === Mobile Friendly Layout === */
@media screen and (max-width: 600px) {
    .variations_form .variations td.value {
        justify-content: center;
        gap: 15px;
    }

    .variations_form .variations .swatch {
        width: 50px;
        height: 50px;
    }

    .variations_form .variations .swatch-label {
        font-size: 12px;
    }
}

• This reply was modified 2 months, 3 weeks ago by marcopolo.

Hello,

We are glad that you managed to solve the problem yourself. You are Great!!!

If you have a moment, we’d really appreciate your feedback — it helps us improve the theme and shape future updates: https://tally.so/r/w4l54k

Thanks again for contacting us.

Topic closed.
Best Regards,

[Author]

Posts