How Can I Add Colow Swatches Name Under The Swatches?

[DylanRyan]

I want mine to look like this as well I'm using shrine theme. I would appreciate any help, thank you.

[Dan-From-Ryviu · Accepted solution]

Please go to Online Store > Themes > Edit code, open section-main-product.css, add this code at the bottom and save the file

.product .color-swatch {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
.product .color-swatch__label {
    position: unset !important;
    transform: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    color: rgb(0 0 0) !important;
}
.product .color-swatch:hover .color-swatch__label {
    transform: scale(1.1) !important;
}
.product .color-swatch__label:before {
    display: none !important;
}

[Dan-From-Ryviu]

Hi @DylanRyan 

Can you share your store URL?

[DylanRyan]

https://leorel.com/products/leorel-magnetic-eyelashes?_pos=2&_psq=s&_ss=e&_v=1.0&variant=49256595161...

[Dan-From-Ryviu · Accepted solution]

Please go to Online Store > Themes > Edit code, open section-main-product.css, add this code at the bottom and save the file

.product .color-swatch {
    display: flex !important;
    flex-direction: column;
    align-items: center;
}
.product .color-swatch__label {
    position: unset !important;
    transform: unset !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: transparent !important;
    color: rgb(0 0 0) !important;
}
.product .color-swatch:hover .color-swatch__label {
    transform: scale(1.1) !important;
}
.product .color-swatch__label:before {
    display: none !important;
}

[DylanRyan]

Thank you it works perfect on dekstop but doesn't show up on mobile how can we fix that

[Dan-From-Ryviu · Accepted solution]

Code update

.product .color-swatch {
display: flex !important;
flex-direction: column;
align-items: center;
}
.product .color-swatch__label {
position: unset !important;
transform: unset !important;
opacity: 1 !important;
visibility: visible !important;
background: transparent !important;
color: rgb(0 0 0) !important;

display: block !important;
}
.product .color-swatch:hover .color-swatch__label {
transform: scale(1.1) !important;
}
.product .color-swatch__label:before {
display: none !important;
}

[DylanRyan]

Thank you so much it worked!

[Dan-From-Ryviu]

You are very welcome

Regards,

Dan