Estimated reading time: 10 minutes
Keeping your site graphics updated is a small but important task! It lets your users know that your site is active, monitored, and thriving. The banners on your site are also a great way to celebrate seasons, broadcast new product lines, announce sales, and more. We want to show you how to update banners in Miva 10. It’s a quick and inexpensive way to add value to your store.
Different Banner Types in Miva 10
Depending on who built your store, and the design, you may have several different types of banners. Each site will use images of different sizes, maybe call them different things, and link them to different places.
That’s actually the joy of site banners. You have a ton of customizability at your fingertips, allowing you to change the look and feel of your site on a whim. And, it’s really easy to update banners.
Hero Images
The big showstopper banner that users see immediately upon clicking to your homepage is called the hero. Some sites have multiple hero images and rotate between them; some sites have one massive hero image that takes up much of the primary view of the site. There is no hard and fast rule for what type of hero image is best.
Feature Images
Your site may have a “featured” section. Often, these are smaller images, maybe tiled 2 or 3 across the homepage, that often highlight specific categories. Despite being much smaller than a hero image, they are still considered banners and you update them the same way.
Global Promo Images
A great way to broadcast a message store-wide, and not just on the homepage, is with a global promotional image. They are generally smaller and less obtrusive than your average hero image, but function largely the same way.
Global Site Headers
These are different from a global promo image, in that there isn’t actually an image involved at all. A colored bar running across the top of your site, the global site header will be present on every page. These are updated by editing a text-based message. They can still link to other pages, and can prompt sales and other important messages, but are less stylistic and more information-focused.
How To Update Your Banners
Besides being text-based, the global site headers are also changed differently than the other image based banners. Both, however, are updated by accessing your theme components. In Miva 9 versions, this is found under the ReadyTheme section of your admin. Otherwise, the steps are pretty much the same.
With the launch of the new Miva 10, you’ll be able to find these banners by heading to your User Interface section, and from there, into Theme Components. Follow along the written step-by-step guide and the videos below.
Access Your Theme Components
To access both your image-based and text-based banners, log into your Miva 10 admin and select User Interface from the left navigation menu. We’ll start with walking through how to change an image banner.
Accessing and Viewing Your Image Banners
From the new left-hand menu, select Theme Components, then Images.
You will be shown a list of all site images that have been coded into your design. You’ll be able to see a thumbnail image of the banners you currently have uploaded, as well as the code/name, where the banner links to, whether the banner is active, and a few other options.
Removing Banners
When making changes in this section, it’s important not to Delete any of the items unless you have been specifically instructed by your developer.
If you do accidentally delete one of these images, it could break the appearance of your site. It is fixable, but you may need your developer to help. If you want to remove an image component from your site, use the Active toggles.
For example, those that use a Global Promo image banner may only want the banner to be visible when there’s an active sale. Once the sale is done, you can easily hide the banner by toggling the image to Inactive. This action is easily reversible.
Editing/Updating an Image Banner
In order to make changes to an image banner, start by finding the one you need to update. Select the Name of the item by clicking on the blue text link. That will open a new window.
Let’s break down what we see in this window.
- A – Code & Name. These fields will display the image component’s code and name that were put in place by your developer. These don’t need to be changed.
- B – Image preview. This will show you a preview of the current uploaded image.
- C – Image upload. This field will show you the current image path name. There is also the upload button. Clicking the Select Image button will open a new window that accesses the Miva image machine. You can upload and select your banner image here.
- D – Alt text. Enter your descriptive text here. It helps with SEO as well as site accessibility for the visually impaired. Provide a short description of the image and the banner details.
- E – Sizing. You have the option of making the image conform to a specified size (in pixels), or using the image’s dimensions.
- F – Link options. You can customize where the banner takes your users when they click on it. Choose the link type (Category, product, page, or other URL), and select the specific link destination using the Look Up button.
- G – CSS. This is another section you don’t need to worry about. Your developers will have this information filled in, when necessary.
Example Walkthrough of Updating an Image Banner
In this case, we’re editing the site’s hero image. It currently doesn’t have anything uploaded. Once the editing window is open, click the Select Image button and find the file from your computer.
Fill out your Alt text, assign an image size if necessary, or choose to use your file’s original sizing. The size of the banner will depend on your unique site design.
Choose where you’d like the banner to link to. You can also choose to not have the banner link anywhere if you’d like. It all depends on your own site setup and personal preferences. Here, we have the banner linking to the Contact page. Generally speaking, you can leave Link Target set to Self.
Finally, click Save and refresh your site to see your newly updated banner.
Editing/Updating a Text Banner
The process of changing a text-based banner begins the same way, but is much more brief. You don’t really have any options to change; it’s a simple matter of typing in new text, and avoiding the code (if you aren’t comfortable with updating it yourself).
Start, once again, by accessing Theme Components then Banners. Locate and select the banner you’d like to update. If your site was designed by Glendale Designs, it will likely have something like “promo” or “global” in the title.
As before, clicking the item name will open a new window. You only need to be concerned with the text in the Message field, and the Link option.
Edit your text, change the link destination if needed, and save! There is likely already some html code in this box to stylize the text. If you aren’t familiar or comfortable with html, simply avoid the code, and change the message text.
Now you’ve got a brand new global message displaying at the top of your site. Be aware of how much text you’re entering into a text-based global site header. It’s made for a limited amount of text; too much, and it will wrap the text and change the header size.
Adding and Updating Banners on Your Site
If you follow along with the steps above, you can change your banners as frequently as you can get them made! They can be a really fun way to promote a sale or product line, or even just further develop your brand’s voice.
Have fun with your banners, make sure you view and test (by clicking them) when you make any changes, and always spell check. If you want to add more banners to your site (like the global promo image banner), or you want a hand updating your existing ones, let us know and we’ll be happy to help.