Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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.
Hi @vmstore ,
Can you please share your website link?
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
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.
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?
Nevermind, I had someone from the review app help me with that. THanks again KAte
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.
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?
Hi Nasreen, did you figure out how to do it? we have the same issue.
Hi Vmstore,
We have exactly the same issue. Would it be possible fo you to share the code that you used to solve this?
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?
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.
Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024