Solved

Moving Product Title Above Product Image [Mobile Only]

apesurvival
Visitor
1 0 1

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

move product title to above product images mobile only.jpg

Accepted Solution (1)

KetanKumar
Shopify Partner
36855 3637 11976

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing

View solution in original post

Replies 5 (5)

KetanKumar
Shopify Partner
36855 3637 11976

This is an 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;
}
}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
Njison
New Member
16 0 0

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
Explorer
58 0 12

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
Shopify Partner
7720 1502 1505

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 

- Helpful? Like and Accept solution or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

PageFly-Victor
Shopify Partner
7865 1785 3065

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.