Move Product Title above Product Image

How do I move the product title and price to sit above the product image as per the attached example? 

I'd also like to align the top of the description with the top of the product image as illustrated. 

Thanks in advance!

Hi,

Can you share link to a product?

In general I don't think you're going to be able to do this with CSS alone because of the way the html is structured.

Assuming it can be done, it will take CSS and JavaScript to restructure the page. This may not be easy as the destination area was not designed by SS to have the data you want to move there.

3 hours ago, tuanphan said:

Hi,

Can you share link to a product?

https://tarpon-pineapple-9x9c.squarespace.com/shop/p/n-series-single-phase-123-kva-m5pda-3lcmm-ar2e9

PW: Energy2023

Quote

 

In general I don't think you're going to be able to do this with CSS alone because of the way the html is structured.

Assuming it can be done, it will take CSS and JavaScript to restructure the page. This may not be easy as the destination area was not designed by SS to have the data you want to move there.

 

This is not a solution but an observation.

This will be a bit tricky, assuming it can be done. As I surmised it will take CSS and JavaScript. The area involved is built on flex/row. With the gallery and product details getting about 50% each of the available total width.

I manually rebuilt the area using grid to test how the moved elements would layout.

Here we can see some of the layout issues that would have to be resolved.

The other thing I don't know is how SS is going to handle the After Pay being moved to another location.