Jump to content

Make fade PNG IMAGES - e commerce products

Recommended Posts

Hi there,

I have loaded all my products images in PNG format (people wearing clothe without background). So the pbm I have now is that everytime the second picture appears, we can see the first one underneath! So I have the option to reload all the pictures in JPG and keep the first one in PNG. But it will take me a loooooOOOOOOOooooooooong time to redo all that!!!!

So i was wondering if it could be the solution to add a fading option on my product images galery in order to make disappear the images everytimes a new one appears.

Let me know if i can add a code somewhere to make my images without background fading slowly when another picture of the galery appear just behind it ?

Thank you very much for your time and help 🙂

Link to comment
  • Replies 5
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

Please post the URL for a page on your site where we can see your issue.

If your site is not public please set up a site-wide password, if you've not already done so.

Post the password here.

Adding a site-wide password is not a security breach. Please read the documentation at the link provided to understand how it works.

Please read the documentation at the link provided on how to share a link to your site to understand how it works. A link to the backend of the your site won’t work for us, i.e. a url that contains /config/.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Thank you for your reply !
Unfortunately I can't share the product yet. Here are the screen shot enclosed. Let me know if you understand better 🙂 

First picture, then the 2nd picture with the first one still visible underneath, then the galery with all the pictures that i'd like to make them fade each time a new picture appears.

Capture d’écran 2021-12-01 à 15.52.48.png

Capture d’écran 2021-12-01 à 15.52.55.png

Capture d’écran 2021-12-01 à 15.53.04.png

Link to comment

I understood the general problem. We need to be able to work with the site.

It's like going to the auto mechanic and saying fix my car without bringing in the car.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

Add the following to Store Settings > Advanced > Page Header Code Injection for the store page.

<style>

  .tweak-product-basic-item-gallery-design-slideshow .ProductItem-gallery-slides-item {
  
    background-color : red;
    
    }
    
  </style>

This is for v7.1.

Change the background color to suit your need.

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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.