Dawn Theme/ Change Photos layout in Product Page

Store Design
,

Topic summary

A user seeks to modify the Dawn theme’s product page photo layout from the default options (stacked/2 columns/thumbnails) to a single-column display on desktop, similar to a reference website.

Initial Solutions Provided:

  • Two community members offered CSS code snippets to add to base.css, style.css, or theme.css files
  • Code targets product gallery grid items to force single-column layout using flexbox and width properties

Resolution Process:

  • User initially reported the base.css solution didn’t work
  • Discovered the code needed to be placed in section-main-product.css instead, which successfully resolved the issue
  • A helper identified syntax errors in the user’s base.css file (extra closing bracket at line 3560, missing curly bracket at end) that could cause broken designs

Outcome: Issue resolved after placing CSS in correct file location. User advised to fix base.css syntax errors to prevent future design problems.

Summarized with AI on November 14. AI used: claude-sonnet-4-5-20250929.
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!

1 Like
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!

1 Like
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!

1 Like
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!

1 Like
7

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