IndieMade Site Tutorial: How to Create a Category Index Page

As you grow your product offerings, store categories become increasingly important for both organization and navigation. You don't want your customer to have to click through four pages of bracelets when what she really wants is a necklace. Thanks to the category sidebar menu, that is included in any IndieMade theme, your customer can easily locate the category that best suits her needs.

The only downside to a sidebar menu is that a lot of people don't take the time to read. Their eyes move too quickly to pick up small text cues and this is an even bigger issue on a mobile device. What they do see are large images. That's what makes Instagram such a grabber or why it's best to include a large photo in your Facebook or Twitter social update.

If you think of each of your categories as an image with a link, it opens up a whole new world of possibilities. It will take a little handwork on your end, but if you follow these steps you can build your own category page in under a half hour. (Total time depends on how many categories you need and if you already have appropriate photos).

Creating a Category Index for Shoppers

Here is an example of what a completed category index looks like. Each photo and category title is linked to the category page for easy navigation.


Now, let's learn how to build it.

Step 1: Photos

Start by making a list of all of your categories. Six to nine categories is more than enough so stick with high level terms like Soaps, Bracelets, Women's Clothes, etc.

Now choose a photo to represent each of these categories. Photos should be between 350 pixels wide and 500 wide. The exact size will be determined by how many boxes across you want to use and potentially by the theme you've chosen. In the above example, which you can see full size here, the pictures are 350 wide by 250 tall. I like rectangular photos. If you don't, you can make them square or long, just make sure they're all the same size.

Step 2: Create Your Page

To create your category page, log on to your dashboard and click on "Content" in the top navigation bar. Then click on "Pages" in the side bar and "Add a New Page" in the center.

You can name this page anything you like, just remember that the name will show up in the navigation. If you're not going to complete the page in one sitting, uncheck the "visible" button on the Page report. Just remember to make the page visible when you're done.

Step 3: Create the Table

The structure that keeps all of your photos in a neat line is a table. For my example, I kept the dark table lines in so you could easily see the structure but you can remove the lines or make them lighter.

Here's how you create a table.

Click to edit your new page, type some text (phony text is fine for now, it's just a placeholder) then move your curser down a row.

Now click on the tiny table in the top row of the page toolbar (see image below).

When you click the table tool, another dialogue box opens. This is where you fill in your design preferences. Choose the number of rows and columns you need to cover all of your categories. For six categories I made three columns and four rows. Why four? Because you'll need a row under each row of photos for the names and links to each category. If your photos are self-explanatory, you can do without the text, but why not cover your bases?

Width: I set this to 900 but don't stress the number because the table will expand to fit your images. That's why it's important to crop and resize all of your photos to match before getting started. 

Height: Leave it blank and let the photos decide on the final height.

Borders and Cell Spacing

I created a dark border (2) so you can easily see the table for this tutorial. You can make the lines lighter by putting a 1 in the Border Size box. Remove the number and the lines will go away. You'll see them as you build but anyone viewing the page won't.

Set the alignment to center so your photos line up nicely and put a 1 in the Cell Spacing and Cell Padding. If you like more white space around your images, increase that number.

Now click "Ok" and your table appears. It should look like this:

Step 4: Insert Photos

Insert your category photos into each cell in the top row. To do this, click in the cell, then click the little painting in the top row of the toolbar (see earlier image).

Click "Upload" Tab -- "Browse" (browse for your image) -- "Send to Server"

Click "Image Info" tab

If you pre-sized your photos before uploading, you don't need to change the width or height. You can but it's cleaner if you prepare the photo first.

Leave the other boxes blank and click "Ok"

When you put your first picture in, the other cells are going to shrink. Don't worry. The table will expand again when you put in the other photos.

Now click in the next box over and repeat the process.

Remember: if you're creating more than one row, be sure to skip a row to allow for your category text.

Step 5: Text and Links

Once all of your pictures are in place, type the name of each category in the box BELOW each photo. You can flip this process and put the text above the photo but do not put the text in the box with the photo.

Next, open your website in a seperate tab. Locate the link for your first category and either click on it to get the URL or right click and select the URL.

Come back to your table, highlight the matching text, then click the "link" button in the second row of the page toolbar. (It's to the left of the flag.) Past the link in the popup and click "OK"

Repeat this process for each of your categories.

Linking Photos: If you want the photo to be linked to the category page as well, you can do this in the Image Properties box. Right click on the photo (while you're still editing the page), open Image Properties --> click the "Link" tab --> paste the category URL in the URL space.

Step 6: Publish the Page

When you're done with all the photos and links, fill in any text (go sparingly) on the page, then SAVE the page. If you made it invisible, remember to switch it back on. Use the Page dashboard to move the page link to the primary navigation or footer navigation.

If you want this category page to be your home page, go to Design --> Navigation (in sidebar) --> Home Page section. Click the name of your new page and hit save.

That's it! You just build a category index for your website. If you need to add or change any part of it in the future, simply edit the page in the admin. You can delete photos, upload new photos, even expand the table by changing the number of rows and columns. No need to start from scratch.

Ready to create your own visual index? Give it a try, then leave a link below so we can check out your work.

 

Resource category 

Comments

Laura Bracken (really and truly)

Really like the ability to have a categories page as my new landing page.

How do I change the name of (or make invisible) the tab that currently says "Jewelry Shop"?

Cynthia Boris

What ever you name the page should be your tab title.

Add new comment

If you need customer support, open a ticket for fastest response times.