Jump to content

Adding images under product photos on a product page

Go to solution Solved by tuanphan,

Recommended Posts

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.

Screenshot 2023-11-14 at 12.30.18 AM.png

Edited by alexandra_venusinpieces
Updated password for store access
Link to comment
  • 1 month later...
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
  • Solution
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>

image.thumb.png.36913a36d88fcea998003b8967851a90.png

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.