Shopify themes, liquid, logos, and UX
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
password: 666
Solved! Go to the solution
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.
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.
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
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.
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)
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.
Thanks a lot, everything worked
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!
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024