Wix Stores: Displaying Product Categories on Mobile

Although you can display a vertical menu in the Category page on desktop, vertical menus do not appear in the mobile view (in the Wix Editor) or on smaller breakpoints (Studio Editor).

Use a horizontal menu on mobile to help customers easily navigate your store's categories.

Adding a horizontal menu to the Category page

Add a horizontal menu to the Category page on mobile to give customers easy access to your categories. You can set it up so customers can swipe to view additional categories. Alternatively, you can display them all.

You can add a horizontal menu in the mobile view, desktop view, or both.

Tip:

Adding a horizontal menu on the desktop for the first time automatically adds it to mobile. After that, you can manage them separately.

Wix Editor

1. Click Pages and Menu

   

   on the left side of the editor.

2. Click Store Pages.

3. Click Category Page.

4. Click the Switch to Mobile icon at the top of your editor.

1. Click the Category page in your editor.

2. Click Settings.

3. Click the Display tab and select the checkbox next to Category menu.

4. Click the Layout tab and select Category menu.

5. Customize the layout using the available options.

6. Click the Design tab and select Category menu.

7. Customize the menu design using the available options.

Studio Editor

1. Go to your editor.

2. Click Pages

   

   on the left side of the editor.

3. Click the Category page under Store Pages.

4. Go to a mobile breakpoint.

5. Click the Category page in your editor.

6. Click Settings.

7. Click the Display tab and select the checkbox next to Category menu.

8. Click the Layout tab and select Category menu.

9. Customize the layout using the available options.

10. Click the Design tab and select Category menu.

11. Customize the menu design using the available options.

Wix Harmony Editor

1. Go to your editor.

2. Click the Page dropdown at the top left of the page.

3. Select the Category page under Store Pages.

4. Click the Mobile icon

   

   at the top right of the page.

5. Click the Category page element in the editor.

6. Display the menu:

   1. Click the Display elements icon

      

      on the action bar.

   2. Select Category menu.

7. Customize the menu:

   1. Click the Settings icon

      

      on the action bar.

   2. Click the Layout tab and select Category menu.

   3. Customize the layout using the available options.

   4. Click the Design tab and select Category menu.

   5. Customize the menu design using the available options.

Tip:

It's recommended to also add categories to your site menu, so that customers can view your categories from any site page.

Adding categories only to your site menu (mobile only)

Add your product categories to the mobile version of your site menu - without adding them to the desktop version (see instructions below on how to add categories to both desktop and mobile menus).

Note:

In the Wix Harmony Editor, it's not possible to display different menu items on desktop and mobile.

Wix Editor

1. Click the Switch to Mobile icon at the top of your editor.

1. Click the site menu.

2. Click the Settings icon

   

   .

3. Click Set as Advanced.

4. Click Set as Advanced to confirm.

5. Click the menu in your editor.

6. If not already open, click Manage Menu.

7. Click + Add Menu Item at the bottom.

8. Select Link.

9. Select Page on the left.

10. Select Category page from the Which Page? drop-down.

11. Select the category you want to display from the Which item? drop-down.

12. Click Done.

13. (Optional) Rename the category.

14. (Optional) Drag categories to make them into subcategories.

Studio Editor

In the Studio Editor, you have the option of creating specific menus and only showing them on the mobile breakpoint. Learn more about hiding and unhiding elements.

1. Go to the mobile breakpoint.

2. Add a new menu element:

   1. Click Add Elements

      

      on the left side of the editor.

   2. Click Menu & Search.

   3. Drag the relevant menu design onto the page.

3. Create a new custom menu showing the product categories:

   1. Click Manage Menu.

   2. Click the dropdown under Which menu is displayed? and select Manage Site Menus.

   3. Click + Add New Menu at the bottom.

   4. Enter a name for the new menu.

      Note: This name isn't visible to visitors.

4. (In the Manage Menu panel) Add the product categories to the new menu:

   1. Click + Add Item at the bottom.

   2. Select Link.

   3. Select Page on the left.

   4. Select Category Page from the Which Page? dropdown.

   5. Select the category you want to display from the Which item? dropdown.

   6. Click Done.

5. Hide the menu from the other breakpoints:

   1. Go to the tablet and desktop breakpoints.

   2. Right-click the menu element and select Hide.

Adding categories to desktop & mobile site menus

By default, the Category page is added to the site menu with the name "Shop". This link directs customers to the "All Products" category. You can add direct links to each of your other categories (e.g. Body, Nutrition).

If your site has a lot of products and categories, you can add subcategories to the site menu.

Wix Editor

1. Go to your editor.

2. Click Pages and Menu

   

   on the left side of the desktop editor.

3. Click Site Menu.

4. Click +Add Menu Item at the bottom.

5. Select Link.

1. Select Page on the left.

2. Select Category Page from the Which Page? drop-down.

1. Select the category you want to display from the Which item? drop-down.

2. Click Done.

3. (Optional) Rename the category and click Done.

4. (Optional) Make the category you added into a subcategory:

   1. Click Pages and Menu

      

      on the left side of the editor.

   2. Click Site Menu.

   3. Drag the relevant menu items under and to the right of the relevant category.

Studio Editor

1. Go to your editor.

2. Select the relevant menu in your desktop editor.

3. Click Manage Menu.

4. Click +Add Item.

5. Select Link.

6. Select Page on the left.

7. Select Category Page from the Which Page? drop-down.

8. Select the category you want to display from the Which item? drop-down.

9. Click Done.

1. (Optional) Rename the category.

2. (Optional) Drag categories to make them into subcategories.

Wix Harmony Editor

1. Go to your editor.

2. Click your site's menu in the desktop editor.

3. Click Manage Menu on the action bar.

4. Click +Add Item.

5. Select Link or anchor.

6. Under Page select an option:

   • Select Category page and then select the category you want to display from the dropdown.

   • Select a page with a product gallery.

7. (Optional) Rename the new menu item.

8. (Optional) Drag the menu item under another item to make it into a subcategory.