Shopify themes, liquid, logos, and UX
How can I reposition the product title above product image on mobile view in Dawn theme?
provide the link of your store
/* Reposition the h1 product title above the image on mobile */
@media (max-width: 767px) {
.product-title {
display: block;
margin-bottom: 10px; /* Add spacing as needed */
}
/* Make sure the image appears below the title */
.product-image {
order: 2;
}
.product-title {
order: 1; /* Ensure title is displayed first */
}
}
Hey Ahmed. I tried adding that to the theme.liquid page but nothing changed. Any other ideas? Thanks!
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (max-width: 767){
.product{
padding-top: 202px !important;
}
.product .product__title {
position: absolute;
top: -602px;
}
}
</style>
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
Thanks for the assist. Unfortunately, it didn't seem to change anything. Any ideas?
2m ago Learn the essential skills to navigate the Shopify admin with confidence. T...
By Shopify Feb 12, 2025Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025