Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

How to move product description & price ABOVE an image


jrawlin7

Question

  • Answers 9
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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 mobi

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. All v7.1 sites s

Posted Images

9 answers to this question

Recommended Posts

  • 0

Add to Home > Design > Custom CSS

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

 

Link to post
  • 0

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!

seaspong&loofah.PNG

Link to post
  • 0
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.

2017877905_ScreenShot2020-10-17at1_49_57PM.png.4c40caca945200acc8922df7d58d4e3d.png

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.

Edited by creedon
version 2 of script

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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

 

seaspong&loofah.PNG

mobileview.PNG

Link to post
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post
  • 0

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.

Link to post
  • 0
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...