Showit Image Alt Text (2025)

All right, I have an update for you and it is in regards to showit and their images.

So this is something that has existed for a while and not a lot of people talk about because honestly, it's just not great.

So I'm talking about images and image alt text, and this is only applicable to the Showit platform.

Any images on WordPress or even if you have ShowIt, does not matter.

So WordPress will be correct in how you've always assumed alt text shows up.

But when it comes to, showit, it's going to be a little bit different.

So I'm going to walk you through this.

Okay.

There is a handy little, accessibility plugin that you can look at that is called Silktide.

So you can just add this as a Chrome extension and then you can check this out for yourself.

So go to the page that you want to look at.

We just finally launched our website services page.

So feel free to browse it, and go over to the side and you will see all of these fun things, all about accessibility.

I could talk about accessibility forever.

In fact, you're actually going to see a massive update on our website to, address accessibility better and the colors.

Because right now, currently our beautiful orange and pink don't pass.

So you will see some new colors being integrated for that reason.

But I'm not here to talk about that today.

I am going to talk about alt text.

So if you click on alt text, this is going to show you all the alt text that is currently on your website.

So as you can see, there is a few things and it will tell you, okay, this is decorative.

This is a background image.

So you can't actually write alt text there.

It's decorative.

These show up as alt text, but I can tell you on the back end that they are actually embed codes.

Not alt text.

not traditional images.

So that's the before and after.

And then there's before and after.

So these four.

And then you get here.

And now we are again, another background image.

Another background image.

And then let's go down here.

Now we're at Instagram.

So all of these, the rest of these are all Instagram.

And that's it.

That is the only detected images on our website.

But as you can see, there's images all over.

And this is because what ShowIt does is show it in like the master code of their website has images set as div, which means that they are backgrounds, not actually sourced as images.

So if we want to change that and make sure that Our images actually function as images, then we have to do it a little bit differently.

Now I know this is a little bit frustrating because you in the back end of your website have already written alt text for all of these.

But it doesn't matter.

It doesn't show up because this isn't an image.

This is a background in the code of Showit.

So if you want to change this, this is what you are going to do and this is the information that you're going to need.

And I will include this as comments below this video so you can copy and paste.

So you are going to need the code right here.

And then this is what you are going to be filling in yourself.

You are going to need your image URL and you're going to need your alt text and then you're going to put it all together.

So how you find your image URL is you are going to go to your media library and here is where you are going to find all of your images.

So if I am looking for.

And again this is going to be we need to clean ours up.

But you know you're going to see a lot of stuff in here.

So if, for example, this is the image I want, I am just going to copy this link right here.

If for any reason yours is chaos and you can't find the image that you want to find, there is a fun way you can do this with the code.

So you are going to right click if yours works or if it doesn't like mine because your mouse sucks, you're going to go to Developer View Source and then.

sorry, take that back.

Ha.

you hear my Minnesota coming out.

okay, you are going to do inspect elements and then you're going to scroll to the image that you want to change.

So I'm going to click this, I'm going to copy this code that's highlighted in pink here and then I am going to find the URL slug hidden in here which is always going to be a fun thing like this.

So see static.showit.com and then it's going to end with PNG and then you can take that, verify that that's the image.

Boom, there you go.

Copy, paste and then that's what you are going to put up into this section here.

So then I am going to take that and I am going to put that into this section right here.

Paste URL.

I am going to paste in my alt text here.

So you can see I've written custom website design On Shopify for Primal Wellness holistic wellness products.

And that is showcasing that alt text.

And then this you just copy and paste in stays the same.

You can enter your own width and heights.

However it, we want it to be adjustable for desktop and mobile so that it can be responsive.

So doing it this way, doing with 100% and auto and, and auto for height allows you to just scale it and I will show you how that works.

So once you've created your code, you're going to copy and paste that.

You're going to go back to Showit and then wherever that image is, I want you to do add element, embed code.

Paste that code in here.

So you can see we have image source, we have our alt text and then we have the style which is the size.

You're going to hit save and boom.

there's your image.

You are just going to drag it and put it in place.

Same with desktop.

you are.

And because we have auto it is going to adjust for us so that you don't have to deal with the adjusting mobile and you can do custom code for mobile and desktop but it's just like makes things a little bit more hectic and we don't need to do that right, because this is already way more work than we want it to be for our images.

So anyways, get those situated however you want.

What I would do is I would delete your image then.

So the image that you actually have here, I would delete it.

If you want to keep it as a background, that's totally fine.

You can however, when show it, show it is aware of this issue and they are going to fix it.

We just don't know when, when they do fix it then you'll just have double happening there.

So it's totally fine if you want to leave it there because then you can go back and delete the embed, but your embed isn't actually going to mess anything up.

Your embed is going to be just fine.

So if I go ahead and delete that graphic now, all you're going to see here is the image and we're just going to, we'll have Courtney triple check this, make sure it's good.

We're going to hit publish and then we're going to wait for this.

We're going to go check it one more time with that Silk Tide Chrome extension to see if it picks it up.

So as soon as this publishes then we will do that nice and slow today because it's Sunday.

Okay, I'm going to exit out of the code here.

Reload this page.

Scroll, scroll, scroll down to the section I want here.

Now I'm.

And it scrolled me all the way back up.

Anyways, check that out.

There's my image.

That's what I want to see.

I want to see it show up here, and I want to see it pull in that alt text that I had already written.

So voila.

Now this is how you will do alt text if you want it on showit.

Now, I know a lot of you are probably like, what the heck?

This is crazy.

And this is going to take so much work.

I don't need.

You do not need to do this for every single image on your website because of how time consuming it is and because ShowIt is aware of the issue and ShowIt will be updating it at some point.

We just don't know when.

What I would say is you should prioritize really important images that you want to get found online.

So portfolios could be really good.

Your services page, if you have work.

So, examples of your work that could be a really good thing to update.

There could be just a few images here or there.

Now, this is something that we don't at the moment even have integrated into our website services project because of the length of time that this is taking and because, like I just said, I don't think this should be done for every single image.

I think it really depends on what image you want this to be done for.

So this can be something that anyone can go back in and update.

At the end of the day, you still need all of your content in your media library.

It's an, easy ish switch.

It just takes time.

So.

All right.

I hope that answered some questions on how you do it and didn't cause too much frustration.

No.

At the end of the day, show what's fixing it, and it will be fixed eventually.

So that's all.

All right, thanks, guys.

Bye.