Dawn Theme Product Page Move Image To Left Side (Desktop)

[limelight91]

Hi, 

The industry standard seem  to be to have the product image on the left side, but dawn theme puts product images on the right side. Could someone tell me how to move the product images to the left side with thumbnails on the left?  THANK YOU!!

website is wearlimelight.com

[B3nC4u]

its looking like 3rd app to do that, i don't know any option with that on dawn

[ZenoPageBuilder]

Hello @limelight91 👋

Inside Shopify Admin, you can go to Edit theme code, open file base.css and add this code at the bottom

.product__media-wrapper.small-hide {
    order: -1;
    padding-right: 5rem;
}

The result

Hope it helps! 

[limelight91]

Hi Zeno, unfortunately this did not work for me. I also tried to add !important to the code. Maybe I have other code preventing this from working? 

[PageFly-Oliver · Accepted solution]

Hi @limelight91 ,

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file section-main-product.css

Step 3: Paste the below code at the bottom of the file -> Save

@media(min-width:767px){
.product.product--small.product--right.product--thumbnail_slider.product--mobile-show.grid.grid--1-col.grid--2-col-tablet{
flex-direction: row-reverse !important;
    column-gap: 8px !important;
}

}

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

[limelight91]

Oliver! This absolutely worked to move the image to the Left side! 

Is there any way to add more space between the photo and the description? 

I put a picture below to show how the image is too close to the text. 

Also, is there a way to move the thumbnails to the left of the photo? 

[limelight91]

i changed this code (added 2rem) and it moved the text over! i just need help to move the thumbnails.

.grid__item. -->

.grid__item {padding: 0rem 2rem}.

[limelight91]

Hi Oliver, in place of moving thumbnails to the left, do you know how to enlarge thumbnails to a larger size? I appreciate your help!

[PageFly-Oliver]

Hi,

Sorry for replying late. I checked and I see it worked fine

[limelight91]

Hi Oliver, Moving to the left worked, but I was trying to make the thumbnails larger if you know how to do that. 

[PageFly-Oliver]

You can try

@media screen and (min-width: 750px){
#MainContent .thumbnail-list {
grid-template-columns: repeat(2,1fr);
}
}

[Eliav54]

can you help me in impact theme?

[halleeb]

Never mind - I found the solution.

[MRamzan]

Display images of thumbnails to left side: