Jump to content

Move price next to product title

Recommended Posts

  • Replies 5
  • Views 582
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  /* store product detail price move to right of title desktop */
  
  .ProductItem-details .product-price {
  
    order : 1;
    
    }
    
  @media screen and ( mix-width : 641px ) {
  
    .ProductItem-details:not( .ProductItem-details--mobile ) {
    
      display : grid;
      grid-template-columns : repeat( 5, 1fr );
      
      }
      
    .ProductItem-details > * {
    
      grid-column : 1 / 6;
      
      }
      
    .ProductItem-details h1.ProductItem-details-title {
    
      grid-column : 1 / 3;
      
      }
      
    .ProductItem-details .product-price {
    
      grid-column : 3 / 6;
      
      }
      
    }
    
  </style>

This is for v7.0 using the Brine template family.

It is not easily possible to achieve the effect you want on mobile because of the structure of the page.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
Quote

Could it be possible if it was on the same line  as the product name for desktop?

Possible yes. but as I stated previously not easy. I think it would take some JavaScript to move elements around on the page. I do not know of any code to do this. CSS can't get the job done.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment
  • 4 weeks later...
18 minutes ago, nys said:

How did you make your sizing section look like this with squares around each size?

Take a look at the Swatch Variants paid plugin. Their product allows you to show sizes in this way.

About me: I'm Paul, a SQSP user for over 18 yrs and a Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥.
Work: Founder of SF.DIGITAL, providing high quality original extensions to supercharge your Squarespace website. 
Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links.
Forum advice is completely free. You can thank me by selecting a feedback emoji below. Buying a coffee is optional.

Book paid help with domains: Connect a GoDaddy domain. Connect a Squarespace Domain. Domain assistance

Link to comment

Create an account or sign in to comment

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


×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.