Knowledge base
Video tutorials
Try searching for:
Recently viewed articles:

Table of contents

Adding categories menu to a custom site

To add a menu with your store categories to a website where your Ecwid store is added, use the Category Navigation Menu widget. It's a piece of a code that should be pasted to a website source code. If you have many nested categories, the menu will help shoppers quickly find the category they need:Categories_menu__1_.png

The menu adjusts to the width of the page it’s been added to. If added to a responsive website, the menu is also responsive and looks great on mobiles. You can add this menu to your website if you have a custom site or use a site builder or CMS where you can edit the source code of your pages.

For Wordpress users: if you’ve added your Ecwid store to a Wordpress site, the Ecwid plugin has a ready setting for adding a store with category menu.

For Wix users: you can add your store categories to the horizontal menu of Wix site menu following this instruction Adding categories of your Ecwid store on Wix.

If you use Ecwid Instant Site, you can add categories menu to the top menu using the Instant Site editor.

Get the code for your category menu

To get the menu widget code for your store:

  1. From your Ecwid admin, go to Sales channels.
  2. In the "Sell on your website" section, click on the Custom website.
  3. Scroll to the Store extensions section and click Add Category Navigation:


The code will be copied.

Alternatively, you can copy the code for a category menu widget below (just make sure to replace 1003 in the example below with your store ID):

<div id="my-categories-1003"></div>
<script data-cfasync="false" type="text/javascript" src="" charset="utf-8"></script>
<script type="text/javascript"> xCategoriesV2("id=my-categories-1003"); </script>

Now you can add the code for your store's category menu to your site.

Add the category menu code to your site

To add the category menu to a site page, you should have access to the source code of that page. The exact steps depend on the site builder or CMS you use for your site, but generally, the steps are as follows:

  1. Log into the backend of your site.
  2. Open a page with your store for editing (in <HTML> mode).
  3. Paste the menu code that you’ve generated earlier to the source code of that page (if it’s a page where you’ve added your store, put the menu code above your store code).
  4. The categories will appear as soon as you save the changes and publish your site.

Alternative widgets for category menu

You can also add a category menu to your website with the help of the Multi-level Illustrated Menu app from Ecwid App Market. This app shows categories in the menu with category images and descriptions. The menu is optimized for any device and you can customize its position as well as the color scheme.

Here's how it looks in Desktop:


On mobiles:


Alternatively, you can use the Mega Menu app to transform your store categories into a drop-down menu with multiple layouts available.

These apps require payment and subscription to any paid Ecwid plan.

Was this article helpful?

Awesome! Thanks for your feedback!

Thanks for your feedback!

Sorry about that! What went wrong?
22 out of 30 found this helpful
We use cookies and similar technologies to remember your preferences, measure effectiveness of our campaigns, and analyze depersonalized data to improve performance of our site. By choosing «Accept», you consent to the use of cookies.
Accept cookies Decline