How to move Product Title to the top of the Product image for Athens Theme ?

[dashskinjoel]

Hi guys i am trying to edit our Athens Theme website  so that our product title can be shown first when on the product page instead of it being below the product image. 

[Spac-es]

I have accessed your store and the title appears above on both mobile devices and PC. The problem is solved, right?

[dashskinjoel]

Hi there what you sent over is our old website (magento platform) that is now pro.dashskin.com for our commercial dealers. The problem resides with our current dashskin.com site that is on shopify. 

[Spac-es]

I understand! This new page looks much better. However, to implement what you say requires extensive code manipulation. It is not as simple as adding a style, the way the website is structured I can think of a possible solution, if you understand code I can give it to you, if not you understand a lot of code I can do it without problem. (Of course, I wouldn't do it for free.)

[dashskinjoel]

I do have some understanding of code. Would u be able to share? 

[Spac-es]

Add a copy of the title section just above the general section. Show it when the screen width is at most 989px and hide the main title section.

It is the best solution in this case.

If you liked the idea and it worked for you, mark this answer as a solution, greetings!

[dashskinjoel]

This is definitely not the solution. But thanks though

[Spac-es]

The way the design of the product page is made, the only possible solution is the one I told you about. Currently 2 columns are used to represent all the information, on mobile devices they are stacked on top of each other, you can't add a CSS style and have the title magically rise to the top...

You need to add additional HTML or restructure the entire design.

[PageFly-Richard]

Hi @dashskinjoel 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

<script>
const isMobile = window.innerWidth <= 767; // Adjust the threshold based on your design
if (isMobile) {
  const pfInterval = setInterval(() => {
    const block = document.querySelector('.product.product-page');
    const productTitle = document.querySelector('h1.product-info-heading.h2');
    if (block && productTitle) {
      clearInterval(pfInterval);
      block.prepend(productTitle);
    }
  }, 100);

  setTimeout(() => {
    clearInterval(pfInterval);
  }, 15000);
}

</script>

Hope this can help you solve the issue 

Best regards,

Richard | PageFly

[dashskinjoel]

It worked on Athens Version 1 which was our backed up copy site to test but not on our current Athens V2. But anyways after plugging it in to test it worked for the mobile nicely but it moved it down to the bottom for desktop version. So this wont work for us, unless there is a way for it to just work only for mobile but leave the desktop title alone. 

[PageFly-Richard]

To make it work with other theme, please share with your the url to your correct theme and i will make the code work properly.