Jump to content

Repositioning Description text of Products and put it under Gallery and Product info (Custom CSS Solution?)

By dzak, in Customize with code

Go to solution Solved by tuanphan,

Recommended Posts

dzak Level 4

dzak

Posted
Posted

Hi there,

I was wondering if I could get help with an Custom-CSS-like solution for repositioning and changing how the description text on a product page is displayed?

I would like the look that the Additional Info gives like on this page (under Gallery and Product Info, in its own full column):

https://www.skipthesmalltalk.com/unlisted-store-page-for-testing/skipthesmalltalk-pilot-example2-pd4l8 (Additional Info picture)

599307816_ScreenShot2022-11-14at9_18_36PM.thumb.png.0cea7859a8210e257ae6828408646cfc.png
 

Instead of like how it normally displays as a Description like on this page (description confined to be stuck on the left column):

https://www.skipthesmalltalk.com/unlisted-store-page-for-testing/skipthesmalltalk-pilot-example2 (Description picture)2132603152_ScreenShot2022-11-14at9_18_15PM.thumb.png.33dc98b0d22a85ce7cf0f8d5e13550df.png

I am uploading my product automatically using the Squarespace API. So an alternative solution would be if was possible to update the Additional Info section with the Squarespace API, but I haven't found anywhere that describes how to do that or if that is even supported. Manually moving the descriptions to the Additional Info section is not a viable solution.

Thanks so much for being such an awesome and helpful community!

Link to comment
  • Replies 2
  • Views 177
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Popular Days

Popular Posts

tuanphan
tuanphan

Add this code to Last Line in Code Injection > Footer <script> $(document).ready(function() { $('.ProductItem-details-excerpt').insertAfter('section.ProductItem-summary.clear'); }); &l

dzak
dzak

Wow, tuanphan, truly incredible! This is really useful and tight code too! Thanks again!

Posted Images

  • Solution
tuanphan Level 17

tuanphan

Posted
  • Solution
Posted

Add this code to Last Line in Code Injection > Footer 

<script>
$(document).ready(function() { 
		$('.ProductItem-details-excerpt').insertAfter('section.ProductItem-summary.clear');
	});
</script>
<style>
  .ProductItem-details-excerpt {
    max-width: 750px;
    margin: 0 auto;
    margin-top: 40px;
}
</style>

image.thumb.png.a62e218840ec00b297b6b72fa96bc61a.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

Sign Up / Login
Go to topic listing

News

×
×
  • Create New...

Squarespace Webinars

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

Upcoming Webinars →

Hire a Designer

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

Get Matched →

Support

Community

Developers

Resources