Jump to content

add photos & text to product page?

Recommended Posts

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

 

 

 

thumbnail_private shop.jpeg

Link to comment
  • Replies 4
  • Views 158
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

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>

 

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.