Categories and Subcategories

Category Page Overview

The category page organizes products into meaningful groups.

To access the category page, you can either do so from the pages panel or from the store panel from the left sidebar.

The category page is dynamic, meaning that it's a template for all the categories and subcategories you create in the store.

To navigate your categories, click the dropdown at the top.

Product Gallery Behavior

You'll notice that we have a product gallery at the top of each category page, but only some pages are displaying images.

If we take a look at how the product gallery widget has been configured, we'll see that it is set to show different categories, meaning that every category page will display only products or subcategories relevant to that group.

In addition, this product gallery has been configured to only show subcategories within that category.

Comparing Category Pages

Let's take a look at a different category page.

Because the category page is dynamic, every page will have the same widgets and the same configuration.

So when we look at the settings here, we see that similar to the category page that we just looked at, this one also is set to display subcategories.

Viewing Categories in the Store Admin

Let's hop into the store admin to look at the categories and subcategories in this store.

When we expand this category, we see that there are two subcategories nested inside it.

This explains why this category's page product gallery widget displayed content.

Let's look at this other category now.

This category does not have any subcategories.

If you take a look at its details, we'll see that it has only been assigned products, but no subcategories.

So that explains why the product gallery in this category page is not displaying any content, -- because there are no subcategories within this category.

Second Product Gallery Widget

Back on the category page, let's scroll down just a bit further.

You'll notice a second product gallery widget, and this one actually displays content.

Let's take a look at how this one has been set up.

This product gallery is set to display products, and as we just saw in the store admin, this category does contain products, which would explain why this product gallery widget displays content.

Live Site Behavior

But what does this look like on the actual live site?

Are we going to have an empty product gallery widget?

If we look at the site preview, you'll notice that this category page does not show that first product gallery that is empty in the editor.

Let's look at the editor and the preview link side by side.

You'll notice that the empty product gallery only displays in the editor, but does not appear in the preview or the live site.

This also happens with categories that don’t have any products and include only subcategories.

Key Takeaway

The key takeaway is that:

1)  As a best practice, your Category page should include two Product Gallery widgets:

• one configured to display subcategories, and
• another configured to display products.
  
  

2) And don’t worry if one of the galleries appears empty in the editor. Empty Product Gallery widgets won’t display on your live site.