Moving Product Title Above Product Image

Solved
Highlighted
Tourist
36 0 0

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!

0 Likes
Shopify Expert
2635 440 565

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 to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
36 0 0

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!

0 Likes
Highlighted

Success.

Shopify Expert
2635 440 565

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 to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
36 0 0

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!

0 Likes
Highlighted

Success.

Shopify Expert
2635 440 565

Add this css:

.mobile_hide{font-size:15px;}

Change size as you want 

Want to modify or custom changes on store hire me.
If helpful then please Like and Accept Solution.
Email: jasoliyabrijesh123@gmail.com
Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
0 Likes
Highlighted
Tourist
36 0 0

Great, thank you!

0 Likes
Highlighted

Best Shopify services providing company: Gtechwebindia.com 

0 Likes
Highlighted
New Member
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; ((((

 

0 Likes