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

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.

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

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

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

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

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

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

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;
}

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

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

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

 

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

 

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>

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

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:

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

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

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:

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