Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Moving Product Title Above Product Image on Mobile

Solved

Moving Product Title Above Product Image on Mobile

vmstore
Excursionist
43 1 4

I searched for this on the forum but I couldn't find anything related to specifically using Dawn theme..

Basically I want to move my product title above the product image on mobile. It currently shows below the image, which can make it hard for the visitors to see the respected image that goes along with each product image as it creates more distant between the images itself and the options below.

Please help. 


@Jasoliya @KetanKumar @Musfirah @EcomRAZ @diego_ezfy 

Accepted Solution (1)
PageFly-Kate
Shopify Partner
1313 368 402

This is an accepted solution.

Hi @vmstore ,

 

This is Kate 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:

.product.grid {
    position: relative;
    padding-top: 100px;
}
.product.grid .product__title {
    position: absolute !important;
    top: 0;
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


View solution in original post

Replies 13 (13)

EcomRAZ
Shopify Partner
85 6 6

Hi @vmstore ,

 Can you please share your website link?

 

Shopify Store Developer || Certified Shopify Partner || Liquid and JavaScript || Figma/XD to Shopify || Shopify Plus || Shopify Speed Optimization
- If you find our reply helpful, please hit Like and Mark as a Solution || Book a Free Call NOW: ecom.raz23@gmail.com || Whatsapp: +923166892449
vmstore
Excursionist
43 1 4

Sure thing here it is my website product page 

GemPages
Shopify Partner
5625 1262 1254

Hi @vmstore,

 

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

 

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

 

GemPages - Build any high-converting store pages for any business


- If you find my reply helpful, please hit Like and Mark as Solution
- Get connected: App Store | Blog | Community | Help Center
vmstore
Excursionist
43 1 4

Yep no problem. Here it is my website product page 

PageFly-Kate
Shopify Partner
1313 368 402

This is an accepted solution.

Hi @vmstore ,

 

This is Kate 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:

.product.grid {
    position: relative;
    padding-top: 100px;
}
.product.grid .product__title {
    position: absolute !important;
    top: 0;
}

I hope it would help you
Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


vmstore
Excursionist
43 1 4

Thank you Kate.  One issue though.. While that worked, it left the vendor name and review stars below the image. Anyway I can move those to the top as well?

vmstore
Excursionist
43 1 4

Nevermind, I had someone from the review app help me with that. THanks again KAte

PageFly-Kate
Shopify Partner
1313 368 402

Hi @vmstore ,

 

You are welcome.
It's very pleasure to help you

Best regards,

Kate | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


Unlock the secrets to a record-breaking BFCM with PageFly and Canva


➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)


➜ Weekly updated Shopify tutorials on YouTube


All features are available from the Free plan. Live Chat Support is available 24/7.


Nasreen1
Visitor
3 0 0

Hi! I have the same problem as yours. I also want to move the product title and the product rating at the top of the product image but only on mobile. How did you solve it?

Gil-Momo
Excursionist
30 0 4

Hi Nasreen, did you figure out how to do it? we have the same issue.

Gil-Momo
Excursionist
30 0 4

Hi Vmstore,

We have exactly the same issue. Would it be possible fo you to share the code that you used to solve this?

Gil-Momo
Excursionist
30 0 4

Hi Kate, we are facing the same issue. We want to move the title, product, and some minor product descriptions above the product image only on mobile. Could you help us out?

Mer2
Visitor
3 0 0

You need to add the size of the screens you want apply this to (ex. @media screen  and (max-width ....)) otherwise it won't work.