Jump to content

Move Accordion in Additional Info on Product Page under Add to Cart button

Recommended Posts

Site URL: https://honeybabeherbs.squarespace.com

I'm working in v7.1 and I'd like the "additional info" block from my product listing (which I've formatted as an accordion) to be below the product description and above the add to cart button as sketched below. I've read so many threads about this but haven't found anything that will work for me? 

Would like this format for each product listing but willing to edit each one individually. I'd also like to keep the accordion functionality and have them be condensed as default. 

https://honeybabeherbs.squarespace.com/ Password is Calendula 

image.thumb.png.f4186ae11903a433685a8331fce27c68.png

Link to comment

The first step. Please see the following.

Once the block moves up you may need additional CSS to position the block how you want in the details area. Let us know if you need help with this step.

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
11 hours ago, IndiahSaunders said:

I have just added that code in to the Page Header Code Injection for the store page.

twcsl is not installed.

489485280_ScreenShot2022-05-04at10_42_28AM.thumb.png.e4dde4cd627426a2b433d42e59905b9b.png

Please follow all the install instructions for the code.

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
  • 2 months later...
1 hour ago, holahannah said:

So I believe from my understanding I need CSS to move the accordions to sit below the buttons?

By default my code will move the accordion to the end of the product details.

You have two issues. You've installed twcsl twice. The options described in the install instructions are two choices. You should choose one that matches your situation.

The second issue is that you already have a code block that is manipulating the accordion block.

<script src="https://storage.googleapis.com/squarepaste/base-jquery.js"></script>
<script>$(".accordion-block").appendTo(".ProductItem-details-excerpt");</script>

My code and the other code are incompatible. You need to decide which method you want to use.

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
  • 10 months later...
7 minutes ago, mariec2023 said:

Wondering if it's possible to move my 'Make an Enquiry' button, which I added in my product details under additional info, to sit below the accordion? 

There is a line in the code...

      numberOfBlocks : 1,

This line controls how many blocks are moved out of additional info, from the top of AI. If you change it to 2 and the first two block are the ones you want to move, then you should be good.

From there if you need to reorder the the elements in the product detail area, let us know.

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.