How to add accordion element to all products in store

Hello, 

I was wondering if anyone has pointers on how to add an accordion to to all products (or many using tags) rather than adding individually through the additional info on each product description.

I have it done on this page as an example - https://boyangeorgiev.com/store/p/st-pauls-cathedral-at-sunset-photo-print

And I wish to be able to add it all/many products. I suppose this will require some coding which I'm okay with integrating. 

Would appreciate anyone's input!

Best,
Bobby

Hey @BobbyGeorgiev, this Section Loader plugin allows you to build a section once and then use it in multiple places on your site. You're able to update the section in one place and all instances will automatically update too. (Affiliate Link)

If you want to use one accordion for all products, just add it into Site Footer, then we can give code to move accordion into all products

If you want to use different accordions on different tags, you can use plugin recommend by @abibacon 

I wrote a quick guide to apply this plugin, you can check here

Thanks @abibacon and @tuanphan . I will go for the plugin approach!

@tuanphan could you help me with making product images to be contained ie be fully visible rather than cropped as they are right now?

You can use this page as an example - https://boyangeorgiev.com/store/p/azure-ascent-the-shard-at-twilight

I saw in the forum a similar discussion and tried using the following code as page injection but it doesn't work for me:
 

<style>

  .products.collection-content-wrapper .grid-item .grid-item-image {
  
    object-fit : contain !important;
    
    }
    
  </style>

So wondering if anyone could help me out on this one. 

best,
Bobby

8 minutes ago, tuanphan said:

Add to Design > Custom CSS

img.pdp-gallery-slides-image {
    object-fit: contain !important;
}

 

Thanks Tuan, that did the trick!