Why does my Atlantic theme show a yellow box before loading images on mobile?

Store Design
1

Hi,

I have this website https://lovebirdnailco.myshopify.com

The problem is when loading in mobile version, before it loads the images, it shows a yellow box on each image, and then it loads the image. Is it possible to change this color from yellow to transparent, or white, so it is not so obvious?

Thanks for your help

2

Hello there

Yes, it’s possible to change the color of the placeholder image that shows before the actual image loads in a mobile version of your Shopify store. You can do this by using custom CSS to style the placeholder image.

/* Make the placeholder image transparent */
.product__image-wrapper::before {
  background-color: transparent;
}

This CSS targets the ::before pseudo-element of the .product__image-wrapper element, which is the element that shows the placeholder image. It sets the background-color property to transparent, which makes the placeholder image transparent.

If you want to change the color to white instead, you can use this CSS instead:

/* Make the placeholder image white */
.product__image-wrapper::before {
  background-color: #fff;
}

This CSS sets the background-color property to #fff, which makes the placeholder image white.

1 Like
3

Where do I input this custom code?