Jump to content

Changing appearance order on PDP, adding accordions to PD

Recommended Posts

Hey there,

thanks for helping me out! I saw many people had this issue, but though reading the comments it did not become clear to me which solutions worked. -for me nothing worked-

I am trying to achieve the following:

- Creating accordions in the product description (similar to here: https://www.net-a-porter.com/en-us/shop/product/philosophy-di-lorenzo-serafini/double-breasted-houndstooth-cotton-blazer/1299457) --> they should come right after the product description, before size selection (it is important though that this also looks proper on mobile).

- These accordions should have toggling +/- 


I was so far able to add the following code to the shop setting --> Advanced -->Page Header Code Injection and it worked where as I see the accordions unter the main product details (price size description etc.) but also the toggling does not work yet.


<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>


$(document).ready(function() {

$('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor', 'pointer');

$('.markdown-block .sqs-block-content h3').nextUntil('h3').slideToggle();

$('.markdown-block .sqs-block-content h3').click(function() {

if ($(this).nextUntil('h3').is(':hidden')) {

$('.markdown-block .sqs-block-content h3').nextUntil('h3').slideUp();

$(".markdown-block .sqs-block-content h3").removeClass('ui-open');

$(".markdown-block .sqs-block-content h3").addClass('ui-closed');



$(this).toggleClass('ui-closed ui-open');}




$(this).toggleClass('ui-closed ui-open');}





I am not sure if I am entering the code in the right spot, or if this needs to go under Settings --> Advanced --> Code Injection Header/Footer. Also I am not sure how to add the CSS (for the order I assume?) to my existing CSS (which place / what code etc.).


It would mean the world to me if we could find a solution for this!

Thanks all for looking into it and helping a beginner like me 🙂

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

@tuanphanThanks for responding. I believe though when using a code block, you can only have one markdown block, as otherwise it does not work for multiple blocks. I want multiple dropdown though. I do not want to use any plugins if possible, so I would like to focus on the code 🙂 Again, thank you.

Link to comment


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.