Product images problem

Solved
Nickahola
Excursionist
39 1 7

Hi.

Ive spent hours on this and I can't make it make sense. I've searched the forum but I'm none the wiser.

A supplier sent me their images but they exceed 20mp so I've ran them through bulk resize photos but theyre still coming out far too big. I've sized them at 1024 x 1024 but theyre coming out huge compared to other sites so i've made them 800 x 600 but then the quality of the image suffers.

I just don't know what image size without making the quality bad.

I've tried SEO image optimizer & sizer but that doesnt do a thing.

https://www.silverstork.co.uk/collections/east-coast/East-Coast

I also don't know the collection is broken down into 'east coast' twice - Id like to get rid of the lower case directory.

Thanks!

Replies 18 (18)
Ninthony
Shopify Partner
2247 339 900

Ok I added a max width to your product wrapper. You can find the style in your style.css file in your assets folder if you scroll to the very bottom. I set it at 1000px, just change it to whatever you'd like. Just preview the Ninthony Editing theme. Then if it looks good to you, publish whenever.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D
dmwwebartisan
Shopify Partner
9731 2224 3053

This is an accepted solution.

@Nickahola 

- Step 1: Go to Online store > Themes > Actions > Edit code.

- Step 2: Go to Assets > style.css and paste this at the bottom of the file.

@media only screen and (min-width:768px){
.product-photo-container>a {
    position: relative;
    display: block;
    width: 50% !important;
    margin: 0 auto;
}


.owl-carousel .owl-stage {
    max-width: 385px !important;
    width: 100% !important;
    margin: 0 auto;
}

}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →

View solution in original post

Nickahola
Excursionist
39 1 7

Thanks! It looks better already. That's a great help. I would never have figured it out!

Does this now apply to every product I have/will have in my store?

 

Nickahola
Excursionist
39 1 7

Thanks! Does this fix the height too?

Do I still need this code now Ninthony has fixed the width?

dmwwebartisan
Shopify Partner
9731 2224 3053

@Nickahola 

Please add provided css by me i will check again

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Nickahola
Excursionist
39 1 7

Hello. I have added your code and publushed the draft, it looks to me like it has fixed the problem. Thanks!

So this will apply to all products I upload in the future?

If I want to change the size at all, which values do I change in the code you provided?

Thank you again

Ninthony
Shopify Partner
2247 339 900

This is an accepted solution.

For myself, if you want to change the width of the container at all you just have to change the max-width property for the product-wrapper class in your style.css file toward the bottom of the file.

.product-wrapper {
  max-width: 1000px;
}


You'll just change the pixel value to be whatever you want. I can't speak on @dmwwebartisan 's edits

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D

View solution in original post

Nickahola
Excursionist
39 1 7

Thank you! It looks a lot better now than it did.

I will await the answer to the other piece of code too. Thanks!

Ninthony
Shopify Partner
2247 339 900

No problem, glad it helped.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish :D