Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme
WOW Shopify com IA

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

See Other Products

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" (",)


Struggling with instructions?

Don't worry, we've got you covered for a reasonable price.

Contact us through "Chat with us" for a quote.

Relax as we handle it for you!

Voltar para o blogue

4 comentários

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.




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


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

Deixe um comentário