Moving Product Title Above Product Image [Mobile Only]

[apesurvival]

Hi everyone!

I'm trying to move the product title above the product image for each product page on the mobile view.

As of right now it is below the product image and you have to scroll down to see it on the product page.

The theme in question is the Focal theme by Maestrooo.

Store URL is koalaoutdoor.com.au

Thanks in advance to all that can offer help!

See image below for example

[KetanKumar · Accepted solution]

@apesurvival 

yes, please try this code

1. Go to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste below code at the bottom of the file.

@media screen and (max-width: 740px){
.product.product--thumbnails-left {
    position: relative;
    padding-top: 80px;
}
h1.product-meta__title.heading.h3 {
    position: absolute;
    top: 0;
}
}

[Njison]

Hello. I’m using theme flex but my website isn’t published as yet. I would like to put my product title above the product image. Can you help me with the coding for this please ? 

see example here. 

[omero]

Hi!

for studio 10.0.0 the theme.scss.liquid doesn't exist, so where should we add this?

Thanks for solution,

Omer

[Dan-From-Ryviu]

Hi @apesurvival, you will need to know coding to make it by adding another product title code in your product page template then set it to appear on mobile one and original title will appear on PC only 

[PageFly-Victor]

Hello @apesurvival , This is PageFly - a Free Shopify Landing Page Builder.
Before using code to move the position of the product title, you can try an app builder to archive that easily. PageFly allow you to drag, drop or move all the elements in the editor. Moreover, you can design your own on mobile view, tablet view, desktop view separately. We are also available with free plan and support 24/7. 
Our guide to create a high conversion product page from PageFly Academy might be useful for you in this case. Let check it out. https://pagefly.link/fsZGtQSS

It would be a good choice for you to have professional sites that look incredible on mobile & desktop without any extra coding, and you will have lots more time focusing on marketing strategies, so you can consider checking PageFly with 24/7 support live chat.