How to create a new Vertical Mega menu

Modified on Thu, 23 Sep 2021 at 09:13 AM

TABLE OF CONTENTS


Vertical Menu

----------------

The clip shows you the continuous guidance on how to customize the Verticle mega menu on the Chromium Shopify theme. 



Or you can revise the information on the step-by-step guidance below in case you missed any information on the clip.  



I. Add Main Verticle Menu 


Click on the Header section, scroll down to the Verticle menu settings and select the menu you want. You can edit that menu by clicking on the Edit menu under its title, then you'll be moved to the Shopify admin - Navigation to edit its menu. After editing the menu successfully, you turn back to the store settings and we suggest that you should reload the page to update the changes to the menu. 




II. Verticle Menu settings


1. Trigger Navigation

In Menu settings at the Header section, click on the arrow at the Verticle Menu section to add Blocks 


Click on the "Trigger Navigation" block to add menu items

  • Mega NavigationPlease enter the exact title of the link (the name of the menu item that you've created on the Shopify admin). E.x:  Car Seats
  • Background image: press the Select Image to set it for the background

Those are set for the image background, choose an option from each drop-down field for:

  • Background size
  • Background position
  • Background repeat


Then you can create its items such as menu list, multiple product, image, banner, single product for that trigger navigation above. (click on Add block to add the block you want, be noted to place them under the trigger navigation)



2. Menu list

  • Block title: enter the title for this block 
  • Menu: press the button to choose the existing menu, then you can change, remove, or edit that menu. 


  • Width: drag to set the width for the block 



3. Banner

  • Title: Input a title for the banner, 
  • Background color: choose a color for the background by using the color picker 
  • Width: drag to change the width for this banner section
  • Image: Select an image to show


  • Insert contents for text 1 and text 2


Button

  • Label: Enter the name of label button, Eg: View Details
  • Link: Paste a link or search it from the existing menu 
  • Style: drag to choose a button style from 1 to 3


Section under

  • Image: select the image to display 
  • Text: enter the text to the box
  • Link: paste or search a link to attach it to the image



4. Multiple product 

  • Title: give it title for this block
  • Link: paste or search a link 
  • Width: drag to modify the width for this block 
  • You can select product 1 and product 2 to display 


5. Image 

  • Image: Choose an image to show 
  • Width: and drag to adjust the width for this image block
  • Link: paste or search an available link


6. Single product 

  • Title: give this block a title
  • Width: drag to adjust the block width
  • Product: choose a product to show and drag to adjust the width between the products.


Please click on the Save button placed at the Top right of the screen to save all the changes.














Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select atleast one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article