“Why don’t I see my new image?”
“Why don’t I see my new CSS style?”
It’s because of a browser behavior called caching.
The reason for this is that the default configuration of browsers (and Zen Cart) is to assume that you are a user, not a developer, so it tries to make your browsing experience faster by caching images. Caching an image means retrieving it one time from the webserver to your local computer, and then using the local copy next time the image is needed, thereby saving the time required to retrieve it.
You can clear the cached version of the current page by doing a hard refresh:
- On Windows, use Ctrl+Shift+R
- On Mac, use Cmd+Shift+R (or Cmd+Option+R on Safari)
- On most computers, hold SHIFT while clicking the Reload Icon with the mouse
For images, you can also right click on the image, select “Open Image in New Tab”, and do a hard refresh there.
Disabling Browser Cache
However, since you are acting as a developer while you work on your site, you may want to turn this behavior off. The way this is done is specific to every browser and environment, so you’ll have to do a web search to figure out how to do it with the tools you are working with.
The easiest way to get this working the first time is to use Google Chrome on a desktop computer, and follow these steps:
Right click and select Inspect.
Click the Network Tab
Check the box that says Disable Cache
With the Inspect window open, refresh the page being tested.
Once you have mastered this technique, you can figure out how to do it in other browsers and environments. It is particularly tedious to do this on a mobile device, so use a desktop computer until you have more experience doing this sort of thing.