Adjusting product images

Solved
Dike
Excursionist
67 0 29

Hello everyone,

Almost all of my product images look very zoomed in before clicking on them, like this:

Screen Shot 2021-11-02 at 19.37.27.png
This is a bottle but it's hard to tell if you don't click on it.

How can I adjust my pictures to show the whole outlining?

Thank you so much!

Accepted Solutions (2)

Accepted Solutions
LitCommerce
Trailblazer
295 73 73

This is an accepted solution.

Hi @Dike,

You can change it to get the images you want.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

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
Trailblazer
295 73 73

This is an accepted solution.

Hi @Dike,

With width, please change code:

.card--product .media img{
    right: 0 !important;
    margin: auto;
    width: 70% !important;
}

Hope it is clear to you.

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 10 (10)
Dike
Excursionist
67 0 29

 Is this possible?

LitCommerce
Trailblazer
295 73 73

Hi @Dike,

Please go to Customize > Featured collection > PRODUCT CARD > Image ratio > Adapt to image. Refer https://i.imgur.com/Q0IL0bq.png 
You can resize it here.
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!
Dike
Excursionist
67 0 29

Thank you for your reply!

I've tried this but this makes the images look huge. Not all images are the same size so the row of images wont be linear either.

Example: 
If you have any idea on how to fix this, I would greatly appreciate it!

LitCommerce
Trailblazer
295 73 73

Hi @Dike,

Because your images have different size, it will be difficult to display well for all, you can add the following code, it will help to display better now.

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

.card--product .media {
    padding-bottom: 120% !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!
Dike
Excursionist
67 0 29

Thank you so much. This definitely helped portray the products more clearly!

But it also made the pictures too big, and too narrow. If this could be tweaked than I could maybe play with the numbers to get the perfect fitting.

LitCommerce
Trailblazer
295 73 73

This is an accepted solution.

Hi @Dike,

You can change it to get the images you want.

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

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

Dike
Excursionist
67 0 29

Hey LitCommerce,

I accepted this as a solution, thank you!

But I was hoping if you could tell me the code to add padding to the width instead of the bottom, as my pictures are longer than the width. I think this would solve it?

Thank you so much.

LitCommerce
Trailblazer
295 73 73

This is an accepted solution.

Hi @Dike,

With width, please change code:

.card--product .media img{
    right: 0 !important;
    margin: auto;
    width: 70% !important;
}

Hope it is clear to you.

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

Dike
Excursionist
67 0 29

Thank you once again. This helped tremendously!