Make product images 50% of the website.

Connor11
Tourist
10 0 4

I'm having issue on the supply theme right now where the product photos are very small. I see no option to manually change it in the theme settings. I want to try to get my product images to fill 50% of my page with the product title, options, and price fill the other 50%. Has anyone done this or know how to do it?

0 Likes
HardikDavra
Shopify Partner
2327 367 999

Hello, @Connor11 

Welcome to the Shopify Community.
I read your problem and it seems that I need to analyze your website to provide the solution here.
Would you please share your website URL and if your website is password protected then also provide the password.

 

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
0 Likes
suyash1
Shopify Partner
3007 328 503

@Connor11 - this can be done using custom css, can you please share your website link?

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
Connor11
Tourist
10 0 4

Sure! It is vapepenswholesale.com 

suyash1
Shopify Partner
3007 328 503

@Connor11 - your current settings have image 40% and text 60%... also it is grid section with paren-child grids , changing any one will create issues with display, It can be done but not very simple, I recommend to avoid it 

You are welcome to contact me, my email - suyash.patankar@gmail.com
Free Shopify solutions/tutorials on youtube
#1 page builder app on Shopify - for FREE! PageFly
0 Likes
HardikDavra
Shopify Partner
2327 367 999

@Connor11 

Please Go to Online Store -> Themes -> Edit code -> Assets -> theme.scss.liquid and paste this code at the end of this file.

@media only screen and (min-width: 769px) {
#shopify-section-product-template #ProductSection .grid-item {
width: 50% !important;
}
}
PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
Connor11
Tourist
10 0 4

That worked great at making it 50% but was hoping that the product images would expand to fill that empty space. Heres an example of what happens when that code is added.

Connor11_0-1624052275123.png

 

HardikDavra
Shopify Partner
2327 367 999

@Connor11 Please place my code to see the conflict. I will give you one more code for fixing it.

PageFly Landing Page Builder - #1 Choice For Responsive, SEO-friendly Landing, Product Page.

For fast Communication: Email: parambabla.soft@gmail.com | Whatsapp
Connor11
Tourist
10 0 4

I've just added it again

0 Likes