Jump to content

How can I swap the product detail page description and additional info on the product detail page?

Recommended Posts

I am on squarespace 7.1

I am hiding the product title on the product detail page with the following code 

h1.ProductItem-details-title {
    display: none !important;
}

because the breadcrumb already contains the title so this was redundant. 

I want to swap the product detail page and the additional info sections (elements i am not sure of the terminology here) so the additional info section lines up with the top right of the picture while the description is below in linging up with the bottom left. 

pdpage_1.jpg.65969b07ec3ac4536c6ced1e11d54e6e.jpg

 

I attempted to solve this with the following code 

<script>
/* place in store page header code injection  */
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertBefore('.ProductItem-details-excerpt');
});
</script>

which helped but but left me with the following alignment problems 

pdpage_2.jpg.6d5cdf5b3bf6caad67a2c501b7e42b14.jpg

here is a link : https://dove-capybera-nn4w.squarespace.com/landscapes/p/sams-place-1
pw : Fr9Db9%wN0*qwO3_rCY

Thank you for your time! let me know if i need to clarify anything. 

 

Link to comment
  • genfoch01 changed the title to How can I swap the product detail page description and additional info on the product detail page?
  • Replies 4
  • Views 586
  • Created
  • Last Reply
10 hours ago, genfoch01 said:

I am on squarespace 7.1

I am hiding the product title on the product detail page with the following code 


h1.ProductItem-details-title {
    display: none !important;
}

because the breadcrumb already contains the title so this was redundant. 

I want to swap the product detail page and the additional info sections (elements i am not sure of the terminology here) so the additional info section lines up with the top right of the picture while the description is below in linging up with the bottom left. 

pdpage_1.jpg.65969b07ec3ac4536c6ced1e11d54e6e.jpg

 

I attempted to solve this with the following code 


<script>
/* place in store page header code injection  */
  jQuery(document).ready(function($) {
$('.ProductItem .ProductItem-additional').insertBefore('.ProductItem-details-excerpt');
});
</script>

which helped but but left me with the following alignment problems 

pdpage_2.jpg.6d5cdf5b3bf6caad67a2c501b7e42b14.jpg

here is a link : https://dove-capybera-nn4w.squarespace.com/landscapes/p/sams-place-1
pw : Fr9Db9%wN0*qwO3_rCY

Thank you for your time! let me know if i need to clarify anything. 

 

Insert this to Custom CSS

.collection-type-products.view-item .ProductItem-gallery {
  display: block;
}
.collection-type-products.view-item .ProductItem .ProductItem-details {
  padding-top: 0;
}
.collection-type-products.view-item .ProductItem .ProductItem-additional {
  margin-top: 0;
}
.collection-type-products.view-item .ProductItem-details .ProductItem-product-price {
  margin-bottom: 0;
}

and update your custom script

<script>
/* place in store page header code injection  */
  jQuery(document).ready(function($) {
	$('.ProductItem .ProductItem-additional').insertBefore('.ProductItem-details-excerpt');
    $('.ProductItem .ProductItem-details-excerpt').appendTo('.ProductItem-gallery');
});
</script>

 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

image.thumb.png.2f9119de799f3b82b1a62fe5d1a63a7c.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

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