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

How To Install + Dropdown Accordion in a Product Description

Question

Site URL: https://www.erheer.com/shop/ariel

Hi Squarespace Wizards,

I am trying to install a dropdown accordion in the description of a physical product. Unfortunately Squarespace doesn't have the option to add a markdown box in the description of a product(screenshot 1). 

I have add the code block and the markdown box in the additional Info (screenshot 2) but that shows at the end of the page after all the product photos at the moment. I'd like the dropdown to be a part of the product description itself (screenshot 4) and not at the end of the page. 

Any assistance would be greatly appreciated.

Thanks,

Divya

Screen Shot 2020-06-29 at 3.06.13 am.png

Screen Shot 2020-06-29 at 3.09.05 am.png

Screen Shot 2020-06-29 at 3.05.23 am.png

Screen Shot 2020-06-29 at 3.16.42 am.png

Share this post


Link to post

Recommended Posts

  • 0

try the code above, but make the order: 8... I think that would be it.  if not, you'll see the change and adjust again (7 or 9)

Share this post


Link to post
  • 0

Yes it has worked! Also I did change the excerpt position in site styles to below. Thanks RWP and others for all your help. Really Really appreciate it. I am working on finishing my website in the next 10 or so day and I am sure there will be other things that might need some tweaking so this is not the last you hear from me. 

image.png.b48265af40713e02ba9f081304a8e6a4.png

Share this post


Link to post
  • 0

Happy to help @divar

Is everything in the correct order now?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

hey rwp, the accordion is working fine though I am yet to test on it all the products, I think it will work fine.

But as i mentioned yesterday that the website is taking a bit longer to load than before. 

Share this post


Link to post
  • 0

Honestly, I am not too familiar with the ajax loading system, so I can't really help you with that.

I ran your ariel page though pingdom, and nothing seemed unreasonably slow. 1.5-1.6 seconds to load, which seems pretty on point for squarespace pages.

If its taking an unreasonably long time to load for you, it might be something else. Try in a private or incognito window of your browser and see if its any faster.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@divar would you be inclined to share the code you used below the markdown? i'm trying to do the same thing, but with digital products - not sure if @rwp might have any advice as well. thank you both! 

Share this post


Link to post
  • 0

The code is above, but may need tweaking for your theme.


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

@mmkme Yes the code is in the thread chain above. Let me know if you need any help but @rwp might be able to guide you better with your website specific needs. 

19 hours ago, mmkme said:

@divar would you be inclined to share the code you used below the markdown? i'm trying to do the same thing, but with digital products - not sure if @rwp might have any advice as well. thank you both! 

 

Share this post


Link to post
  • 0
Posted (edited)

It looks like you have a second code for the accordion in the header.

Also, as far as relocating it, your theme is laid out differently, where exactly do you want it to end up?

Edited by rwp

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

thanks @rwp! removed the second code and that helps the expansion 🙂

screenshot attached for where to ideally place the descriptions

Screen Shot 2020-07-10 at 1.25.04 PM.png

Share this post


Link to post
  • 0

Change the first line of the code to this, your elements have different names than the other persons page.

$('.product-description .markdown-block').insertAfter('.product-excerpt');

 


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

ty! I changed the page header code injection to:

<script>
$(document).ready(function(){
$('.product-description .markdown-block').insertAfter('.product-excerpt');
$(".markdown-block .sqs-block-content h2").nextUntil("h2").slideToggle();
$(".markdown-block .sqs-block-content h2").click(function() {$(this).nextUntil("h2").slideToggle();});
});
</script>

and it's still in the same position - might i be missing something? 

Share this post


Link to post
  • 0

The code on your page doesn't seem to have updated correctly. Did you hit save after updating it?


Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Share this post


Link to post
  • 0

Hello , can someone share the code actually used for the above? i've tried to follow the instructions above but nothing seems to work 😞

Share this post


Link to post
  • 0
37 minutes ago, Khushk said:

Hello , can someone share the code actually used for the above? i've tried to follow the instructions above but nothing seems to work 😞

You can also try this accordion plugin if you have a budget.


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
48 minutes ago, Khushk said:

i'm afraid now - looking for a free version as there are many! 

Hi @Khushk
Use our free extension! It doesn't need code knowledge. Install and make your accordion in minutes. You can change fonts, colors, paddings, margins and etc... without coding!

Check this video after 3 m.

 

Download it from here: https://chrome.google.com/webstore/detail/squarespace-ninja-kit-ext/klkcninekpnpemndealaeebjajmkabcf

Installation guidehttps://www.ixstudio.net/ninjakit/installation-guide

Please use the like button if it helps you!

Best,
Leopold

image.thumb.png.e45e3738ec5cf0fdd88a316cae47a0ba.png

Edited by IXStudio

Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Share this post


Link to post
  • 0
Just now, Khushk said:

Even after downloading it, the Ninja Kit isn't appearing 

It's an extension that will appear on the top-right of your browser near of other extensions. But If you can't find it just contact me via Skype: LeopoldJobs. I'll help you on that!

Please use the like button if it helps you!

Best,
Leopold


Ninja Kit Extension: Upgrade your Squarespace website without coding.

YouTube Preview    -    FREE DOWNLOAD

Share this post


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