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!

On 5/6/2023 at 3:54 AM, tuanphan said:

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

 

Hi Tuan, could I get the code to move the accordion from the footer into all products please? Thanks!

On 3/15/2024 at 7:24 PM, threadsonline said:

Hi Tuan, could I get the code to move the accordion from the footer into all products please? Thanks!

Which position? Under add to cart or? If add to cart, use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

If another position, let me know which position, I can adjust code easier

5 hours ago, tuanphan said:

Which position? Under add to cart or? If add to cart, use this code to Code Injection > Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

If another position, let me know which position, I can adjust code easier

Hey, thanks for this, this is the order I would like the page to display (top to bottom):

1. Product image, 2. Product Title, 3. Product Price & Sale Price, 4. Description, 5. Variants, 6. Add to cart, 7. Accordion 

Also this code worked but there is some conflict as I already have another accordion in my footer as well as this one. Can we customise the code to only display 1 accordion on the product page? The accordion at the bottom of my footer with 'delivery option' & 'returns policy' - this is the one I would like to display on my product pages. (desktop version is fine by the way as it is showing the correct accordion, but mobile display is displaying both accordions that are in my footer which is incorrect).

URL: https://threadsonline.co.uk/store/p/off-white-out-of-office-sneakers

On 3/18/2024 at 10:24 PM, threadsonline said:

Hey, thanks for this, this is the order I would like the page to display (top to bottom):

1. Product image, 2. Product Title, 3. Product Price & Sale Price, 4. Description, 5. Variants, 6. Add to cart, 7. Accordion 

Also this code worked but there is some conflict as I already have another accordion in my footer as well as this one. Can we customise the code to only display 1 accordion on the product page? The accordion at the bottom of my footer with 'delivery option' & 'returns policy' - this is the one I would like to display on my product pages. (desktop version is fine by the way as it is showing the correct accordion, but mobile display is displaying both accordions that are in my footer which is incorrect).

URL: https://threadsonline.co.uk/store/p/off-white-out-of-office-sneakers

 

Currently I don't see any accordion on this product. Can you check it again?

https://threadsonline.co.uk/store/p/off-white-out-of-office-sneakers

5 hours ago, tuanphan said:

Currently I don't see any accordion on this product. Can you check it again?

https://threadsonline.co.uk/store/p/off-white-out-of-office-sneakers

Hi Tuan, please check now. I previously removed it as the product page displays incorrect on mobile, because both of the accordions that are in my footer show up, but i just want the one that says 'delivery options' and 'returns policy' to show up on the product page.. 

On 3/21/2024 at 10:09 PM, threadsonline said:

Hi Tuan, please check now. I previously removed it as the product page displays incorrect on mobile, because both of the accordions that are in my footer show up, but i just want the one that says 'delivery options' and 'returns policy' to show up on the product page.. 

On Mobile, you can use this code to Website > Website Tools > Custom CSS to remove incorrect accordion

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1708718696832_23670 {
    display: none;
}
}

5 hours ago, tuanphan said:

On Mobile, you can use this code to Website > Website Tools > Custom CSS to remove incorrect accordion

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1708718696832_23670 {
    display: none;
}
}

 

Yes that's perfect thank you! 🙂

Could you help me adjust the layout of the product page on mobile display only?

1. I would like the product image height to decrease, it takes up the whole page at the moment.

2. Move the description so it is in between the price and variant boxes.

3. Add a bit more padding in between the 'add to cart button' and the accordion.

Thanks so much 🙂 

11 hours ago, tuanphan said:

On Mobile, you can use this code to Website > Website Tools > Custom CSS to remove incorrect accordion

@media screen and (max-width:991px) {
div#block-yui_3_17_2_1_1708718696832_23670 {
    display: none;
}
}

 

Hi Tuan, I have just realised it has now hidden the accordion from the footer as well as the product page, but I need it to display in the footer.

On 3/25/2024 at 8:38 PM, threadsonline said:

Yes that's perfect thank you! 🙂

Could you help me adjust the layout of the product page on mobile display only?

1. I would like the product image height to decrease, it takes up the whole page at the moment.

2. Move the description so it is in between the price and variant boxes.

3. Add a bit more padding in between the 'add to cart button' and the accordion.

Thanks so much 🙂 

Use this CSS code

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 40% !important;
}
 div.ProductItem-details-excerpt {
    order: 1 !important;
}
div.sqs-add-to-cart-button-wrapper .accordion-block {
    margin-top: 100px;
}
}

11 hours ago, tuanphan said:

Use this CSS code

@media screen and (max-width:767px) {
.tweak-product-basic-item-gallery-aspect-ratio-34-three-four-vertical .ProductItem-gallery-slides:before {
    padding-bottom: 40% !important;
}
 div.ProductItem-details-excerpt {
    order: 1 !important;
}
div.sqs-add-to-cart-button-wrapper .accordion-block {
    margin-top: 100px;
}
}

 

Hi Tuan, all worked great thank you! Could you advise how I decrease the gap between the description & price/title on mobile please?

Also in regards to the accordion I think you may have missed my message above. Your code removed the additional accordion from my product page which I wanted, but it has also hidden it from the footer as well (you can see there is a big white gap on mobile display in the footer, this is where the accordion is but the ode has hidden it). How can I get it to show only in the footer?

On 3/28/2024 at 3:11 AM, threadsonline said:

Hi Tuan, all worked great thank you! Could you advise how I decrease the gap between the description & price/title on mobile please?

Also in regards to the accordion I think you may have missed my message above. Your code removed the additional accordion from my product page which I wanted, but it has also hidden it from the footer as well (you can see there is a big white gap on mobile display in the footer, this is where the accordion is but the ode has hidden it). How can I get it to show only in the footer?

You can use this CSS code

@media screen and (max-width:767px) {
div.ProductItem-product-price, div.ProductItem-product-price div {
    margin-bottom: 0px !important;
}
}

With accordion, which code are you referring to?

On 3/29/2024 at 8:26 AM, tuanphan said:

You can use this CSS code

@media screen and (max-width:767px) {
div.ProductItem-product-price, div.ProductItem-product-price div {
    margin-bottom: 0px !important;
}
}

With accordion, which code are you referring to?

Thanks 🙂 In regards to the accordion issue, I put this code into the footer injection in order to move the accordion from the footer into the product page:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

But the issue is - I have 2 accordions in my footer but only want one of them to show on the product page. We have managed to do this so far, but now the accordion I actually want showing in my footer (in mobile view only) has disappeared. You can see on mobile view that there is a big white gap in my footer, this is where the accordion is but it is hidden for some reason.

1 hour ago, threadsonline said:

Thanks 🙂 In regards to the accordion issue, I put this code into the footer injection in order to move the accordion from the footer into the product page:

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
jQuery(document).ready(function($){
  $('footer.sections .accordion-block').appendTo('.sqs-add-to-cart-button-wrapper');
})
</script>

 

But the issue is - I have 2 accordions in my footer but only want one of them to show on the product page. We have managed to do this so far, but now the accordion I actually want showing in my footer (in mobile view only) has disappeared. You can see on mobile view that there is a big white gap in my footer, this is where the accordion is but it is hidden for some reason.

Hi @tuanphan - after an hour of tweaks I have fixed the above issue, thanks for all your help anyway!