add photos & text to product page?

I need to add a PNG image to the left of my dropdowns on my product page and a bit of text directly underneath my photo gallery but my code is not working for some reason.

I cannot use the additional description text because the text needs to be directly under the photos. I've already used the additional description text.

Photo attached of what it should look like, I've already coded the rest with CSS.

password is DISTILLE

@Gmm398 Can you please share your site URL?

Which code did you use? I tried checking but can't find your code.

I removed it since it didn't work, for the text underneath I tried this first:

 .ProductItem-gallery-thumbnails:after {
    content: "test";
    font-size: 14px !important;
  }

This put the text in the same line as the thumbnails, I could not find the correct identifier to get it to be underneath the entire container. 

Then I tired a code you wrote elsewhere on squarespace, tweaked it a bit, and added the text as an image block. I suppose this might work for an image next my option dropdowns as well? But even with changing the padding I cannot seem to get the image to be closer underneath the thumbnails. This is the code:

<script>
$(document).ready(function(){
    $('section.ProductItem-additional .image-block').insertAfter('.ProductItem-gallery-thumbnails');
});
</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>

On 6/13/2024 at 11:18 PM, Gmm398 said:

I removed it since it didn't work, for the text underneath I tried this first:

 .ProductItem-gallery-thumbnails:after {
    content: "test";
    font-size: 14px !important;
  }

This put the text in the same line as the thumbnails, I could not find the correct identifier to get it to be underneath the entire container. 

Then I tired a code you wrote elsewhere on squarespace, tweaked it a bit, and added the text as an image block. I suppose this might work for an image next my option dropdowns as well? But even with changing the padding I cannot seem to get the image to be closer underneath the thumbnails. This is the code:

<script>
$(document).ready(function(){
    $('section.ProductItem-additional .image-block').insertAfter('.ProductItem-gallery-thumbnails');
});
</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>

 

#1. So you want to add text to this position (under thumbnails)?

#2. With your second problem, to make image closer to Thumbnail, add this code under your code

<style>
  .ProductItem-gallery-thumbnails {
    margin-bottom: 0px !important;
}
</style>

this works great thank you so much! any way to get the three line image to the left of the product variation dropdowns?

You can use this to Custom CSS box

div.variant-option, div.product-quantity-input {
    border-left: 5px solid #fff;
    padding-left: 2em;
}

You are amazing thank you so much! One last thing. When I added that, then my qty input box that I coded to be 50% to match the width of the other two inputs and my "add to cart" button now are slightly off when I change screen size... (at full screen they are in alignment), they are not responding exactly like the first to inputs. I tried making  all the boxes the same size by using percentages but that didn't work for the add to cart. It only responds to em or px? I tried making add to cart button is 30em and the others are 22em, but then they don't respond at all of course when I change window size. Anyway to get the add to cart and the QTY input to respond like the first two variants? 

On 6/23/2024 at 10:44 PM, Gmm398 said:

You are amazing thank you so much! One last thing. When I added that, then my qty input box that I coded to be 50% to match the width of the other two inputs and my "add to cart" button now are slightly off when I change screen size... (at full screen they are in alignment), they are not responding exactly like the first to inputs. I tried making  all the boxes the same size by using percentages but that didn't work for the add to cart. It only responds to em or px? I tried making add to cart button is 30em and the others are 22em, but then they don't respond at all of course when I change window size. Anyway to get the add to cart and the QTY input to respond like the first two variants? 

Can you take a screenshot of problem?

the QTY and add to cart now resize at different rates than the the top two since I made this change. I had coded them to be the same size with percentages initially.