Cart Product Image Size Too Large

melaina
Tourist
7 0 3

Hi! Pretty new to Shopify and in the process of building out my website. 

I noticed when I added multiple items to the cart (desktop) the product images are taking up too much room.

Is there a way to constrain the width/height of the product image and it will scale to the appropriate size? Ideally, a thumbnail size would be best. I don't want to cart length too long.

I'd love to make checking out for our customers as easy and as little scrolling as possible. 

Any help would be greatly appreciated!

melaina_0-1625698091854.png

 

EyeR
Tourist
36 3 5

I'm not overly conversant with this system, but I'd anticipate options for crop/scaling when the image is placed into the system, and or where you adjust the image used.  Wordpress has done this for decade for free.

Worst case, use a free tool like 'ffmpeg' to create thumbnails from the images, and then upload the thumbnails for display, but leaving the <href=> tag pointing at the full sized image so should a user click it, they get a picture they can see details in.

 

 

 

KetanKumar
Shopify Partner
20470 2116 7719

@melaina 

Sorry you are facing this issue, it would be my pleasure to help you.

Welcome to the Shopify community!
Thanks for your good question.

Please share your site URL,
I will check out the issue and provide you a solution here.

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Natztech
Shopify Partner
1337 371 908

hello @melaina 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
melaina
Tourist
7 0 3

Hi @Natztech

 

My store isn't live yet so I will send you the password. 

lustrewear.myshopify.com

Thanks! 

Mel

0 Likes
melaina
Tourist
7 0 3

Hi @KetanKumar 

Thank you so much for your offer, I feel bad though as you are already offering to help with another issue on a different thread. 

lustrewear.myshopify.com

I sent you the password in a private message. 

Thanks!

Melaina

0 Likes
LitExtension
Shopify Partner
1207 154 215

Please send your site and if your site is password protected, please send me the password. I will check it for you

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
LitExtension
Shopify Partner
1207 154 215

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Asset > theme.scss.liquid and paste this at the bottom of the file:
@media screen and (min-width: 769px){
.cart-product-image {
width: 30% !important;
}
}

LitExtension - Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
Natztech
Shopify Partner
1337 371 908

hello @melaina 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 769px){
.template-cart .cart-product-image {
width: 30% !important;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com
If helpful then please Like and Accept as Solution

PageFly Advanced Page Builder- My favorite drag and drop page builder - Visit the Shopify app store
KetanKumar
Shopify Partner
20470 2116 7719

@melaina 

i can see proper image please add this top 2 checkout one hide

.grid--full.cart-header.medium-down--hide.js-cart-hide-on-empty {
    display: none;
}
If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes