How to move product description & price ABOVE an image

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.

Add the following to Settings > Advanced > Code Injection > HEADER. 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Add the following to Store Settings > Advanced > Page Header Code Injection.

<script>

  $( ( ) => {
  
    // fix improperly encoded ampersands for v7.1 store pages
    
    $( '.grid-item-link, .grid-title, .ProductItem-nav-breadcrumb-link' )
    
      .each ( function ( ) {
      
        $this = $( this )
        
        let html = $this.html ( ).replace ( /&amp;amp;+/g, '&amp;' );
        
        $this.html ( html );
        
        } );
        
    } );
    
  </script>

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.