How to change size of the photo inside the variant color button

X-DREAM · ‎01-17-2024

Please see 2 different screenshot below, I can change the size of the button, but how do I make color selector the photo inside the box button bigger? I want the photo to fit the whole box.

Thanks

www.x-dream.com.au

password: 666

Dan-From-Ryviu · ‎01-17-2024

Please update code to this

<style>
.\#product-options-radio-item-media { width: 100% !important; }
.\#product-options-radio-item-media .\#media-image { width: auto !important }
.\#product-options-radio-item-input.\!sold-out+.\#product-options-radio-item-body:has(.\#product-options-radio-item-media) {
padding: 0px !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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 · ‎01-17-2024

Hi @X-DREAM

Please go to Online store > Themes > Edit code > open theme.liquid file, add this code under <head> element

<style>
.\#product-options-radio-item-media { width: 100% !important; }
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

X-DREAM · ‎01-17-2024

this can increase the photo inside the box but it also increased box bigger, anyway can keep the box size only make the photo inside bigger?

thanks

Dan-From-Ryviu · ‎01-17-2024

Please update the code.

<style>
.\#product-options-radio-item-media { width: 100% !important; }
.\#media-image { width: auto !important }
.\#product-options-radio-item-input.\!sold-out+.\#product-options-radio-item-body:has(.\#product-options-radio-item-media) {
padding: 0px !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

X-DREAM · ‎01-17-2024

It worked perfect, but the collection page image been changed, I attached below. thanks

(left image is the original, right image is after I update the code)

Dan-From-Ryviu · ‎01-17-2024

Please update code to this

<style>
.\#product-options-radio-item-media { width: 100% !important; }
.\#product-options-radio-item-media .\#media-image { width: auto !important }
.\#product-options-radio-item-input.\!sold-out+.\#product-options-radio-item-body:has(.\#product-options-radio-item-media) {
padding: 0px !important;
}
</style>

- Helpful? Like & Accept solution!
- Ryviu - Product Reviews & QA app: Import reviews from AliExpress, Amazon, Etsy, Walmart, Dhgate and CSV.
- Amazon Products Importer - Import Amazon Products to Dropship in Your Store!
- 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.

X-DREAM · ‎01-17-2024

Thanks a lot, everything worked

Juanpa11 · ‎08-17-2024

I have the same problem

But I don´t know where to insert the code, can you help me? I try to put under <head>, but nothing happen

Please Help!

Juanpa11 · ‎08-17-2024

I have the same problem

But I don´t know where to insert the code, can you help me? I try to put under </head>, but nothing happen

Please Help!

How to change size of the photo inside the variant color button

How to change size of the photo inside the variant color button

Community Blog Articles