Help! Product page images too big - Boundless

New Member
1 0 0

My problem is that compared to my images i've used for my featured products on my home page which are perfect size, when you click on the product the image on the product page takes up the whole screen!

How do I go about keeping the same size on the home page but only changing the size of the image on the product page?

The theme i'm using is called Boundless and the website is www.surely.co.nz

0 Likes
Shopify Staff
Shopify Staff
17 0 2

Hi Surely Team,

Guru Micah here to help!

Looking into the image sizes for your Boundless theme, this is something that is definitely possible to change but will require quite the amount of coding to do so. Now, with any paid Shopify Plan you do get sixty minutes of design time meaning our Themes Team will help with approved theme changes. With that being said, this is something that will take more than the sixty minute allotment that our themes team would be able to support. For this reason I would suggest looking into the recommendations I will list below:

First off being that you can look into hiring someone like a Shopify Expert or a developer who would be able to help implement this image sizing change you are after.

Our other option is to look into would be possibly switching your theme. Now I know this sounds like it will be like starting over completely but that is not true! Now that you have designed your Boundless theme the images you used are now saved, same with the menus along with all of the collections/products. Meaning that you will just have to go into the new theme and connect them to the themes sections to get your desired design. Now, if you were to switch your theme we have a lot to choose from here on the Shopify Theme Store. I recommend the Brooklyn theme as it is quite close to the look and feel of the Boundless theme but the main difference is that the product page is now looking how you requested. I’ll also include this Brooklyn Theme “Cheat Sheet” with tons of tips and tricks on this theme to help make the transition easier if you decide to take this route.

Let me know if you have any questions or need help with implementing any of these changes!

Micah Knight

Customer Success Guru | Shopify

0 Likes
Shopify Partner
6 0 1

I'm having the same issues. I love Shopify and I'm sticking with it but it seems to me that the Boundless theme could be simply beautiful with a few tweaks. First, the product images being larger than the computer screen is ridiculous. Second, if the newsletter signup was on every section of the website, this theme could generate sales, meaning more money for Shopify and satisfied customers. Finally, if the collection images are all different shapes and sizes, then the view of that collection looks unruly. For the last, I'm sure there's an app for that but honestly, why upgrade to a different theme unless you're bringing in sales. 

1 Like
Pathfinder
98 12 29

The Shopify Expert says it will take more than sixty minutes but I'm pretty sure you can achieve this in less than 1 minute.

 

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

 

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.

1 Like
New Member
1 0 0

Hi, 

 

I'm new to Shopify.  I am working with the Motion theme and I'm trying to add photos taken with a DSLR camera.  I have spent hours going over YouTube videos on how to make them fit into my page but they are just HUGE no matter what I do in Lightroom or Photoshop.  (If it's a picture of my model I only see a portion of her leg, not the whole image.)  Any advice would be greatly appreciated.

 

Thanks,

T

0 Likes
Pathfinder
98 12 29

crop all your images to 1201px width and 1800px height, always a good idea to start with the correct image sizes so that all your products on your collection pages look the same, as long as you have 1800px height you could have higher width as it should display centered, that would allow you to use the same image for wider format use as well, but to keep it simple I'd just make all your model images 1201px by 1800px

0 Likes
Tourist
6 0 2

Im sorry to annoy you but, is this modification able to further mods such a zoom if hovering mouse? If so, i'd like to know exactly where to paste that code because the theme.scss.liquid asset is crazy big, and I want to modify this asap. If you help me do this Im gonna pray to every god for you, cause its driving me nuts lol


@JTR wrote:

The Shopify Expert says it will take more than sixty minutes but I'm pretty sure you can achieve this in less than 1 minute.

 

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

 

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.




0 Likes
New Member
4 0 0

Did anybody found a solution for the large product images?

I have tried to code, but nothing happend


___________

 

0 Likes
Tourist
6 0 2

There is only one thing you can do and that is adding this css at the end of file
Online Store⇾ Themes⇾ Edit code⇾ Assets⇾ theme.scss.liquid

@media screen and (min-width: 680px) {
.grid__item {width: 45%; float: left; } .fastcheckout_buy_button.btn.btn--add-to-cart {min-width: 100%; }
  

 This is going to change EVERY SINGLE IMAGE ON YOUR PAGE to a standard size, and you won’t be able to resize them anymore. Someone from Shopify partners gave me that, and he said he could change it but it would take him 3 hours and cost me 15u$d, so I didn't do it.

Also, there is a guy in other post that says:

Go into theme file manager, select the folder "Assets" click "theme.scss.liquid" scroll to the bottom and add a note that says "Theme Changes" add ".product-single__photo {

max-width: 300px;

}"

That should make the image on the product page smaller, change the "px" to suit what you want, should mean that the image can shrink for smaller devices but can't go any larger than 300px.

But I could not make those changes.

I hope you find a solution or have the money to hire the expert, I just used another theme. Debut is underestimated to be honest.

 

0 Likes
New Member
4 0 0

Thanks for reply.

I found this to change the image:
It under the same asset file -->  theme.scss.liquid

shopify.png
if you change the widht from 100% to something else, the image gets smaller, but now I have the problem of having to much space between the image and the buy options :/

0 Likes