How can I reposition product title above product image on mobile view?

[mhalfya]

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. I'm also hoping to make the product title a smaller font for the mobile view.

I'm currently using the Debut theme.

Any suggestions would be greatly appreciated!

Thanks!

[Jasoliya · Accepted solution]

Open Section->product-template.liquid file and find bellow code:

<h1 class="product-single__title">{{ product.title }}</h1>

and add class desk_hide in this <h1> like bellow:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

2. Now copy it and paste just after 'product-single__photos' class and change change to mobile_hide in <h1> like bellow:

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

3. add this css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
   .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
  .desk_hide{display:none; }
}

 Let me know if it work or send me store url

[Jasoliya]

Hi @mhalfya 

Open Section->product-template.liquid file and find bellow code:

<h1 class="product-single__title">{{ product.title }}</h1>

and add class mobile_hide in this <h1> like bellow:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

2. Now copy it and paste just after 'product-single__photos' class and add mobile_hide in <h1> like bellow:

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

3. add thic s css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
  .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
   .desk_hide{display:none; }
}

[mhalfya]

Hi Jasoliya,

Thank you so much for the response!

I followed the instructions you gave me, however I seemed to end up with two product titles on my mobile view (one above the product image and one below) and the product title on the desktop view disappeared. I believe I did everything you told me to do correctly.

Please let me know if you have any other suggestions!

Thank you!

[Jasoliya · Accepted solution]

Open Section->product-template.liquid file and find bellow code:

<h1 class="product-single__title">{{ product.title }}</h1>

and add class desk_hide in this <h1> like bellow:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

2. Now copy it and paste just after 'product-single__photos' class and change change to mobile_hide in <h1> like bellow:

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

3. add this css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
   .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
  .desk_hide{display:none; }
}

 Let me know if it work or send me store url

[mhalfya]

Thanks Jasoliya, that worked perfectly!

Would you also happen to know how to change the font size of the product title for mobile? 

Thanks again!

[Jasoliya · Accepted solution]

Add this css:

.mobile_hide{font-size:15px;}

Change size as you want 

[mhalfya]

Great, thank you!

[Gtechservices]

Best Shopify services providing company: Gtechwebindia.com 

[stayfitindoors]

Hey, I tried this method and it ended up deleting the product title on the mobile version. Can you please help?

[Jasoliya]

If you use proper code then it will work fine, just keep my added class in both title. 

[stayfitindoors]

Hey, I fixed it for the mobile view but the desktop view is messed up. Can you please help?

[Jasoliya]

Send your store url.

[stayfitindoors]

stayfitindoors.ca

[Jasoliya]

As i can see you have not added any of my given code yet. 

[stayfitindoors]

I did and then it put the titles in the middle of the product pictures, therefore i removed it for the moment

[captainknotts]

Thanks for the info, but is there a way to enter the title and add loox reviews right under the title that is also centered? 

[Jasoliya]

Send your store url

[stayfitindoors]

stayfitindoors.ca

[SC9]

Hi, Shopify support gave me this link. I'm using Brooklyn theme and want to do the same thing: put the product title on product pages above the images. I tried to do it but the code seems different and I could not.

I only need to do it for mobile but I don't mind doing it for everything. Could you help me please? I'd really appreciate it.

Thanks

[Jasoliya]

Send your store url, have you followed my step? 

[SC9]

Hi, thanks. 1strightrags.myshopify.com

[Jasoliya]

Open Section->product-template.liquid file and find bellow code:

<h1 class="product-single__title">{{ product.title }}</h1>

and add class mobile_hide in this <h1> like bellow:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

2. Now copy it and paste just after 'grid__item large--seven-twelfths medium--seven-twelfths text-center' class and add mobile_hide in <h1> like bellow:

<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

3. add thic s css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
  .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
   .desk_hide{display:none; }
}

[SC9]

Thank you, but when I copy and search for this I can't find it: <h1 class="product-single__title">{{ product.title }}</h1>

If I search for just "<h1 class" to bring up anything close, all I find is this: <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

I tried to upload a screenshot to show you but I can't figure out how.

[Jasoliya]

You have to find this code:

<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">

and then move title code to next this line.

[SC9]

Thank you, Jasoliya! I think it's almost there and I really appreciate your help.

Please look at the phone screenshot below. The title is above now but also still below, and the top of the image is cutting off the bottom of the title.

I put the H1 mobile code where you said (please see second image), but I did not find this code to add "desk_hide" to: <h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

The closest I found was this code, which I didn't modify (also in the third image): <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>

I also added the code for CSS in your instructions to theme.scss.liquid.

Could you please help me remove the old title and add some spacing between the title and image?

Thanks again.

[Jasoliya]

PM me in this way cant solve this issue. need to check in code

[Vicente17]

Hello , I was trying to follow your instructions but I could do it, it is the same problem, could you help me please

[Jasoliya]

If you are using shopify debut theme then it must work, let me know what issue getting. 

[Vicente17]

I cant find the product-single_photos i the code, even if I found it I dont understand very well the instructions

[Jasoliya]

Which theme  you gave? this code only work for debut theme not custom theme.

[Vicente17]

it is the debut theme

[Vicente17]

but I changed some setings like that image is linked to variant selected maybe that changed it

[portedwheel99]

I can't find:

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">

 Can you give some guidance on how to find it. Text search can't find it and I'm definitely looking in the correct file. Thank you. 

[Jasoliya]

Send me your store url.

[Desmond4]

Hey! How would someone do this with the Venture theme? I can't find the h1 tag in the product photos class, the code is a bit different than the default theme

[Jasoliya]

All theme have different code to place not same..

[randyjikdo]

i need this too in my store.my url is jikdo.com.

Im using debut theme.

[Jasoliya]

If you have debut theme then you can follow my instruction it must work. 

[nudehaven]

Hi! Im trying to do same thing where price and name are above the the picture and in the same column. and also be able to adjust the font size on both mobile and computer on product page.  I have the dawn theme on Shopify. here's a pic for reference. 

[michael156]

bom Dia tudo bom? espero que sim! E quando meu tema não tem essa opção? 

<h1 class = "product-single__title" > {{product.title}} </h1>

meu tema é banita

E não consigo encontrar-lo no lugar.
mesmo clicando em todos os códigos, um por um; ((((

[Jasoliya]

In which file you are finding? 

Check in Template->product.liquid Or Section->product-template.liquid or Snippet->product.liquid file

Find this :  {{product.title}}

[MDcrown]

Hey Jasoliya,

I have also tried to edit the code so my title and price are above the pictures, but it didn´t work.

Could you probably help me?

Regards and thanks 

[Jasoliya]

Send me your store url  i will check

[MDcrown]

www.supascooper.com/products/supascooper

[Jasoliya]

Hi as i can see on code i cant fond my given code on page where you added. just follow my post it must work or let me know if not. 

[MDcrown]

Hi Jasoliya,

thanks for your fast response.

Heres the link where I have tried to implement it: https://www.supascooper.com/?_ab=0&_fd=0&_sc=1

For me, it still won't work. 

[Jasoliya]

Hi @MDcrown 

A i told you have not added my given code then how it work. follow my post and add title for only mobile then ad css it work fine, but you have not added title for mobile the n how it show on page.

Follow this:

Open Section->product-template.liquid file and find bellow code:

<h1 class="product-single__title">{{ product.title }}</h1>

and add class desk_hide in this <h1> like bellow:

<h1 class="product-single__title desk_hide">{{ product.title }}</h1>

2. Now copy it and paste just after 'product-single__photos' class and change change to mobile_hide in <h1> like bellow:

<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
<h1 class="product-single__title mobile_hide">{{ product.title }}</h1>

3. add this css in asset->theme.scss file at bottom:

@media only screen and (min-width: 767px) {
   .mobile_hide{display:none; }
}
@media only screen and (max-width: 767px) {
  .desk_hide{display:none; }
}

[MDcrown]

Hi @Jasoliya ,

below you can see a screenshot of how I implemented your codes. Have I done anything wrong?

[Jasoliya]

Its looking ok from this image but cant say exact if code goes in any condition on page? 

So pm me i will check in theme code and try to solve it. 

[Jasoliya]

HI @MDcrown 

Check now, for review you have to move this code:

<a class="mobile_hide" href="#looxReviews"><div class="loox-rating" data-id="{{ product.id }}" data-rating="{{ product.metafields.loox.avg_rating }}" data-raters="{{ product.metafields.loox.num_reviews }}" style="margin-bottom:15px"></div></a>

Also add mobile_hide class with review.

Note: This code is for loox review app only