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

Store Design
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