Shopify Dawn theme, Reduce main product image size?

made4Uo
Trailblazer
262 10 58

Hi, 

You cannot just reduce the images width since you will end up with a wide space on the right. You have to edit the product info container as well. Follow the steps below. Check the video. Let me know if you are having issues

  1. Go to your Online store > Themes > Actions > Edit code
  2. Go to Asset folder and open the section-main-product.css file. 
  3. Find the code below
 @media screen and (min-width: 990px) {
.product:not(.product--no-media):not(.featured-product) .product__media-wrapper {
max-width: 64%;
width: calc(64% - 1rem / 2);
}

 

    4. Change the max-width to 50%

    5. Next, find the other code for the product info, see below

  .product:not(.product--no-media):not(.featured-product) .product__info-wrapper {
padding-left: 4rem;
max-width: 36%;
width: calc(36% - 1rem / 2);
}

    6. Change the padding-left to 5rem, max-width to 50%, then click SAVE

 

 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Fashionprincess
Tourist
13 0 1

Thank you for this.  I was able to go in and edit the code with the help of your video and instructions down to 45%.  My issue is that the subsequent images (which are actually supposed to be thumbnails) are huge.  So I have one main product image, and beneath it 2 images, and beneath that, 2 images.  I have about 4 rows of product shots when I should have only 2.

 

How can I reduce that additional product images?  Looks good in Debut, not so good in Dawn.

0 Likes
made4Uo
Trailblazer
262 10 58

Hi @Fashionprincess 

 

May I see you website?

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Fashionprincess
Tourist
13 0 1

Here is a screenshot of what I am talking about...

0 Likes
made4Uo
Trailblazer
262 10 58

Hi @Fashionprincess ,

This one is not for debut though. It only works with Dawn theme. It is hard to tell with the pictures since I cannot inspect it with the dev tools. 

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Fashionprincess
Tourist
13 0 1

What I sent you is a screenshot from Dawn.  Do you see how those two images beneath the main product image are so big?  There are only 2 on a line, when ideally we want to shrink that down by 50% so there are 4 on a line...How can I do that?

0 Likes
made4Uo
Trailblazer
262 10 58

@Fashionprincess Have you think of creating a slider for the other images instead

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes
Fashionprincess
Tourist
13 0 1

I think creating a slider would complicate things too much.  I prefer to just shrink down the additional image sizes...but need help figuring out how!

0 Likes
Fashionprincess
Tourist
13 0 1

Do you know how to do it in the code the way you set out the instructions for the main image?  to shrink it down for 64% to 50%?  That was super easy...

0 Likes
made4Uo
Trailblazer
262 10 58

@Fashionprincess 

Since you watch the video, you will able to do it by yourself. Same steps but different code we are going to paste. Open the dev tools again and look for the second <li> (box in red on the left) and you will see the width calc code(box in red on the right). see below. 

Note: Yellow box is the large image. We are editing the small images the red box

Capture.JPG

 

The number of images in a row depends on the images width. I have 25% and 4 at the end on the code. That should work but I recommend to play with it
 
I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
0 Likes