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]

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=49256595161423

[Dan-From-Ryviu]

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]

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

[Easify-Jennifer]

Hi @DylanRyan

With the Easify Product Options app, you can easily set this up by creating image-based option templates for your products. Simply upload an image of each color along with its corresponding name, and the options will be displayed visually as image swatches instead of just plain text or color boxes. (Of course, you can still create color boxes if you want.)

You can also include short descriptions or tooltips to highlight material or color details — shown either on hover or directly beneath the image. The setup is quick and intuitive, and it integrates smoothly with most Shopify themes.

• This is the result:

• This is the app setting:

To display the swatch names, just head to Advanced Settings and set “Show option value labels” to Always show.

You can also add description for each option value here:

I hope this helps resolve your issue! If you need any more assistance, don’t hesitate to reach out to the Easify team — we’re always happy to help!