Replacing assets in the Assets panel

Today we're going to cover how to replace an asset in the Assets panel so that asset automatically updates everywhere it's being used on your site. This can be extremely helpful for global assets like logos that appear in multiple places. And it's not just images, it's also SVGs, Lottie, and Rive animations. Seems like a small thing, but it's actually a powerful workflow enhancer, especially for teams or individuals managing complex sites with a lot of media.

So let's jump in and see how it works in action. Here we are on this site and we have a few logos, and we want to replace this Acme Corp logo. We have a new logo that has a mark in front of it. So we have the logo here on the homepage, and we also have it on our About page down here. And then we also have a dedicated logo page with just the Acme Corp logo, a lot of them.

So what we want to do here is go to the Assets panel. We'll open it up to expand the panel. We have our logos in this Logos folder, and here we have our Acme Corp logo. But before you do that, make sure you have a backup of your current image somewhere, whether that's locally, in the cloud, or even in your wallet. Because once you replace it, it's not available in the Assets panel anymore.

The only way to get back the logo you're replacing is to go to the Backups over here, and then you can restore whatever backup you've set up already. But keep in mind, it's just a good practice to have backups of your stuff.

So we'll go back to our Assets panel, navigate back to our Logos folder, and back to our Acme Corp logo. What we're going to do is click the three little dots and choose Replace. We'll find our new logo mark and hit Open. And in the background you can see our asset was successfully replaced.

We'll close the panel here just to see a little better. The Acme Corp logo was replaced on our dedicated logo page. Let's go over to our About page, yep, replaced there too. And on the homepage? Replaced there as well.

So that's replacing an image.

Let's look at another example. This also works for replacing other file types, but there's one caveat for document file types where you're using the URL.

Let's go to our other site here. What we have here is a link that points to a PDF, and we want to replace that PDF. So we'll go to the Assets panel again, find our PDF, click the three little dots, choose Replace, and find V2 of that PDF. Open it. And just like that, our PDF was successfully replaced.

However, we updated the PDF, but we need to update the URL link as well. So we'll go into the component. We can see the URL field here on the site, or we can click the little wheel to access it too. We have this old link that we need to replace, so we'll go find our new link, copy it, then select all, delete, and paste in the new one.

Now that component has the updated PDF link.

This is why it's a good practice to make that link a component, so any content changes you make in one place apply everywhere it's used.

The key takeaway here is that what seems like a small thing can actually dramatically improve your workflow by allowing you to update assets without digging through every corner of your site to find all instances. You simply go in and replace that asset.

So keep up the good work. Go replace some assets if you need to, but most importantly, continue to explore and learn new things. We'll see you next time.