BobbyGeorgiev Posted May 1, 2023 Share Posted May 1, 2023 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 Photographer and 3D Animation Artist - https://boyangeorgiev.com/ Link to comment
abibacon Posted May 3, 2023 Share Posted May 3, 2023 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) Squarespace Developer based in Hampshire, England If you'd like to make a contribution for my time you can Buy Me A Coffee. Reach out for Custom Coding - abibacon.com Developer & Support Specialist at will-myers.com (Affiliate Link) Link to comment
tuanphan Posted May 6, 2023 Share Posted May 6, 2023 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 abibacon 1 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
BobbyGeorgiev Posted May 9, 2023 Author Share Posted May 9, 2023 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 Photographer and 3D Animation Artist - https://boyangeorgiev.com/ Link to comment
Solution tuanphan Posted May 11, 2023 Solution Share Posted May 11, 2023 On 5/10/2023 at 1:10 AM, BobbyGeorgiev said: 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 Add to Design > Custom CSS img.pdp-gallery-slides-image { object-fit: contain !important; } BobbyGeorgiev 1 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
BobbyGeorgiev Posted May 11, 2023 Author Share Posted May 11, 2023 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! Photographer and 3D Animation Artist - https://boyangeorgiev.com/ Link to comment
threadsonline Posted March 15 Share Posted March 15 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! Link to comment
tuanphan Posted March 18 Share Posted March 18 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 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
threadsonline Posted March 18 Share Posted March 18 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 Link to comment
tuanphan Posted March 21 Share Posted March 21 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 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
threadsonline Posted March 21 Share Posted March 21 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.. Link to comment
tuanphan Posted March 25 Share Posted March 25 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; } } 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
threadsonline Posted March 25 Share Posted March 25 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 🙂 Link to comment
threadsonline Posted March 25 Share Posted March 25 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. Link to comment
tuanphan Posted March 27 Share Posted March 27 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; } } threadsonline 1 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
threadsonline Posted March 27 Share Posted March 27 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? Link to comment
tuanphan Posted March 29 Share Posted March 29 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? 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
threadsonline Posted March 30 Share Posted March 30 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. Link to comment
threadsonline Posted March 30 Share Posted March 30 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! tuanphan 1 Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment