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

{% if youLike === true %} Hit Subscribe {% endif %}

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 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.

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

Deixe um comentário