How to add a code block class to all product pages

Site URL: https://mouse-trout-epjy.squarespace.com/shop-all/p/thomas-wilson-cello-sonata-download

OK, this is the problem I have: 

I have 300+ products on this site and I would like to add an accordion dropdown showing delivery info to all product pages. I have this code already working on other pages using JS and a markdown block: 

<script>
$(document).ready(function(){
$('.markdown-block .sqs-block-content h3').css('cursor','pointer');
$(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
$(".markdown-block .sqs-block-content h3").click(function() {$(this).nextUntil("h3").slideToggle();});
});
</script>

I know that I can do this via the additional info section on products but obviously would need to do that 300+ times which is a pain. So I'm trying to figure out if there's a way I can add a markdown/code block class to all product pages so that every product page will automatically have it. It also means that my client will not have to add the code block when they add products. 

Any ideas? Thanks in advance 🙂

site pw: spong123

12 hours ago, bangank36 said:

You can use javascript to load the content from external page and append it into product description, or place the markdown block in footer (hidden) and move it to content using javascript

Okay thanks, but the part I am unsure about is how to append it to all product descriptions? 

I am new to JS so not quite sure yet 🙂

@tuanphan any ideas? 

On 3/30/2021 at 7:32 PM, spongebob-smc said:

@tuanphan any ideas? 

All products use same accordion dropdown or different?

If same, we can add it in Footer, then use script code to move it into Product

21 hours ago, tuanphan said:

All products use same accordion dropdown or different?

If same, we can add it in Footer, then use script code to move it into Product

Same dropdown yes. This is a good idea to add it to footer but I don't know how to move it to product?

On 4/1/2021 at 8:17 PM, spongebob-smc said:

Same dropdown yes. This is a good idea to add it to footer but I don't know how to move it to product?

Hi. You can add it to Footer first, then share link to a product, we will give the code to move its position.

@tuanphan

Okay I have added it to footer. Here is a link to product:

https://mouse-trout-epjy.squarespace.com/shop-all/p/alasdair-nicolson-42nd-street-stomp-download

The markdown starts with 'shipping information' and I'd like to position it under product details and before related products. 

Thank you!

11 hours ago, spongebob-smc said:

@tuanphan

Okay I have added it to footer. Here is a link to product:

https://mouse-trout-epjy.squarespace.com/shop-all/p/alasdair-nicolson-42nd-street-stomp-download

The markdown starts with 'shipping information' and I'd like to position it under product details and before related products. 

Thank you!

Add this code to Last Line in Code Injection Footer

<script>
  $(document).ready(function() { 
		$('div#page-section-5f4fa1503fcde16f12ffcd23>.row:first-child .span-12').insertAfter('.ProductItem .ProductItem-additional');
	});
</script>

and add this to Code Injection Header

<style>
  body:not(.collection-type-products.view-item) div#page-section-5f4fa1503fcde16f12ffcd23>.row:first-child .span-12 {
  	display: none;
  }
</style>

That worked PERFECTLY! Thank you so much! 

On 4/6/2021 at 10:34 PM, spongebob-smc said:

That worked PERFECTLY! Thank you so much! 

I see the site has some problems