How to move product description & price ABOVE an image

Site URL: https://www.artofmachine.com/shop-online?category=Jaguar

Hi All,

I'd like my product title and price to appear above the product image (example page in the link).

This is not an option on my template (Brine).

I do not want to overlay the title and cost over the image as it take away my ''secondary hover picture flick''.

Any help is appreciated. 

Add to Home > Design > Custom CSS

.view-list .ProductList-item {
    display: flex;
    flex-direction: column-reverse;
}
section.ProductList-overlay {
    margin-bottom: 10px;
}

I am looking to rearrange the product details pages so that the price and description are above the product image gallery and not below. Can anyone remedy this?

@leeplusmy3 Please give us the URL to one of your product pages.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Hi Thomas..thank you for replying.. here is the url: https://www.fromtheheartofojai.com/shop/p/lotions

Password: swpw

On mobile devices this page turns into a list..we would like for the product price & description to be before the product gallery..

Also could you take a look at this page: https://www.fromtheheartofojai.com/shop/p/seasponges-loofahs

We are trying to figure out why the "&" symbol turns up as "&" on DESKTOP. Thank you for all your help!

On 10/17/2020 at 11:04 AM, leeplusmy3 said:

We are trying to figure out why the "&" symbol turns up as "&" on DESKTOP.

This looks like a bug in SS to me.

As we can see the & has been encoded weirdly. It looks like they have & stored and then encoded the & once again.

With a little Javascript we can fix those up as a workaround.

Please see Store Page Improperly Encoded Ampersand Fix.

Let us know how it goes.

That worked! see attached photo..thank you!!

Please let me know if it's possible to have the product price & description placed above the product gallery on the mobile setting..again, on mobile, the product pages display as a list with the gallery first & the price/description below it..I attached a photo.

It is fine that the "additional info" section is below the gallery..

6 hours ago, leeplusmy3 said:

On mobile devices this page turns into a list..we would like for the product price & description to be before the product gallery.

My initial thought is this one is not easily solved with a few lines of CSS or Javascript. The issue is that the structure of the page doesn't lend itself to a few simple changes.

Can it be done? I think yes but not easily.

That gives us hope..we'd really like for this to be done. Are you meaning that this is how squarespace has the page hardwired for mobile? would choosing a different template make this easier to achieve? ..new to all of this lol..all your help is appreciated.

2 hours ago, leeplusmy3 said:

Are you meaning that this is how squarespace has the page hardwired for mobile?

Desktop or mobile the structure of the page is the same. It is a responsive design that allows the details on the right to slide under the images when the screen gets to small.

2 hours ago, leeplusmy3 said:

would choosing a different template make this easier to achieve?

All v7.1 sites share the same template so that isn't an option. Please see Templates second paragraph.

I suggest keeping that on your to do list and watch this thread to see if perhaps someone has already explored in this area. Also try searching the forums and the web.

@tuanphan wondering if you can help with a similar issue I'm having...

I'm trying to get the headings and price descriptions for all products to sit above the images on my product page:
https://www.tommystips.com.au/store-services

PW: SOME2021@

Any help would be much appreciated. Thanks!

On 7/13/2021 at 7:24 AM, RAD_Design said:

@tuanphan wondering if you can help with a similar issue I'm having...

I'm trying to get the headings and price descriptions for all products to sit above the images on my product page:
https://www.tommystips.com.au/store-services

PW: SOME2021@

Any help would be much appreciated. Thanks!

It looks like you solved for first 2 products. Do you still need help?

Greetings, how do I move the product image up to be next to my description in PC mode? 

2 hours ago, Janner_G said:

how do I move the product image up to be next to my description in PC mode?

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.