Jump to content

Rearrange Accordion in Product Description

Recommended Posts

On 5/24/2024 at 12:20 AM, Stefik said:

I am looking to place the accordion right below the product description on both mobile and desktop. 

https://www.tastebytiff.com/order/p/pesto-steak

Haven't been able to figure this out! 

 

This is the best layout I can achieve to make with basic Css code

.ProductItem-details-checkout {
  display: flex !important;
}
.ProductItem-product-price {
  order: 0;
}
.tweak-product-basic-item-description-position-below-price .ProductItem-details .ProductItem-details-excerpt-below-price {
  order: 1;
}
.ProductItem-quantity-add-to-cart {
  order: 2;
}
.ProductItem-details .product-variants {
  order: 3;
}
.tweak-product-basic-item-add-to-cart-standalone .ProductItem .ProductItem-quantity-add-to-cart{
  display: flex;
  flex-wrap: wrap;

}
.ProductItem-quantity-add-to-cart .product-quantity-input{
  width: 100%;  
}

.ProductItem-quantity-add-to-cart .accordion-block {
  width: 100%;  
}

Demo:

image.thumb.png.33b218c15268c08b0aac811f8292e65c.png

The javascript which is only available on the business plan or above of Squarespace, can help you set the right position as needed. Which one are you in?

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Hey! Thank you so much. The code works perfectly. Only thing is, is there a way to adjust the spacing between the accordion and the description? That little gap between them? 

I'm on a paid plan so all is good and was able to use it! 😁

Link to comment
17 hours ago, Stefik said:

Hey! Thank you so much. The code works perfectly. Only thing is, is there a way to adjust the spacing between the accordion and the description? That little gap between them? 

I'm on a paid plan so all is good and was able to use it! 😁

Use this CSS code under

.tweak-product-basic-item-description-position-below-price .ProductItem-details .ProductItem-details-excerpt-below-price {
    margin-bottom: 0px !important;
}

 

17 hours ago, Stefik said:

Is there a way to arrange the order by having the product variants sit right under the accordion?

Use this code to bottom of Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    $('.ProductItem-details .product-variants').insertAfter('.accordion-block');
});
</script>
<script>
  .ProductItem-details .product-variants {
    order: 2 !important;
}
</script>

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (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.