Modify Main & Thumbnail Product Images on Dawn Theme Page

Modify Main & Thumbnail Product Images on Dawn Theme Page

I am not sure why the images are quite big in the Dawn Theme but do not worry. It is just an easy fix. 

Note: You cannot just edit the the images since you will end up having a big space on the right side.  The product info width has to be adjusted too.

  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

 

Let me know if you have questions. You can easily contact me at the "chat with us" (",)

4 comments

Awesome videos. I have implemented 2 videos and they both work! TYVM. I’m unemployed at the moment so I have to do all my website work. Your videos are helping me a lot. Thanks again. I subscribed to your channel :) Have a great day.

Mika •

Jazaki’Allah

Shajar •

Hi @Ayesha. Sorry to hear Let me see your website. You can reach me at Chat with us too

Made4uo •

Hi pathfinder, thanks for your very comprehensive tutorial for adding thumbnail sliders to the dawn theme. I followed this carefully but seem to have goofed up and made the amateur mistake of not working on a backup file. Is there anyway you could help me with this pleaseeeeeeeeeee!?

Ayesha Siddiqi •

Leave a comment