Solved

How can I resize images for a better customer view?

KMichael
Excursionist
30 0 4

Hi,

 

The images I uploaded seem to be very large and don't fit on the screen. When viewing an item, customers must scroll down to see the complete image. I would like the images to be a smaller size but can't manually edit them all.

Any solutions?

 

Accepted Solutions (4)

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Go to Assets > base.css and paste this at the bottom of the file:

.global-media-settings img {
    width: auto !important;
    margin: auto;
    right: 0;
}
.global-media-settings {
    padding-top: 100% !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please add code:

.product-grid .card .media {
    background: #fff !important;
}
.product-grid .card__media .media img {
    height: 100% !important;
    width: auto !important;
    margin: auto;
    right: 0;
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please change code here:

Screenshot.png

Code:

.global-media-settings {
    padding-top: 50%!important;
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please go to base.css file and remove code here:

Screenshot.png

it will display fine

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!

View solution in original post

Replies 15 (15)

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Go to Assets > base.css and paste this at the bottom of the file:

.global-media-settings img {
    width: auto !important;
    margin: auto;
    right: 0;
}
.global-media-settings {
    padding-top: 100% !important;
}

Hope it helps!

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

Thank you for your help.

I would also need help with coding to resize the image when shown by "you may also like"

It only shows a fraction of the image there because the image was originally too large.

Could you help me with that?

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please add code:

.product-grid .card .media {
    background: #fff !important;
}
.product-grid .card__media .media img {
    height: 100% !important;
    width: auto !important;
    margin: auto;
    right: 0;
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

Thank you.

This has helped with images that were too long to be shown. But some images are too wide to be shown fully.  I am attaching an image of a loveseat. The image is chopped at the sides. What could be done to fix this?

KMichael_0-1663855410277.png

 

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please change code here:

Screenshot.png

Code:

.global-media-settings {
    padding-top: 50%!important;
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

it did help for most items, some items though still have the images not showing fully. 

How should I edit that code? 

KMichael_0-1664550682269.png

 

KMichael
Excursionist
30 0 4

 

Hi,
The image sizes are still not ideal.
Could you please try to help me figure it out?
Still, some photos are too wide to display completely.
Maybe we should make all of the images taller so that more of the width is visible?

LitCommerce
Astronaut
2860 684 742

Hi @KMichael,

Please add code:

.product-grid .card__inner {
        --ratio-percent: 50% !important;
}
LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

Hi,

It is still not working properly.

What else could be done to fit it to screen?

 

LitCommerce
Astronaut
2860 684 742

Hi @KMichael,

I checked and it shows fine, this is the section you checked?

Screenshot.png

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

Please check out this link.

https://yourfurn.com/collections/sofas

LitCommerce
Astronaut
2860 684 742

This is an accepted solution.

Hi @KMichael,

Please go to base.css file and remove code here:

Screenshot.png

it will display fine

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
KMichael
Excursionist
30 0 4

Much better. Many items show fully now. Is there any further solution for items like these?

https://yourfurn.com/collections/sectionals?page=4

LitCommerce
Astronaut
2860 684 742

Hi @KMichael,

It will be really hard for everyone, if you want to, all images will be affected. Refer:

Screenshot.png

LitCommerce - The Most Simple & Affordable Multi-channel Selling Tool.
Effortlessly sell on biggest marketplaces like Amazon, Etsy, eBay, Facebook etc with bulk listing tool, real-time sync & smart order management. Use LitCommerce free for 1-year now!
itsleonforshort
Excursionist
26 1 0

Hi LitComm! Does this apply to my own shopify too? How can I resize images freely and copy the size of the middle image from the Origin theme? Thank you..