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

dashskinjoel
New Member
5 0 0

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. 

Screenshot 2023-11-14 152214 copy.jpg

 

Replies 10 (10)
Spac-es
Shopify Partner
159 36 52

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

 

Captura de pantalla 2023-11-14 232414.png

 

dashskinjoel
New Member
5 0 0

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
Shopify Partner
159 36 52

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
New Member
5 0 0

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

Spac-es
Shopify Partner
159 36 52

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.

 

Captura de pantalla 2023-11-15 172411.png

 

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

dashskinjoel
New Member
5 0 0

This is definitely not the solution. But thanks though

Spac-es
Shopify Partner
159 36 52

Captura de pantalla 2023-11-15 182218.png

 

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
Shopify Partner
3653 804 1449

 

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>

PageFlyRichard_0-1700008119395.png

 

Hope this can help you solve the issue 

 

Best regards,

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

dashskinjoel
New Member
5 0 0

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. 
Screenshot 2023-11-15 101359.png

PageFly-Richard
Shopify Partner
3653 804 1449

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.

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.