Solved

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

X-DREAM
Excursionist
29 0 3

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

 

333.PNG222.PNG

 

 

Accepted Solution (1)
Dan-From-Ryviu
Shopify Partner
7514 1450 1447

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

View solution in original post

Replies 6 (6)

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

X-DREAM
Excursionist
29 0 3

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

 

555.PNG

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

X-DREAM
Excursionist
29 0 3

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)

 

22.png11.png

 

 

 

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

This is an accepted solution.

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 or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

X-DREAM
Excursionist
29 0 3

Thanks a lot, everything worked