Jump to content

Accordion block on product page description BELOW the title and price

Recommended Posts

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!

 

Screen Shot 2021-11-15 at 2.33.58 PM.png

Screen Shot 2021-11-15 at 2.34.14 PM.png

Link to comment
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!

 

Screen Shot 2021-11-15 at 2.33.58 PM.png

Screen Shot 2021-11-15 at 2.34.14 PM.png

Is it the desired result you want to achieve? 

image.png.de47dbe42e4b259d783e0806bd4dc68f.png

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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. 

Screen Shot 2021-11-16 at 9.44.14 AM.png

Link to comment
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: 

Link to comment
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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment
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?

Link to comment
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!

Link to comment

Hi @KC13,

Have you try using this setting

Hope it can help you

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

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.