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

Store Design
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. 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!

2

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

like bellow:

<h1 class="product-single__title **desk_hide**">{{ product.title }}</h1>
  1. Now copy it and paste just after ‘product-single__photos’ class and add mobile_hide in

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

3

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!

4

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

like bellow:

<h1 class="product-single__title **desk_hide**">{{ product.title }}</h1>
  1. Now copy it and paste just after ‘product-single__photos’ class and change change to mobile_hide in

    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>
  1. 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

1 Like
5

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!

6

Add this css:

.mobile_hide{font-size:15px;}

Change size as you want

1 Like
7

Great, thank you!

8

Best Shopify services providing company: Gtechwebindia.com

9

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

{{product.title}}

meu tema é banita

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

10

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

11

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

12

Send me your store url i will check

13

www.supascooper.com/products/supascooper

14

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.

15

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.

16

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

like bellow:

<h1 class="product-single__title **desk_hide**">{{ product.title }}</h1>
  1. Now copy it and paste just after ‘product-single__photos’ class and change change to mobile_hide in

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

17

Hi @Jasoliya ,

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

Screenshot.png
Screenshot.png1297×504 40.4 KB

Screenshot (1).png
Screenshot (1).png1363×754 68.6 KB

Screenshot2.png
Screenshot2.png678×736 27 KB

18

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.

19

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

1 Like
20

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