Jump to content

Setting a default image for all products that currently don't have images

Recommended Posts

Wondering if it's possible to set an "image unavailable" image to all products with no images until they have their own images. I have tried assigning the "image available image" to one product to get a squarespace Hosted Image URL in the CSV, then exported  a squarespace CSV with other products that have no image but copying that url to other products but it does not update that image to the existing products.

Link to comment
  • Replies 9
  • Views 962
  • Created
  • Last Reply

Top Posters In This Topic

1 hour ago, tuanphan said:

I think we can try use CSS to do this. If you share link to store page & let me know some "unavailable" products, we can check easier

Hi @tuanphan the site is still under construction so we are using the default URL
https://caterpillar-octahedron-ezns.squarespace.com/
temporary password is Chefmaster@1234


Here is are a few products that have no image:
https://caterpillar-octahedron-ezns.squarespace.com/shop/p/cardboard-cone-small-500pcctn

https://caterpillar-octahedron-ezns.squarespace.com/shop/p/pla-coated-scoop-cup-12-oz-1000pcctn
https://caterpillar-octahedron-ezns.squarespace.com/shop/p/chips-box-large-1000pcctn

and here is the correct image:

https://images.squarespace-cdn.com/content/v1/6541f43d1e536d4a5a6f63e4/1701745149754-NG3P9BAMX4TBBWQXGYP8/Image_Unavailable.jpg

as seen on pages like so:

https://caterpillar-octahedron-ezns.squarespace.com/shop/p/tray-babybrown-corrugated-plainbrown-900pcctn

Link to comment
On 3/11/2024 at 9:35 AM, marcus.gibbs said:

I still see images (image unavailable image) on 3 products you sent. Can you share link to a product with no image?

 

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
12 hours ago, tuanphan said:

I still see images (image unavailable image) on 3 products you sent. Can you share link to a product with no image?

 

@tuanphan Sorry about that, some were updated manually in that time, here's some that haven't been updated yet

 

https://caterpillar-octahedron-ezns.squarespace.com/shop/p/pla-coated-scoop-cup-12-oz-1000pcctn

https://caterpillar-octahedron-ezns.squarespace.com/shop/p/chips-box-large-1000pcctn

https://caterpillar-octahedron-ezns.squarespace.com/shop/p/brown-corrugated-square-catering-tray-medium-100ctn

Link to comment

Chefmaster@1234

Try this code to Website > Website Tools > Custom CSS > Then check again other products to see if it work properly or not

section.ProductItem-gallery {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6541f43d1e536d4a5a6f63e4/1701745149754-NG3P9BAMX4TBBWQXGYP8/Image_Unavailable.jpg?format=1500w);
    background-size: cover;
    display: flex;
    height: 500px;
    background-position: center center;
    background-repeat: no-repeat;
}

 

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
On 3/13/2024 at 4:51 PM, tuanphan said:

Chefmaster@1234

Try this code to Website > Website Tools > Custom CSS > Then check again other products to see if it work properly or not

section.ProductItem-gallery {
    background-image: url(https://images.squarespace-cdn.com/content/v1/6541f43d1e536d4a5a6f63e4/1701745149754-NG3P9BAMX4TBBWQXGYP8/Image_Unavailable.jpg?format=1500w);
    background-size: cover;
    display: flex;
    height: 500px;
    background-position: center center;
    background-repeat: no-repeat;
}

 

@tuanphan Hi Tuan, thanks that works perfectly for the individual product pages as seen here

image.thumb.png.774ce5a230b1ff01ca7bb02153cc1e7b.png

 

is it possible to have the same effect in summary blocks though? Not too sure setting a

 background-image

 would work as there's no image box shown

image.thumb.png.89d3ed797d81c07de38741f799bba111.png

 

Link to comment
On 3/15/2024 at 10:10 AM, marcus.gibbs said:

@tuanphan Hi Tuan, thanks that works perfectly for the individual product pages as seen here

image.thumb.png.774ce5a230b1ff01ca7bb02153cc1e7b.png

 

is it possible to have the same effect in summary blocks though? Not too sure setting a

 background-image

 would work as there's no image box shown

image.thumb.png.89d3ed797d81c07de38741f799bba111.png

 

Use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
    $('.grid-image-wrapper').not('img').append('<img class="image-una" src="https://images.squarespace-cdn.com/content/v1/6541f43d1e536d4a5a6f63e4/1701745149754-NG3P9BAMX4TBBWQXGYP8/Image_Unavailable.jpg?format=500w" width="300px" height="300px"/>');
});
</script>

 

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
  • 2 weeks later...
On 3/16/2024 at 5:01 PM, tuanphan said:

Use this code to bottom of Code Injection > Footer

<script>
$(document).ready(function(){
    $('.grid-image-wrapper').not('img').append('<img class="image-una" src="https://images.squarespace-cdn.com/content/v1/6541f43d1e536d4a5a6f63e4/1701745149754-NG3P9BAMX4TBBWQXGYP8/Image_Unavailable.jpg?format=500w" width="300px" height="300px"/>');
});
</script>

 

Hi @tuanphan this one didn't seem to work for us. The empty products still appear blank on summary blocks

image.thumb.png.488674411e8555c374973492038322c4.png

On another note with the previous code that does work on the product pages, while it does work it introduces the problem of seeing "image unavailable" until the image loads as well as showing the background behind it when the image scales due to responsiveness like so:

image.thumb.png.3cf3835fd002f60fc23f4ecf111700db.png

Any way to set it so that it only applies the background if there's no image?

Link to comment
On 3/26/2024 at 12:58 PM, marcus.gibbs said:

Hi @tuanphan this one didn't seem to work for us. The empty products still appear blank on summary blocks

image.thumb.png.488674411e8555c374973492038322c4.png

On another note with the previous code that does work on the product pages, while it does work it introduces the problem of seeing "image unavailable" until the image loads as well as showing the background behind it when the image scales due to responsiveness like so:

image.thumb.png.3cf3835fd002f60fc23f4ecf111700db.png

Any way to set it so that it only applies the background if there's no image?

Summary Block will require a different code. Can you share link to page where you use summary?

with product page, you can remove code, I will test again new 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

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.