What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Moving Product Title Above Product Image

Solved

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

mhalfya
Excursionist
37 0 2

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!

Accepted Solutions (2)
Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Jasoliya
Shopify Partner
4823 625 1225

This is an accepted solution.

Add this css:

.mobile_hide{font-size:15px;}

Change size as you want 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here

View solution in original post

Replies 58 (58)

Jasoliya
Shopify Partner
4823 625 1225

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; }
}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
mhalfya
Excursionist
37 0 2

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
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
mhalfya
Excursionist
37 0 2

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
Shopify Partner
4823 625 1225

This is an accepted solution.

Add this css:

.mobile_hide{font-size:15px;}

Change size as you want 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
mhalfya
Excursionist
37 0 2

Great, thank you!

Gtechservices
New Member
6 0 0

Best Shopify services providing company: Gtechwebindia.com 

stayfitindoors
Tourist
18 0 1

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

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
stayfitindoors
Tourist
18 0 1

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

Jasoliya
Shopify Partner
4823 625 1225

Send your store url.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
stayfitindoors
Tourist
18 0 1

stayfitindoors.ca

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
stayfitindoors
Tourist
18 0 1

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

captainknotts
Shopify Partner
21 1 3

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
Shopify Partner
4823 625 1225

Send your store url

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
stayfitindoors
Tourist
18 0 1

stayfitindoors.ca

SC9
Tourist
9 0 0

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
Shopify Partner
4823 625 1225

Send your store url, have you followed my step? 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
SC9
Tourist
9 0 0

Hi, thanks. 1strightrags.myshopify.com

Jasoliya
Shopify Partner
4823 625 1225

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; }
}

 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
SC9
Tourist
9 0 0

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
Shopify Partner
4823 625 1225

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.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
SC9
Tourist
9 0 0

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.

image0.pngexample for shopify.png

2020-07-31_8-23-38.png

 

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Vicente17
New Member
4 0 0

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

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Vicente17
New Member
4 0 0

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

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Vicente17
New Member
4 0 0

it is the debut theme

Vicente17
New Member
4 0 0

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

portedwheel99
Visitor
2 0 0

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
Shopify Partner
4823 625 1225

Send me your store url.

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Desmond4
Visitor
1 0 0

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
Shopify Partner
4823 625 1225

All theme have different code to place not same..

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
randyjikdo
Visitor
3 0 0

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

Im using debut theme.

Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
nudehaven
Tourist
39 0 1

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. Screenshot 2023-01-23 at 6.05.49 PM.png

michael156
Visitor
1 0 0

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
Shopify Partner
4823 625 1225

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}}

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MDcrown
New Member
6 0 0

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
Shopify Partner
4823 625 1225

Send me your store url  i will check

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MDcrown
New Member
6 0 0
Jasoliya
Shopify Partner
4823 625 1225

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. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MDcrown
New Member
6 0 0

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
Shopify Partner
4823 625 1225

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; }
}
Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
MDcrown
New Member
6 0 0

Hi @Jasoliya ,

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

Screenshot.png
Screenshot (1).pngScreenshot2.png

Jasoliya
Shopify Partner
4823 625 1225

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. 

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here
Jasoliya
Shopify Partner
4823 625 1225

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

Want custom changes? hire me.
3 months of Shopify for $1/month. Look here.
Email us Or WhatsApp, Try our Free app for product bundles and Codify Order Cancel or Order edit
Want to get Free review and advice for sale on store ?? just text me here