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

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
10033 1999 2043

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 and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10033 1999 2043

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! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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
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
10033 1999 2043

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! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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
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
10033 1999 2043

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 and Accept solution! OR Buy me coffee ❤️
- 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.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- 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
Excursionist
29 0 3

Thanks a lot, everything worked

Juanpa11
New Member
8 0 0
I have the same problem
 
Juanpa11_0-1723934552148.jpeg

 

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

 

Codigo.jpg

 

Please Help!

Juanpa11
New Member
8 0 0

I have the same problem

Problemaimagen.jpg

 

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

 

Codigo.jpg

 

Please Help!