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

Botiga Pro extends the mobile Off-Canvas Menu component with a premium option that displays a Categories tab next to the mobile menu to show an easily accessible list of your product categories.

With the off-canvas product category navigation feature, you can better support your mobile users by making it easier to navigate your products on smartphone and tablet devices.

You can add a product category navigation to your off-canvas menu in two simple steps:

1. Open the Off-Canvas Menu Options

You can enable the product category navigation for mobile and tablet users from the Customizer.

Go to Appearance > Customize > Header > Header Builder, switch to mobile editing view, and add/edit the Off-Canvas Menu:

2. Configure the Settings

The off-canvas menu settings will show up in the left sidebar:

Mobile Offcanvas menu, general options
Mobile offcanvas menu, style options

Here are the main options you can customize if you want to (however, note that each option comes with a sensible default, so the off-canvas product category navigation works out of the box, too):

General Options

  1. Display Shop Categories: Displays the Categories tab in the mobile off-canvas menu.
  2. Exclude Categories: If you want to exclude one or more categories from the navigation, add the category IDs as a comma-separated list (see how to find the product category IDs in WooCommerce).

Styling Options

  1. Text Color: Controls the colors of the headings and menu items of the off-canvas menu.
  2. Background Color: Controls the background colors of the headings and menu items of the off-canvas menu.
  3. Border Color: Controls the border colors of the headings and menu items of the off-canvas menu.