Move title above images on product pages [all free themes]
Before presenting your product's images, you may want to let your customer know what it actually is that they are looking at. On desktop, customers can read the title and look at the images at the same time, however, on most mobile devices, the title will be seen only after some scrolling is done.
If you'd like to move your product's title above the images on mobile devices, you are at the right place: with just a bit of simple coding you can achieve that. Let's begin!
Making a backup of your theme
Before diving into the tutorial make sure you download the theme, so in case you face any issues you can easily revert back.
Adding the code to the theme
- In your Shopify admin, go to Online Store > Themes > Actions > Edit Code.
- Search for this file:
main-product.liquid
- Now, within the main-product.liquid file, press CTRL + F (or command + F on Mac) to open the search menu
- Search for the following text: product__media-wrapper
- Copy the code below and paste it below the line you found.
- It should look like this:
Conclusion
The way it works is essentially by duplicating the title and managing its visibility via CSS. It is also SEO friendly since this particular approach makes use of “display: none;”. Google crawlers ignore all elements that are set to “display: none;”, therefore it won't consider that your product page has a duplicated title.
You may also like
Here are some other tutorials you may be interested in. They work with “Dawn” plus all Shopify's free themes (Craft, Refresh, Colorblock, Taste, Ride, Studio, Crave, Origin, Spotlight, Publisher & Sense):
– Arrows & vertical thumbnails for Dawn's product pages
– Dawn lightbox: responsive images, slider and arrows 
– Improve your website's safety: block right click, image copying and more
Was this article helpful?
