Jump to content

How to add accordion functionality into product description ?!

Recommended Posts

@jpeter I seem to have some issues with the code and the product description txt not having the same position on mobile vs. laptop. 

I also can not manipulate the order with the css injection code:

.ProductItem-additional {
  order: 3;

I injected it into the custom css, but it just does´nt react to it. 

I hope you are still around to help 🙂 - either way - your help was really great with the javascript which i added to the footer as suggested:


  var accordion = document.querySelector('.ProductItem-additional');
  var description = document.querySelector('.ProductItem-details-excerpt');                    
  if(accordion && description) {
    // Remove accordion from current position.
    // Add accordion after the description.

Skærmbillede 2024-06-12 kl. 15.55.02.png

Skærmbillede 2024-06-12 kl. 15.54.46.png

Skærmbillede 2024-06-12 kl. 15.58.54.png

Link to comment
4 hours ago, mynovastudio said:

seem to have some issues with the code and the product description txt not having the same position on mobile vs. laptop.

Please post the URL for a page on your site where we can see your issue. For us to see the URL you need to include the link in the content of your post. The URL field the forum software provides is not shown to us.

A link to the backend of the your site won’t work for us, i.e. a URL that contains /config/.

Please set up a site-wide password, if your site is not public and you've not already done so.

Post the password here.

Adding a site-wide password does not allow anyone to alter your site. It only allows those with the password to see your site.

Please read the site-wide password and how to share a link documentation to understand how they work.

You may find How to post a forum question post useful.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@creedon thank you for your reply - here is a link to a specific product where an accordion has been added: https://mynovastudio.dk/webshop/p/top-push-pin-snake-go?rq=loke

I have manually added a spacer under the accordion to create a bit of space between the add to cart and accordion, as well. But that must be fixable with som code too.


______ Random comment______

It´s a lot of work having to add the accordion manually to each product like this. It would be such a life hack, if one could add a pre-designed (editable) accordion to a product-section - just like to feature to add a ❤️-section elsewhere. 

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

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.