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

How To Install + Dropdown Accordion in a Product Description


divar

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

Link to comment

Recommended Posts

  • 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

Link to comment
  • 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. 

Link to comment
  • 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.

Link to comment
  • 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! 

 

Link to comment
  • 0

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
Link to comment
  • 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? 

Link to comment
  • 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.

Email me if you have need any help (free, of course.). Answer within 24 hours.

How to: Setup password & share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 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

Link to comment
  • 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

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...