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>
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
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>
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
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>
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
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>
- Solved it? Hit Like and Accept solution!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- 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.
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!
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025