Solved

Move title above product image on Mobile - Sense Theme

Mr_Pancake
Tourist
11 0 3

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 😄

Accepted Solution (1)

PageFly-Oliver
Astronaut
840 176 156

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 8 (8)

Moeed
Shopify Partner
3695 931 1163

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

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
Mr_Pancake
Tourist
11 0 3

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
Astronaut
840 176 156

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Mr_Pancake
Tourist
11 0 3

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
Astronaut
840 176 156

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

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Gil-Momo
Tourist
20 0 2

Hi Team,

Do you happen by chance if this is also applicable for the DAWN Theme?

Dan-From-Ryviu
Shopify Partner
7525 1450 1449

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

Screenshot 2023-06-01 at 15.10.33.png

- Helpful? Like or Accept solution!
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

FireflyBazaarTX
Tourist
5 0 1

I have Sense theme, and I'm trying to do the same thing - so my Product images are right on top of the Variant picker. I tried all the solutions on this page but none of them worked, please advise. Here's a page from my site: https://fireflybazaartx.com/products/custom-grownup-blankies-light