Accordion in a Product Description for 7.1

Site URL: https://www.tribeandsol.com/shop

Hi, 

I went to additional info and added the accordion insert from menu options but it is not aligning properly under the product description before the add to cart button. Can you help with this?

Also, do I have to add accordion manual to each product or is there a way to do is across the site I have over 500 products.

This is my current shops page https://www.tribeandsol.com/shop

I want it to look like this:

Yes, you'll need to add the accordion to all products individually because each accordion is its' own block with a different set of properties and... I'd assume, would have a different description for each product.

As for your initial request, because the accordion is not in the same section as "add to cart" section, moving it upwards and nestled between the two items is not possible using custom CSS and you should add the accordion to the section above first.

Will each product need to display different information in the accordion, or will the information be the same for every product?

If different, it must be added manually to each product.

If it will be the same, you could add one accordion to the website and a developer could write some JavaScript to reposition this accordion on every product detail page.

The resolution to this question is to resize product image, then spacing between product info and product image. It will move the accordion up under add to cart. It took me 4 hours to figure it out but thank GOD!

Hi! What did you resize it to to make this work? I've been playing around with it but no matter what I set, the additional info/accordion is always way below the photo and description

9 hours ago, ellerxyz said:

Hi! What did you resize it to to make this work? I've been playing around with it but no matter what I set, the additional info/accordion is always way below the photo and description

Can you share link to a product? We can help easier

On 1/3/2022 at 10:41 PM, ellerxyz said:

Hi! What did you resize it to to make this work? I've been playing around with it but no matter what I set, the additional info/accordion is always way below the photo and description

On this you slide the bars to adjust the sizing in product info.

Need help with this as well. I cannot get the accordion below the add to cart button. 

16 minutes ago, deniambrose21 said:

I cannot get the accordion below the add to cart button. 

If you're using a built-in Accordion Block, it can only be added to the Additional Info section that appears full-width below the product images and summary information (title, description, price, add to cart button and so on). 

If you'd like something else to happen, please provide us with a working link to the product on the site so that we can take a look. If the site isn't live, we need you to set a public password in the visibility settings and tell us what it is.

Hi @paul2009 I am trying to move a markdown accordion block underneath an image section here. I would like the drop down "size, usage, etc." to move underneath the images/ testimonials.

On 2/7/2022 at 3:52 AM, deniambrose21 said:

 I am trying to move a markdown accordion block underneath an image section here. I would like the drop down "size, usage, etc." to move underneath the images/ testimonials.

Do you still need help?

@tuanphan yes please! Here is the link: https://www.drenchbar.com/shop/p/neroli-driftwood

On 2/15/2022 at 8:24 PM, deniambrose21 said:

@tuanphan yes please! Here is the link: https://www.drenchbar.com/shop/p/neroli-driftwood

 

You want this?

On 2/6/2022 at 12:52 PM, deniambrose21 said:

I am trying to move a markdown accordion block underneath an image section

7 hours ago, tuanphan said:

You want this?

@tuanphan I got the impression that the poster wanted the accordion below the image gallery section but above the additional info area.

@deniambrose21 please correct me if I'm mistaken.

That seems more difficult as the gallery area was not designed to be added to or flexible like the product detail or additional info. Not saying it can be done but I think some real care would be needed to alter the gallery area.

hello! I would just like the accordion to go into the additional info area. Right now it's in a code block in the additional info area but it is showing up in regular product description.

2 hours ago, deniambrose21 said:

I would just like the accordion to go into the additional info area. Right now it's in a code block in the additional info area but it is showing up in regular product description.

The following script in Settings > Advanced > Code Injection > FOOTER is moving the markdown block up into the product details.

    <script>
  $(document).ready(function() { 
        $('.ProductItem-additional .markdown-block').insertAfter('.ProductItem-details-excerpt');
    });
        </script>

Remove that script, make a copy somewhere, or comment it out. Once that script has been removed you can use the SS interface to drag the markdown block to the top of additional info.

Let us know how it goes.

ahhh! yes, it worked. Thank you so much! 

Can you also help me decrease the space between my product images and below in the additional info on desktop?

3 hours ago, deniambrose21 said:

Can you also help me decrease the space between my product images and below in the additional info on desktop?

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

<style>

  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-thumbnails {
  
    margin-bottom : 10px; /* default is 10vh */
    
    }
    
  .ProductItem .ProductItem-additional {
  
    margin-top : 2.5vw; /* default is 5vw */
    
    }
    
  </style>

This is for v7.1.

Let us know how it goes.

Awesome! That was perfect. Appreciate it!