How can I display the variant title below the image on Envy Theme?

ChaletEtCeci · ‎12-08-2023

Hi,

I would like to display the variant title below the variant image in product page.

Can anyone help?

Link

https://waycaps.com/?_ab=0&_fd=0&_sc=1&preview_theme_id=123404255296

Dan-From-Ryviu · ‎12-08-2023

Hi @ChaletEtCeci

Go to your Online store > Themes > Edit code > open theme.liquid, add this below code after <head> element

<style>
.variants-container .swatch label:not(.color) {
    min-width: 89px;
    min-height: 70px;
}
.variants-container .swatch .varian-images-c {
    width: 55px!important;
}
.variants-container .swatch .swatch-element {
    margin: 0 12px 15px 0;
}
.variants-container .swatch .tooltip {
    opacity: 1;
    visibility: visible;
    left: 0 !important;
    bottom: -23px !important;
    width: 89px !important;
    padding: 0px !important;
    background: transparent !important;
    color: #000 !important;
    box-shadow: unset !important;
}
.variants-container .swatch .tooltip:after {
    display: none !important;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

View solution in original post

Dan-From-Ryviu · ‎12-08-2023

Hi @ChaletEtCeci

Go to your Online store > Themes > Edit code > open theme.liquid, add this below code after <head> element

<style>
.variants-container .swatch label:not(.color) {
    min-width: 89px;
    min-height: 70px;
}
.variants-container .swatch .varian-images-c {
    width: 55px!important;
}
.variants-container .swatch .swatch-element {
    margin: 0 12px 15px 0;
}
.variants-container .swatch .tooltip {
    opacity: 1;
    visibility: visible;
    left: 0 !important;
    bottom: -23px !important;
    width: 89px !important;
    padding: 0px !important;
    background: transparent !important;
    color: #000 !important;
    box-shadow: unset !important;
}
.variants-container .swatch .tooltip:after {
    display: none !important;
}
</style>

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

ChaletEtCeci · ‎12-08-2023

That worked like a magic !!!

Thank you so much!

Dan-From-Ryviu · ‎12-08-2023

You are very welcome

- Helpful? Like & Accept solution! - Support me? Buy me a coffee
- Ryviu - Product Reviews & QA app: Collect customer reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

How can I display the variant title below the image on Envy Theme?

How can I display the variant title below the image on Envy Theme?

Community Blog Articles