Jump to content

Copy accordion block from additional info section to all other product pages?

Go to solution Solved by tuanphan,

Recommended Posts

Hello!

I was wondering if there is a way to add the accordion as mentioned to every single product page on my store? Every page has the same additional information you see and was really hoping there is a way to add it to every product without having to do this manually?

thank you

Bethany

Link to comment

Not sure there's a good free solution but this would do the trick. affiliate link - https://www.will-myers.com/products/p/section-loader-supreme?peachs_apc=jay-van-dyke

  Did I help you? Buy me a coffee!

👨‍💻 Bergen Design Co.

💻  I'm for hire on Upwork!

🕸️ Squarespace Experts  

🖥️ 99Designs

 🛠️ Web Designer's Toolkit

**some of these contain affiliate links

Link to comment
  • Solution
On 11/10/2023 at 9:23 PM, Betania93 said:

thank you that would be wonderful - ive now added it to the footer! 

here's a product link 

https://wildmoonstudio.co.uk/shop/p/checkered-print-abstract-checked-poster-wavy-print-blue-check-print-simple-wall-decor-aesthetic-wall-print-checked-print-cool-art

would be great if I could have it in the additional information section!

thanks, Beth 

Add this code to Website > Website Tools (under Not Linked) > Code Injection > Footer (this code will move Accordion Block Section to Additional Info of all products)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  jQuery(document).ready(function($){
  $('[data-section-id="654e3ba719e0bb19b39b2ed8"]').insertAfter('section.ProductItem-summary');
})
</script>

Next, add this code to Website Tools > Custom CSS (this code will hide accordion section on other pages)

[data-section-id="654e3ba719e0bb19b39b2ed8"] {
	display: none !important;
}
[class*="type-products"].view-item [data-section-id="654e3ba719e0bb19b39b2ed8"] {
	display: block !important;
}

 

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
On 11/12/2023 at 7:07 PM, Betania93 said:

thank you so much! it worked!

just wondered if you know how to hide the divider line between the additional info and the you might also like section? 

thank you!

I guess you should able to edit section > remove it

If you can't find a way to delete it, add this code under

<style>
  #pdp .section-divider-display {
    display: none;
}
</style>

 

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
  • 11 months later...

Hi @tuanphan!

I've managed to solve so many things thanks to your wonderful replies and feedback in here, so thank you for that. 

I hate to ask you about this again, but I am looking for the same solution as above. I tried your answer here, with info from my own site obviously, but it didn't work for me. I am sure I'm doing something wrong... I would love to be able to have the same accordion info on all product pages, instead of manually having to put them in on each and every product all the time. Could you please help?

Thank you kindly!

 

Link to comment
On 10/24/2024 at 5:56 PM, JohannaAmanda said:

Hi @tuanphan!

I've managed to solve so many things thanks to your wonderful replies and feedback in here, so thank you for that. 

I hate to ask you about this again, but I am looking for the same solution as above. I tried your answer here, with info from my own site obviously, but it didn't work for me. I am sure I'm doing something wrong... I would love to be able to have the same accordion info on all product pages, instead of manually having to put them in on each and every product all the time. Could you please help?

Thank you kindly!

 

I wrote this new guide, you can follow it

In case you want each product will have a different accordion, you can share link to a product on your site, I can check easier.

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.