Hello, I hope someone can help me. I have Supply and my main product image is too small. I went through all the code but couldn't make a change. I did look for an answer in the forum but nope. I generally upload at 1500x1500 72dpi or 1024x1024 72dpi. The zoom feature is marked but not working either :) Thanks in advance for help
This is May from Shopify.
Thank you for taking the time to post your question here. I can see how confusing it is when it comes to sizing your images, because not only you have to upload the correct image size, but you also have to factor in the layout of the theme. In this case, the layout of the theme does not allow you to display larger image, since the image has reached the theme’s maximum width. So, in order to fix this, you will need to resize the layout of the theme.
I am not an expert in coding, but I understand it enough to make minor changes like this. ? So, I did some digging, peeked at the source code, and found that the product page on Supply theme is divided into two sections with predetermined width sizes. They are the product images section with 40% width and product description section with 60% width. Please see the image below for a visual explanation.
This means that no matter image size you upload, if the width is predetermined to 40%, your image can’t get bigger than that. If you want larger images, you can increase the layout from 40% to 50% or 60%. However, if you change the image layout to be 60%, that means your product description section will have to be smaller, or else your description will appear below the images, which is not ideal.
If you still want to make this change, you will need to edit your theme code. Before making any changes to your code, I highly recommend making a duplicate of your theme, in case of any unintended results. After you’ve done so, feel free to follow the steps below!
From your admin, go to ‘Online Store > Actions > Edit code’.
In your ‘Sections’ folder, select ‘product-template.liquid’.
In that file, search for ‘large--two-fifths’. If you are using a Mac, press Command + F to search or press Control + F if you are using Windows. This is your product images section.
Before the closing bracket, add ‘style=”width:60%”’. You can change the percentage depending on how you want your site to look.
Then, search for 'large--three-fifths'.
Before the closing bracket, add ‘style=”width:40%”’.
After saving, you should see that your product image is larger, and your product description section is more narrow. For future reference, if you would like to change your product page layout back to what you had before, you can always roll back to an older version of your theme. If you are not comfortable with making this change, I highly suggest reaching out to our Shopify Experts. Alternatively, since you are using a theme made by Shopify, our theme support may be able to look into making the change as well if your account is eligible!
Let me know if this helps. Feel free to reply back to this thread or contact our 24/7 support, and we’ll happily help!
May | Social Care @ Shopify
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution
- To learn more visit the Shopify Help Center or the Shopify Blog