Customize the design of your site’s category navigation

false

Customize the design of your site’s category navigation

Last updated August 10, 2026 17:35

Style the look and feel of your site’s navigation menu.

After you add categories to your products, they appear on a navigation menu on the landing page that customers use to find the products they're interested in. In both versions, category navigation:

  • Only displays after you've added at least one category.
  • Doesn't display on product details pages.
  • Displays all categories, even those linked to hidden products.

How you customize category navigation depends on your site’s version.

Category navigation can display at the top of your store page, or in a sidebar. On mobile devices, category navigation always displays at the top.

The category navigation font follows the paragraph style. The color follows the Category nav tweak under Products: Basic Grid in Site styles.

To change the position, open the section styles and click the Design tab. Next to Menu placement, select Side or Top.

To change the order of the navigation, click and drag the categories in the category manager. Depending on the position, subcategories display in a nested menu.

  • Side: Subcategories display in a nested menu on the store page, and on filtered category pages.
  • Top: Subcategories display on the main filtered category page, but not filtered subcategory pages.

To change the menu style, open the section styles and click the Design tab. Next to Categories style, select Dropdown, Subnav, or Buttons.

To hide the category navigation, open the category settings and switch off the toggle beside Filter visibility. Repeat this for every category.

The category navigation displays alphabetically. Which style options are available depend on your site’s template family and its store page type.

Note: Galapagos and Supply follow different style tweaks. You can’t hide the category navigation in these templates.

Style categories under the Products: Sort + Filter site styles section (Advanced store pages) or the Products site styles section (Classic store pages), as applicable.

Style description

  • Hide category navigation
  • Advanced: Display: hide
  • Classic: Uncheck Show category navigation
  • Enable, disable, and align category navigation
  • Advanced: Display: top, left side, right side, hide
  • Set the width if the category navigation is on the left or right.
  • Advanced: Width
  • Change the space below the navigation.
  • Advanced: Margin
  • Change the space between each item in the row
  • Advanced: Item spacing
  • Set the text alignment
  • Advanced: Alignment: left, center, right
  • Set the navigation font
  • Advanced: Font
  • Classic: Category nav font (Not available in Bedford, Five, Ishimoto, Montauk, and Native)
  • Set the navigation color
  • Advanced: Color
  • Classic: Category nav color (Not available in Bedford, Five, Ishimoto, Montauk, and Native)
  • Choose the color links display on hover
  • Advanced: Active color
  • Classic: Category nav active color (Not available in Bedford, Five, Ishimoto, Montauk, and Native)

Was this article helpful?

Yes No

0 out of 0 found this helpful

Yes No

Customize the design of your site’s category navigation