Accordion block on product page description BELOW the title and price

Site URL: http://kyracoatesart.com

Hey everyone! I need to collapse my product descriptions on my product detail page into an accordion style. I have tried using code from other people asking similar questions on this forum. I added the code and the Markdown block on the additional info section of the product page. The problem is then all the details end up ABOVE the title, price, and add to cart button for this product. They also don't seem to collapse into an accordion. I did have someone add custom code to make the price and add to cart button be above all descriptions, which is not standard for this template. You can see in screen-shots below. What I need is for the title, price and add to cart button stay at the top and the accordion to be below. I have ZERO coding experience, so I appreciate any help you can offer!

17 hours ago, KC13 said:

Site URL: http://kyracoatesart.com

Hey everyone! I need to collapse my product descriptions on my product detail page into an accordion style. I have tried using code from other people asking similar questions on this forum. I added the code and the Markdown block on the additional info section of the product page. The problem is then all the details end up ABOVE the title, price, and add to cart button for this product. They also don't seem to collapse into an accordion. I did have someone add custom code to make the price and add to cart button be above all descriptions, which is not standard for this template. You can see in screen-shots below. What I need is for the title, price and add to cart button stay at the top and the accordion to be below. I have ZERO coding experience, so I appreciate any help you can offer!

 

Is it the desired result you want to achieve? 

42 minutes ago, bangank36 said:

Is it the desired result you want to achieve? 

Hi Bangank36,

I want the title, price, add to cart and customer review at the top, then the product details below collapsed into an accordion.

25 minutes ago, KC13 said:

Hi Bangank36,

I want the title, price, add to cart and customer review at the top, then the product details below collapsed into an accordion.

In the image i 've attached, is it the right order?

You can try this in Home > Design > Custom Css if it meets your desired result

.ProductItem-summary  .ProductItem-details:not(.ProductItem-details--mobile) {
  display: flex;
}
.ProductItem-summary .ProductItem-details .markdown-block {
  order: 8;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

3 minutes ago, bangank36 said:

In the image i 've attached, is it the right order?

You can try this in Home > Design > Custom Css if it meets your desired result

.ProductItem-summary  .ProductItem-details:not(.ProductItem-details--mobile) {
  display: flex;
}
.ProductItem-summary .ProductItem-details .markdown-block {
  order: 8;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Thank you! I did try it, and unfortunately it didn't seem to work. In the editing window it appeared correctly once I added the code, but once I saved it and checked the live site, it showed up like this in the screenshot. The text is still above, and the accordion doesn't appear collapsed. 

7 minutes ago, bangank36 said:

In the image i 've attached, is it the right order?

You can try this in Home > Design > Custom Css if it meets your desired result

.ProductItem-summary  .ProductItem-details:not(.ProductItem-details--mobile) {
  display: flex;
}
.ProductItem-summary .ProductItem-details .markdown-block {
  order: 8;
}

Let me know how it works on your site

Press 👍 or mark this answer as solution to help another one too

Actually, please ignore my last reply. After a few minutes the site did load correctly, and now the accordion is below the title and add to cart. However, the accordion will not collapse. Any ideas what that could be? This is the code below I used to make it: 

13 hours ago, KC13 said:

Actually, please ignore my last reply. After a few minutes the site did load correctly, and now the accordion is below the title and add to cart. However, the accordion will not collapse. Any ideas what that could be? This is the code below I used to make it: 

 

For the collapsing accordion, let me check for a while

On 11/16/2021 at 11:24 PM, bangank36 said:

For the collapsing accordion, let me check for a while

Thank you! I look forward to any update. 

On 11/19/2021 at 11:11 PM, KC13 said:

Thank you! I look forward to any update. 

Have you solved it yet?

--

Also, why don't you use an Accordion Block to add accordion, instead using Markdown + Script code

It looks like there is no longer  the accordion on your site. Have you solved it yet?

On 11/21/2021 at 5:51 AM, bangank36 said:

It looks like there is no longer  the accordion on your site. Have you solved it yet?

No I haven't. I'm not sure why it isn't showing up

On 11/20/2021 at 7:43 PM, tuanphan said:

Have you solved it yet?

--

Also, why don't you use an Accordion Block to add accordion, instead using Markdown + Script code

I don't see any option to add an accordion block to the product detail page. Do you know how to do that?

4 hours ago, KC13 said:

No I haven't. I'm not sure why it isn't showing up

 

If you go to this product, that is where there is the accordion. It is the part that says Product Details and Size and Fit. The problem is that it isn't collapsed like an accordion. That is what I need to fix, and then hopefully be able to set it up correctly on my other products. Thanks!

19 hours ago, bangank36 said:

Hi @KC13,

Have you try using this setting

 

Hope it can help you

Yes! Thank you! 

On 11/22/2021 at 11:43 PM, Beyondspace said:

Hi @KC13,

Have you try using this setting

 

Hope it can help you

This is the solution