alexandra_venusinpieces Posted November 14, 2023 Share Posted November 14, 2023 (edited) I would like to add an image underneath the product photo carousel on the right-hand side of the product page. Ideally, I'd like this image to be inline with the product photo block above it, and I'd like to have the option of adding a photo here on all product pages. The candle pages are most important, however, and they are all under the Shop category "Candles". The shop is currently password protected with the password "adminonlyvip". Note: I already have custom code in place to move the Accordion block below the product description, as long as the Accordion block is the last item in the Additional Info area. Edited November 14, 2023 by alexandra_venusinpieces Updated password for store access Link to comment
tuanphan Posted November 18, 2023 Share Posted November 18, 2023 Hi, What is site url? My approach is you add an Image Block to Additional Info, then we will use code to move the image to that position 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
alexandra_venusinpieces Posted January 14 Author Share Posted January 14 Hi! My site URL is venusinpieces.com Link to comment
tuanphan Posted January 15 Share Posted January 15 On 1/14/2024 at 2:07 PM, alexandra_venusinpieces said: Hi! My site URL is venusinpieces.com You will use same image for all products or different? 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
alexandra_venusinpieces Posted January 15 Author Share Posted January 15 6 hours ago, tuanphan said: You will use same image for all products or different? Different images. There are four different image options that could go there. Link to comment
tuanphan Posted January 16 Share Posted January 16 15 hours ago, alexandra_venusinpieces said: Different images. There are four different image options that could go there. So my approach is add Image Block to Additional Info, then use jQuery code to move it under Product Photo You can do this for 1 product then share product url, we can check & give the code 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
alexandra_venusinpieces Posted January 16 Author Share Posted January 16 10 hours ago, tuanphan said: So my approach is add Image Block to Additional Info, then use jQuery code to move it under Product Photo You can do this for 1 product then share product url, we can check & give the code Thank you! Here's a link to a product with an image in the Additional Info section: https://www.venusinpieces.com/shop/p/o-holy-night-holiday-clean-candle Link to comment
Solution tuanphan Posted January 20 Solution Share Posted January 20 On 1/17/2024 at 2:33 AM, alexandra_venusinpieces said: Thank you! Here's a link to a product with an image in the Additional Info section: https://www.venusinpieces.com/shop/p/o-holy-night-holiday-clean-candle Add to Last Line in Code Injection > Footer <script> $(document).ready(function(){ $('section.ProductItem-additional .image-block').insertAfter('.ProductItem-gallery-slides'); }); </script> <style> .ProductItem-gallery-slides { overflow: visible !important; } .ProductItem-gallery { overflow: visible !important; flex-wrap: wrap; } .ProductItem-gallery .image-block { width: 100% !important; flex: 1 1 100% !important; } .ProductItem-gallery .image-block .has-aspect-ratio { padding-bottom: 40% !important; } </style> alexandra_venusinpieces 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
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment