How can I modify the product title above the image on mobile?

Store Design

Topic summary

A user asked how to reposition the product title above the product image on mobile devices for their Dawn theme.

Solutions Provided:

Two working solutions were offered:

  • CSS approach: Add custom CSS code to base.css file targeting mobile screens (max-width: 600px) to adjust .product__title positioning with absolute positioning and modify .product__media-wrapper margins

  • theme.liquid approach: Insert code snippet into theme.liquid file above the </head> tag via Online Stores > Themes > Actions > Edit code

Resolution:

The user confirmed the solution worked successfully.

Summarized with AI on November 22. AI used: claude-sonnet-4-5-20250929.
1

Hello,

Is there a way to change the product title on top of the product picture? This is for the product page on mobile, the theme is Dawn. Thanks.

5B6D78B8-3AD7-4C9B-9C5E-A7C009222D32.jpeg
5B6D78B8-3AD7-4C9B-9C5E-A7C009222D32.jpeg1125×2258 174 KB

2

Hi, you can try to add this code to Online store > Themes > Edit code > Assets > base.css

@media only screen and (max-width: 600px) {
.product.grid { position: relative; }
.product__media-wrapper { margin-top: 100px; }
.product .product__title { position: absolute; top: 0px; }
}
1 Like
3

Hi @habana89s

This is Victor from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

Hope this can help you solve the issue

Best regards,

Victor | PageFly

4

It worked! Thanks

5

Thanks!