How can I resize my cart product images to thumbnail size?

Technical Q&A
1

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
melaina_0-1625698091854.png3288×1675 270 KB

2

@melaina

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

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

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

3

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.

4

Hi @Kinjaldavra ,

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

Thanks!

Mel

5

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.

I sent you the password in a private message.

Thanks!

Melaina

6

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

7

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;
    }
    }
8

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;
}
}
9

@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;
}
10

In the Shopify version “Dawn” that I recently uploaded there is no file called “theme.css” to insert this code. I tried to insert it in “base.css”, but nothing changed. Would you let me know where this code should be inserted in this version?