How can I modify the Dawn theme for product title placement and image size?

Store Design
1

  1. How to bring the product title to the top of the product page and followed by the product images for mobile inside the Dawn theme?

  2. How to reduce the product image size (even smaller than default media size-small)

Gauresh_0-1682315332944.png
Gauresh_0-1682315332944.png1918×926 163 KB

Gauresh_1-1682315427192.png
Gauresh_1-1682315427192.png1917×930 234 KB

2

Hi Gauresh,
I am Sandeep and I am trying to help you.
To move the product title to the top and reduce the size of the image you have to write some code.
If you need help then let me know i will do it for you.

Regards
Sandeep

3

Hi @Gauresh_1 , you can do that by adding code on your store admin > Sale channels > Online store > Themes > Edit code > Assets > open base.css and add those code at the bottom

1. Move title to the top on mobile

@media screen and (max-width: 749px) {
.product { position: relative; }
.product .product__title { positon: absolute; top: 0px; }
.product .product__media-wrapper { padding-top: 150px; }
}
  1. Reduct product image size
.product-media-container .product__modal-opener { padding: 40px; }
4

Hi Dan,

Thanks for sharing this. I tried it - it creates a blank space but the title won’t appear in that space.

Screenshot attached.

    1. Reduct product image size

The product size also won’t change after using the code.

~Gauresh