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

Swap position of .product-excerpt and .product-price

Go to solution Solved by tuanphan,


Site URL: https://badlab.squarespace.com

Page example - https://badlab.squarespace.com/store/backend/bold-training-t-womens
Password - temp


I need help swapping the positions of .product-excerpt and .product-price on product pages. 
I've managed to decrease the margins to the right size and I've moved <div class="product-excerpt" data-content-field="excerpt">_</div> and <div class="product-price">_</div> using developer tools in chrome but haven't managed to rearrange in CSS.

I'd also like to move .product-excerpt on MOBILE to below .product-title mobile

Any help appreciated.  

Link to post
  • Answers 5
  • Created
  • Last Reply

Top Posters For This Question

5 answers to this question

Recommended Posts

  • 1
On 2/10/2021 at 7:37 PM, smithandrew1993 said:

Hi @tuanphan,

If possible, yes.

Add to Design > Custom CSS

/* desktop position */
@media screen and (min-width:641px) {
div#productDetails {
    display: flex;
    flex-direction: column;
.product-excerpt {
    order: 2;
.product-price {
    order: 3;
.product-variants {
    order: 4;
.product-quantity-input {
    order: 5;
.sqs-add-to-cart-button-wrapper {
    order: 6;
.product-sharing {
    order: 7;


Link to post
  • 0
On 4/11/2021 at 12:28 AM, ElizabethM said:

Hi I would like to know if it's possible to reduce the width of the boxes with special size and color ? 


Thank you for your help1698993256_Capturedcran2021-04-1019_25_00.thumb.png.e4c345aca5d77929a477390d87c048ce.png

Hi. Possibile. Can you share link to product in screenshot?


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