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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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 and Accept solution!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.