Jump to content

Accordion in a Product Description for 7.1

Recommended Posts

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

1560933574_ScreenShot2021-11-02at1_42_17PM.thumb.png.1a10d870eee59ad5fe5d03e145b0cb83.png

 

 

I want it to look like this:

1065652766_ScreenShot2021-11-02at1_39_39PM.thumb.png.e224a384c0babc2bd3b5d7ad981e0ad7.png

 

 

Link to comment

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.

Link to comment

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.

Edited by paul2009

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

Link to comment
  • 2 months later...
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

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
  • 4 weeks later...
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.

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

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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
On 2/15/2022 at 8:24 PM, deniambrose21 said:

You want this?

image.thumb.png.438a29d5e3e9106b7219750e6583c705.png

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
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.

Edited by creedon

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

Link to comment
  • 2 weeks later...
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.

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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

Find my contributions useful? Please like, upvote, mark my answer as best , and see my profile. Thanks for your support!

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.