Move title above product image on Mobile - Sense Theme

[Mr_Pancake]

Hello All,

I'm trying to move title of my product above images for mobile devices, on product pages. 

Store: https://ruff-toys.com/

Theme used : Sense

Thank you 😄

[Moeed]

Hey @Mr_Pancake 

To move the title of your product above the images for mobile devices on product pages in your Shopify store using the Sense theme, you will need to modify the theme's code. Please note that making changes to your theme's code requires some technical knowledge, and it's always recommended to create a backup of your theme before making any changes.

Here's a general guide to help you achieve this:

1. From your Shopify admin, go to "Online Store" and select "Themes."
2. Locate the Sense theme and click on "Actions" > "Edit Code."
3. In the code editor, find the file called product-template.liquid or product.liquid. This file controls the layout of the product pages.
4. Look for the code that displays the product title. It may look something like this:

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

1. To move the title above the images, cut the above code and paste it before the code that renders the product images.

2. Save the changes and preview your store to see if the title has moved above the images on mobile devices. Remember to test it on different mobile devices to ensure it looks as intended.

If you encounter any issues or need more specific instructions, it's recommended to consult the theme's documentation or reach out to the theme developer for further assistance.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Mr_Pancake]

That works good but this solution is for all devices. Any way I would be able to do it for ONLY MOBILE devices? This approach is affecting desktop as well, which I really don't want to. 

[PageFly-Oliver · Accepted solution]

Hi @Mr_Pancake

To move the title of your product above the images for mobile devices on product pages in your Shopify store using the Sense theme, you will need to modify the theme's code. Please note that making changes to your theme's code requires some technical knowledge, and it's always recommended to create a backup of your theme before making any changes.

Here's a general guide to help you achieve this:

1. From your Shopify admin, go to "Online Store" and select "Themes."
2. Locate the Sense theme and click on "Actions" > "Edit Code."
3. In the code editor, find the file called product-template.liquid or product.liquid. This file controls the layout of the product pages.
4. Look for the code that displays the product title. It may look something like this;

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

then you can edit it to

<h1 id="dektopProductTitle"  class="product-title">{{ product.title }}</h1>
then you can edit it to

1. To move the title above the images, copy the code below and paste it before the code that renders the product images.

<h1 id="mobileProductTitle"  class="product-title">{{ product.title }}</h1>
then you can edit it to

 Go to Online Store->Theme->Edit code.

Search file base.css

Paste the below code at the bottom of this file ⇒ save

@media(min-width:767px){
#dektopProductTitle{
display:block;
}
#mobileProductTitle{
display:none;
}
}
@media(max-width:767px){
#dektopProductTitle{
display:none;
}
#mobileProductTitle{
display:block;
}
}

Hope my solution works perfectly for you.

Cheers!

Oliver | PageFly

[Mr_Pancake]

Beautiful! Worked like a charm. Thank you 😄
The only thing I did was changed px sizes for last code, just to be consistent with my other codes. Hopefully that is alright haha

 @media(min-width:750px){
#dektopProductTitle{
display:block;
}
#mobileProductTitle{
display:none;
}
}
@media(max-width:749px){
#dektopProductTitle{
display:none;
}
#mobileProductTitle{
display:block;
}
}

[PageFly-Oliver]

You are welcome. I'm glad when I can help you 😍

[Dan-From-Ryviu]

You can do that by adding this CSS code at the bottom of your base.css file 

@media only screen and (max-width: 749px) {
.product__media-wrapper { margin-top: 100px; }
.prod { position: relative; }
.product__title { postion: absolute; top: 0px; }
}