Dawn Theme/ Change Photos layout in Product Page

Store Design
,
1

Hi there!

My url: andrejewelry.com

Password: Thankyouverymuch121

I would love to adjust the photos layout for desktop in the product page. Now it only allows stacked/ 2 columns / Thumbnails for photo layout. This is what I have now (2 columns layout):

Screenshot 2023-11-22 at 2.24.36 PM.png
Screenshot 2023-11-22 at 2.24.36 PM.png1604×1426 290 KB

But I only want 1 column like this (Example website: https://www.lemaire.fr/products/bathrobe-coat-heather-grey-fall-winter)

Screenshot 2023-11-22 at 2.31.07 PM.png
Screenshot 2023-11-22 at 2.31.07 PM.png2056×1374 244 KB

Thank you!

2

Hi @AndreaHuang , Go to base.css and add the following code :

ul#Slider-Gallery-template--21710986182970__main {
    flex-direction: column;
}
3

Hi @AndreaHuang

Check this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media screen and (min-width: 750px){
.product--columns .product__media-item:not(.product__media-item--single):not(:only-child) {
    max-width: 100% !important;
}
.grid--2-col-tablet .grid__item {
    width: 80% !important;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

4

Thanks for help!

I’ve tried to add the code in base.css but nothing happened.

5

It turns out I have to paste in the section-main-product.css

Thanks!

6

Oh, if not working in your base.css file so it means there is something wrong with the base.css. I check it.

Made4uoRibe_1-1700689411073.png

Remove the 2nds closing bracket on this image. It in your base.css.

the 3560 line.

Made4uoRibe_2-1700689482241.png

Your missing a curly bracket on the very last code.

Add some like this.

Made4uoRibe_3-1700689509922.png

Please do this or youll have some broken designs in your store. Thanks!

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

7

I did what you said and it works now. Thank you so so much!!