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

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 post
  • Answers 48
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

OHHHH. I think I see the issue. You might have put some of the CSS in the code injection block. So delete both codes from above replace with this (code injection) <script> window.S

You can add to additional info, then share url again. We can give the code to move it to description

Can you post your code for the accordion? I can see about closing them when another is opened.

Posted Images

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

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. 

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

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! 

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

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! 

 

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

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

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? 

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

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, work for a non-profit project (build 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. 

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

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

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