VIVAshop Documentation

Manually add content: Adding menus


VIVAahop theme comes with several menus that you can customize as per your own needs: “Top left menu - VIVAshop”, “Top right menu - VIVAshop”, “Main menu - VIVAshop”, and the “Advanced Mega Menu”. Below you can find the way you can customize them:


Top left and right menus



On the top of every page there are two menus which are automatically installed together with the theme: “Top left menu - VIVAshop”, on the top left of your site, and “Top right menu - VIVAshop”, on the right side. In each menu you can add any custom text, links, colors, as well as pick any icons of your choice. Each menu can contain any number of menu items. Below we’ll explain how to add menu items to the “Top left menu - VIVAshop”. For the “Top right menu - VIVAshop”. all you have to do is to simply follow the same procedure.


  • Step 1

In your admin panel, go to “Design” - “Menus


  • Step 2

Click on the “Top left menu - VIVAshop” link


  • Step 3

In the next opened page, click on the top right blue “Plus” sign button (”Add item”) to add a menu item, or simply edit the already existing ones. Below we’ll show you how to edit the “Returns” menu item. Changing the other menu items will be just the same. So click on the “Returns” link:


  • Step 4

In the newly opened pop-up window, under the “General” tab, if you wish, change the menu item “Name”, “Position” as well as the URL link that you want to forward visitor when they click in the “Returns” menu item.


  • Step 5

Next, under the “Additional menu settings” tab, customize your menu item. When you’re done, simply click on the bottom right “Save” button.


A: Menu colors - Select the colors for your menu item
  • A1: Enabled - Check this box if you want to add your custom colors or use the VIVAshop pre-defined theme style colors. If this box remains unchecked, the menu item colors will use the style colors defined in your Theme Editor for “Top panel links” and “Top panel links hover” under the “Colors” section.
  • A2: Use tyle colors/Custom colors - Select if you want to use the already pre-defined VIVAshop style colors, or use your own custom colors.
  • A3: Text color - If you chose to use your own custom colors for the menu item text, then choose your desired color from the color picker.
  • A4: Background color - The menu item can also have a background. Simply choose your custom color from the color picker.


B: Icon settings - Choose an icon for your menu item and customize it
  • B1: Enabled - Check this box if you want to add an icon to the menu item. If this box remains unchecked, then no menu icon will be displayed.
  • B2: Type - If you chose to add an icon to your menu item, select the type of icon you want to use. You can choose between picking a “Font Awesome” icon, or add your own “Custom” icon.
  • B3: Icon/Custom class - If at the above “Type” section you selected “Font Awesome” option, then simply choose your desired icon from the icon picker. If you selected to add your own custom icon, insert the class of your custom icon in the “Custom class” field.
  • B4: Icon color - For the icon color you have two options: “Inherit color” and “Custom color”. If you select the “Inherit color” option, then the icon will take the same color as the menu item text color which you have defined above, in section A3. If you choose “Custom color” then the B5 option will open so you may choose your desired icon color.
  • B5: Custom color - If you chose the “Custom color” option for “Icon color”, then just pick your desired color from the color picker.


C: Label settings - This option is not available for the top menu items, but only works with the “Main Menu - VIVAshop menu”. Therefore, if you select the box to enable the Label settings, there will be no effect on the menu links.


  • Step 6

Repeat the above 5 steps in order to customize all of the menu items from the “Top left menu - VIVAshop”, or to add any custom menu items inside this menu. The exact same procedure is used to customize or create menu items in the “Top right menu -VIVAshop”. Once these menus are configured/created, you can simply add them to the respective blocks, by going to “Design” - “Layouts”, then click on the “Block options” of the “Top left menu - VIVAshop” block (or “Top right menu - VIVAshop” block), and then, in the newly opened pop-up, click on the “Content” tab and select “Top left menu - VIVAshop” from the “Menu” dropdown (or select “Top right menu - VIVAshop” if you are editing the “Top right menu - VIVAshop” block). However, please note that, by default, after you install the theme demo data, the “Top left menu - VIVAshop” and “Top right menu - VIVAshop” are already created and allocated to their respective blocks.



Main Menu


“All Categories” menu


The “All categories” menu is part of the “Advanced Mega Menu” add-on which we have specifically created for VIVAshop and included in the theme package. To learn more about how to customize the the “All categories” menu, please refer to the “Advanced Mega Menu” section.