[Pro] Off-Canvas Product Category Navigation on Mobile/Tablet Devices

Want mobile shoppers to find product categories faster? Botiga Pro extends the mobile Off-Canvas Menu with a Categories tab so visitors on phones and tablets can browse your product categories without leaving the menu.

In this guide, we’ll walk you through how to enable the off-canvas product category navigation in Botiga Pro.

Before you get started, make sure you’ve installed and activated the Botiga theme on your WordPress site. If you’re using features from Botiga Pro, ensure that both the Botiga theme and the Botiga Pro plugin are installed and active. This feature requires Botiga Pro.

Off-canvas product category navigation on a mobile device

1. Opening the Off-Canvas Menu Options

From your admin area, go to Appearance >> Customize >> Header >> Header Builder, switch to mobile editing view, and add or edit the Off-Canvas Menu component.

Editing the Off-Canvas Menu component in the header builder

2. Configuring the Settings

The off-canvas menu settings show up in the left sidebar. Every option has a sensible default, so the category navigation works out of the box if you’d rather not configure anything.

Off-canvas menu general options
Off-canvas menu style options

General Options

  1. Display Shop Categories: shows the Categories tab in the mobile off-canvas menu.
  2. Exclude Categories: to exclude categories from the navigation, add the category IDs as a comma-separated list. See WooCommerce’s docs on finding product category IDs.

Styling Options

  1. Text Color: controls the colors of headings and menu items.
  2. Background Color: controls the background colors of headings and menu items.
  3. Border Color: controls the border colors of headings and menu items.

Frequently Asked Questions

Below, we’ve answered some of the most common questions about the off-canvas product category navigation in Botiga Pro.

Do I need Botiga Pro for this feature?

Yes. The Categories tab in the Off-Canvas Menu is a Botiga Pro feature. Make sure both the Botiga theme and Botiga Pro plugin are installed and active.

Can I exclude specific categories from the navigation?

Yes. Add the category IDs as a comma-separated list in the Exclude Categories option. Find the IDs in your WooCommerce product categories list.

Will the category navigation show on desktop too?

No. This feature is specifically for the mobile Off-Canvas Menu component, which appears on tablet and mobile devices. For desktop navigation, use a regular menu or mega menu in the header.

That’s it! You’ve successfully enabled the off-canvas product category navigation in Botiga Pro.

Next, would you like to refine the rest of your mobile header? Check out our guide on using the header and footer builder to learn more.