How to add accordion functionality into product description ?!

Hi yes that is correct 🙂

Hi everyone, firstly thanks for the awesome help with custom code. 

I'm attempting to add an accordion below our add to cart button in place of the description. i've used the code and it's working well, except that the product reviews are now going to the top! How can i keep the reviews at the bottom? Also the accordion appears squashed and centred, how can i left-align it and make it wider?  

I'm trying it on this page: https://www.manuko.com.au/products/hazelnut-butter-cup-x3hth

Appreciate your help.

Matt

On 2/10/2023 at 4:48 AM, Manuko said:

Hi everyone, firstly thanks for the awesome help with custom code. 

I'm attempting to add an accordion below our add to cart button in place of the description. i've used the code and it's working well, except that the product reviews are now going to the top! How can i keep the reviews at the bottom? Also the accordion appears squashed and centred, how can i left-align it and make it wider?  

I'm trying it on this page: https://www.manuko.com.au/products/hazelnut-butter-cup-x3hth

Appreciate your help.

Matt

Add it between Add to cart - Share icons

Or add it under Share Icons?

Yes i could you please help

Hello, all. Thanks so much for all of the help throughout this thread. You've saved me a lot of hair-pulling. I have a few questions about tweaks:

1. I've tried everything I can think of but can't seem to adjust the space between the Item Description and the Accordion/Additional Details. (Marked in red.)

2. Is there a reason why the order changes don't retain in mobile view? (Screenshot attached.) It doesn't seem like anyone else has had this problem in the thread so I'm not sure what I may have done incorrectly. 

3. This might be unrelated to this particular thread, so apologies, but if there's a way to retain the Quantity/Add to Cart button on the same line in mobile view, that would be incredible. 

Link to page: https://aardvark-crane-pflz.squarespace.com/shop / https://aardvark-crane-pflz.squarespace.com/shop/p/lolly-willowes
pw: lolly

TIA.

1 hour ago, dieslaughing said:

Is there a reason why the order changes don't retain in mobile view? (Screenshot attached.)

Yes. I don't have a solution but an observation. The desktop and mobile display use different code for responsiveness. To achieve a similar effect on both devices any code needs to be written for both. Also note that it may not be possible to get the exact same layout because of the screen size differences.

On 3/11/2023 at 9:13 AM, dieslaughing said:

Hello, all. Thanks so much for all of the help throughout this thread. You've saved me a lot of hair-pulling. I have a few questions about tweaks:

1. I've tried everything I can think of but can't seem to adjust the space between the Item Description and the Accordion/Additional Details. (Marked in red.)

2. Is there a reason why the order changes don't retain in mobile view? (Screenshot attached.) It doesn't seem like anyone else has had this problem in the thread so I'm not sure what I may have done incorrectly. 

3. This might be unrelated to this particular thread, so apologies, but if there's a way to retain the Quantity/Add to Cart button on the same line in mobile view, that would be incredible. 

Link to page: https://aardvark-crane-pflz.squarespace.com/shop / https://aardvark-crane-pflz.squarespace.com/shop/p/lolly-willowes
pw: lolly

TIA.

 

#1. Add to Design > Custom CSS

/* Space accordion - product info */
section.ProductItem-additional {
    margin-top: 1px !important;
}
.ProductItem-details-excerpt {
    margin-bottom: 1px !important;
}

#2. What should it look like?

#3. Change 768px in this code to  1px

On 3/12/2023 at 6:54 AM, tuanphan said:

#1. Add to Design > Custom CSS

/* Space accordion - product info */
section.ProductItem-additional {
    margin-top: 1px !important;
}
.ProductItem-details-excerpt {
    margin-bottom: 1px !important;
}

 

#2. What should it look like?

#3. Change 768px in this code to  1px

 

On 3/12/2023 at 6:54 AM, tuanphan said:

#1. Add to Design > Custom CSS

/* Space accordion - product info */
section.ProductItem-additional {
    margin-top: 1px !important;
}
.ProductItem-details-excerpt {
    margin-bottom: 1px !important;
}

#2. What should it look like?

#3. Change 768px in this code to  1px

#1. THANK YOU, worked like a charm.

#2: I would like to have the details be: Product Name, Price, Details, Accordion, then Quantity and Add to Cart on same line.

#3: Unfortunately this didn't work for me; attaching screenshot of what happened. 

Thank you so much, @tuanphan!

On 3/13/2023 at 11:46 PM, dieslaughing said:

 

#1. THANK YOU, worked like a charm.

#2: I would like to have the details be: Product Name, Price, Details, Accordion, then Quantity and Add to Cart on same line.

#3: Unfortunately this didn't work for me; attaching screenshot of what happened. 

Thank you so much, @tuanphan!

#2. Don't remove any code in your current code. Add this to Design > Custom CSS
 

/* Mobile Product Detail Order */
@media screen and (max-width:767px) {
.ProductItem-details-excerpt {
    order: 2 !important;
}
}

#3. Use this CSS code

@media screen and (max-width:767px) {
     .sqs-add-to-cart-button-wrapper {
        width:70% !important;
        float: left;
        margin-bottom: 0 !important;
        position: relative;
        bottom: 100px;
        right: 0;
        left: 110px;
    }
    .product-quantity-input {
        width: 30% !important;
        float: left !important;
    }
}

On 1/4/2022 at 10:45 AM, jpeter said:

@ellerxyz Yeah, the original references the description. Here's some new JS code that will rely on the cart button and place the accordion above it:

(function(){
  var accordion = document.querySelector('.ProductItem-additional');
  var cartButton = document.querySelector('.sqs-add-to-cart-button-wrapper');                    
  
  if(accordion && cartButton) {
    // Remove accordion from current position.
    accordion.parentNode.removeChild(accordion);
    
    // Add accordion before the cart button.
    cartButton.before(accordion);
  }
})()

Hi, I used this code, it works perfect on web but in mobile it disapears complety the accordion. Do you know why does that happen?

On 5/15/2023 at 11:26 PM, maaarroood said:

 

Can you share link to a product where you have problem? We can check easier

Hi there, 

I'm hoping to have an accordion in both the product description and the additional info sections, is this possible using this code?

Thanks

8 hours ago, MCleeves said:

I'm hoping to have an accordion in both the product description and the additional info sections, is this possible using this code?

Code that moves the whole additional info area into the product details won't work. You need more fine grained code to keep your additional info area and also move blocks from it into the product detail area.

Fortunately I have code to handle this effect. Please see the following.

Let us know how it goes.

8 hours ago, PotsandPaperbySteph said:

Am I using the right code?

I prefer my code cited in my previous post for this task. It  only moves the needed elements and leaves the additional info area in place.

Thank you @creedon, I managed to get it working on my live site but it disappears on mobile - any idea why please? This is the code I used: 

 

<script>

(function(){

  var accordion = document.querySelector('.ProductItem-additional .accordion-block')

  var quantitylabel = document.querySelector('.quantity-label');                    

  if(accordion && quantitylabel) {

    // Remove accordion from current position.

    accordion.parentNode.removeChild(accordion);

    // Add accordion before the quantity label.

    quantitylabel.before(accordion);

  }

})()

</script>

URL:https://www.potsandpaperbysteph.com/shop/p/o3rmu4pac0fwpetkskvge721p57asg 
Password: HELP

5 hours ago, PotsandPaperbySteph said:

any idea why please?

Yes and my code should take care of the situation. From the changes of my code.

Changes

• 2022-01-31

  • for those product detail layouts that have two detail area, move elements around when needed

Thanks @creedon, your code worked great! Do you know what Custom CSS I can use to  get the accordion to sit between the description and quantity label please?

URL: https://www.potsandpaperbysteph.com/shop/p/o3rmu4pac0fwpetkskvge721p57asg
Password: HELP

5 hours ago, PotsandPaperbySteph said:

Do you know what Custom CSS I can use to  get the accordion to sit between the description and quantity label please?

Please see the following.

Then set the CSS variables thusly.

          --add-to-cart-button : 2;
          --description : unset;
          --price : unset;
          --quantity : unset;
          --variants : unset;

Finally add the following to Store Settings > Advanced > Page Header Code Injection for the store page. Please see per-page code injection.

<style>

  .pdp-layout .pdp-details .sqs-block-accordion {
  
    order : 1;
    
    }
    
  </style>

Let us know how it goes.

Hi @creedon, Thank you! I will work my way through this and see how I get on.
I was hoping for the accordion to sit above the quantity label, will the above still work please?

Ok so I can't seem to get any of it to work? This is totally above my skill level so I'm really sorry to keep bothering you! I know I am being incredibly slow.

I am unsure which post on the Moving 'add to cart' button thread is relevant to what I need. Is it the 3 codes from Store Product Details Reorder Desktop that I should be installing first?

Then setting the CSS to:

          --add-to-cart-button : 2;
          --description : unset;
          --price : unset;
          --quantity : unset;
          --variants : unset;

Then adding this to the Store Page Code Header Injection?

<style>

  .pdp-layout .pdp-details .sqs-block-accordion {
  
    order : 1;
    
    }
    
  </style>

Or is this completely wrong?
Thanks for your patience @creedon 🙂 

8 hours ago, PotsandPaperbySteph said:

Or is this completely wrong?

I think you have it completely right!

The trick is to install everything in the order specified. Be careful when pasting each bit of code into the Code Injection. Also don't take the code through a word processor, that can mess things up.

Thanks for getting back to me @creedon. I've added each bit, in order and the acordion doesn't move? 🙁

Ignore the above, have just replied to your message @creedon! 🙂 

On 9/6/2023 at 5:30 PM, PotsandPaperbySteph said:

Thank you @creedon, I managed to get it working on my live site but it disappears on mobile - any idea why please? This is the code I used: 

 

<script>

(function(){

  var accordion = document.querySelector('.ProductItem-additional .accordion-block')

  var quantitylabel = document.querySelector('.quantity-label');                    

  

  if(accordion && quantitylabel) {

    // Remove accordion from current position.

    accordion.parentNode.removeChild(accordion);

    

    // Add accordion before the quantity label.

    quantitylabel.before(accordion);

  }

})()

</script>

URL:https://www.potsandpaperbysteph.com/shop/p/o3rmu4pac0fwpetkskvge721p57asg 
Password: HELP

Any update on the fact that it doesn't appear on mobile? I'm having the same issue. 

Thanks tones!

10 minutes ago, AlexMo said:

Any update on the fact that it doesn't appear on mobile?

As I recall I updated my code to address a previous mobile display issue.

Perhaps there is another issue.

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.