Dawn Theme - How can I move the price & product title above the product image on mobile?

Store Design

Topic summary

A user wants to reposition the product title and price above the product image on mobile devices in the Dawn theme.

Initial Solution:

  • PageFly-Richard provided CSS code targeting the featured product section
  • Code uses absolute positioning to move title and price elements above the image on screens under 749px width
  • This solution successfully worked for the featured product on the homepage

Remaining Issue:

  • The CSS fix doesn’t apply to individual product pages themselves
  • A follow-up solution was provided with modified CSS targeting .product.product--large classes specifically for product pages

Technical Approach:
Both solutions involve editing section-main-product.css in the theme’s Asset folder and adding media queries with absolute positioning rules. The conversation appears ongoing as the second solution’s effectiveness hasn’t been confirmed yet.

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

Unsure how to do this on the Dawn theme, but I’m seeking the price & product title to move to above the image.

shanagarryceo_0-1676497578837.png
shanagarryceo_0-1676497578837.png752×1216 458 KB

2

Hi @shanagarryceo ,

It’s the GemPages Support Team and we are glad to assist you today!

Could you please share your store URL ( with the password if your store password is enabled ) then I can see and suggest something for you?

Best regards,
GemPages Support Team

3

Hi @shanagarryceo ,

This is Richard from PageFly - Landing page builder, I’d like to suggest this idea:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
	 .featured-product {
		 position: relative;
		 padding-top: 120px;
	}
	 .featured-product .product__title {
		 position: absolute;
		 top: 0;
	}
	 .featured-product .price {
		 position: absolute;
		 top: 78px;
	}
}

I hope it would help you
Best regards,

Richard | PageFly

4

Hi Richard,

This was a partial success, it has worked on the home page as the “featured product” as shown below

shanagarryceo_0-1676662724773.png
shanagarryceo_0-1676662724773.png752×1216 250 KB

However it is still not working on the product page itself, is there a solution to this?

shanagarryceo_1-1676662767768.png
shanagarryceo_1-1676662767768.png752×1216 226 KB

5

Hi @shanagarryceo ,

Sure, I’m happy to help you. Let’s try this solution:
Step 1: Go to Online Store->Theme->Edit code
Step 2: Asset->/section-main-product.css->paste below code at the bottom of the file:

@media screen and (max-width: 749px) {
    .product.product--large {
		 position: relative;
		 padding-top: 120px;
	}
	 .product.product--large .product__title {
		 position: absolute;
		 top: 0;
	}
	 .product.product--large .price {
		 position: absolute;
		 top: 78px;
	}
}

I hope it would help you
Best regards,

Richard | PageFly