Jump to content

How to add Accordion menu under Add to cart

Recommended Posts

  • Replies 6
  • Views 755
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Is the accordion going to be the same across all products? Or, is the accordion going to be specific to each product.

Your image suggests to me the later.

If the later is your case then you will need to create the accordion in the Additional Info area of the product editor. Then using my code you can move the accordions to under the Add to Cart button.

If you have one accordion to share across all the products then I have some code that should be able to help with that.

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
4 minutes ago, creedon said:

Is the accordion going to be the same across all products? Or, is the accordion going to be specific to each product.

Your image suggests to me the later.

If the later is your case then you will need to create the accordion in the Additional Info area of the product editor. Then using my code you can move the accordions to under the Add to Cart button.

If you have one accordion to share across all the products then I have some code that should be able to help with that.

Yes, the accordion going to be the same across all products🙇‍♂️

May I have the code please? Thanks!

Link to comment

Please see the following.

Check out Heather Tovey's most excellent looking Squarespace ID Finder to find the block id of your accordion block.

In selectorsActionsMap, in the code, set the following values.

     '[enter accordion block id here between single quotes replacing square brackets]' : {
      
        selectorDestination : '.ProductItem-details .ProductItem-details-checkout',
        
        action : 'append', // value is append, prepend or replace
        
        // selectorParentDestination is optional, use when you want to first
        // find a selector destination but then work up the ancestor hierarchy
        // to manipulate it
        
        selectorParentDestination : '[enter selector parent destination here between single quotes replacing square brackets]',
        
        // selectorCopy when true will make a copy of the source element and use
        // it instead of the actual selectorSource. value is false or true
        
        sourceCopy : false,
        
        },
        

Let us know how it goes.

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

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.