Jump to content

How To Install + Dropdown Accordion in a Product Description

Recommended Posts

Great seems to be working well. I just have to test it with all other products now.  

I think I've identified a new issue now that we've fixed this one. Now that we've added the additional info just under description, it has pushed the size, quantity and add to cart button further down which is not good from e-commerce point of view. It is even more of a scroll on the mobile. Is it something that can be fixed via CSS or will it require a lot of work? So the size, quantity and add to cart to appear just under the price and before the whole description begins. 

Please let me know if it is too much work. 

IMG_7705.jpg

Link to comment

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

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

@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

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

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
  • 1 month later...
  • 2 weeks later...
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. 
Or send to forum message

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

Link to comment
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
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
  • 2 weeks later...
  • 1 month later...

Create an account or sign in to comment

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

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