24/7 Support: 800.608.6482


Try our new AI assistant by clicking the chat icon in the lower right corner.


Videos | Customizing A Category Header

Need to add content that is unique to a specific category? You can do that by editing the Category Header. This video shows you two ways to do just that.
ver.9.0 and later

Video Transcript

In this video we're going to show you how you can add some custom content to the top portion of your Category Display Page. Since we're working with a category, we're going to go into “Catalog” in the Store Admin and then click on “Categories” and then we want to select a Category we want to work with. I'm going to click into this “Hardback Book Lamps” category. To see the front side of the category you’re working on, you can click on this “More” button and you have this option that appears called “View on Live Store.” If you click on it another tab in your browser pops up and you can see what your category would look like to anyone who shopping on your website. Clicking back on this tab, you can see that we're back in the “Edit Category” page for the Hardback Book Lamps category. If you scroll down a little, you'll see an area called Header and Footer. There's a field for this categories header and a field for this categories footer. If you don't see these fields, this area might be collapsed. Notice that when I click on this Header bar, Header and Footer fields disappear. The same with all of these other bars.

If there are fields that you never use inside of the Miva Merchant Admin, you can collapse these areas and they will stay collapsed the next time you browse to this page in your Store Admin. So let's add something to this Categories Header. I'm going to type “This is where the category header content appears.” I'm going to click “Update” and when I go back to the store side and hit “Refresh.” you can see my edit load up in this area of the screen. This is where the category header contents appears. The category header can also take some HTML, so let me grab a snippet of code really quick and click “Update” to save my work and when I go back to the store and hit “Refresh” you can see that I now have a red rectangle that helps delineate where this category header loads onto the screen. Let me remove this code really quick. There's another way you can customize the top portion of a specific category without using Using HTML and that's with the Category Title. The Category Title allows you to upload an image to the top of your category screen. I went ahead and prepared an image in advance and will be adding this image to the top of this category. Let's go ahead and click the “Upload” button. When this box pops up, go ahead and click on the “Choose File” button. Browse to the image you want to upload, click “Choose,” “Upload” and then “Update” to save your work. Let’s go back to the store and hit “Refresh” and I now have a visual image for my category title. Notice that it is the category title it used to say Hardback Book Lamps up here in the header, but that header tag’s been swapped out for this image tag. And that's how you can customize your Category Headers.

Looking for Developer Docs?

We have a whole section for that, including: Developer Training Series, Template Language docs, Module Development tutorials and much, much more.

Head to the Developer Section

This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.


Copyright © 1997 – 2024 Miva®, Miva Merchant®, MivaPay®, MivaCon®, Camp Miva®, Miva Connect®, Miva, Inc. All Rights Reserved.