Shopify. How to manage columns count in the Megamenu menu items

In this tutorial we will show you how to manage columns count in the Megamenu menu items in our Shopify templates.

Usually there are several columns showing up in the dropdown of the “Products” menu option. Each column is linked to a certain collection.

In order to add a new column with a category to the dropdown, follow these steps:

1. Login to your Shopify admin panel and navigate to the Online Store -> Themes section.

   

2. In the top right corner click on three dots and select the Edit HTML/CSS option.

   

3. Open the settings_schema.json file located in the Config folder, and search for the “Megamenu” code.

4. You can recognize the code of an item by its number, for example “megamenu2_sub_col__4”. Copy the code of any item and input it after the last item code replacing its order number with the next digit. In this particular case we need to replace 4 with 5. Save the file.

   Note: The code may vary in some templates.

5. Return to Online Store -> Themes section, and press the Customize Theme button.

6. Click the Megamenu tab and check the products catalog item (usually it is the second in a list).

7. Select a Collection for the newly created item and Save changes

   

Now you need to adjust the layout of your drop-down which is based on the Bootstrap framework.

1. Open the widget-megamenu.liquid file located in the Snippets folder.

   

2. Locate the code of the menu item. You can recognize it by the class “megamenu_item_2” where ‘2’ is the order number of this item.

   

3. Change the code {% for i in (1..4) %} to {% for i in (1..5) %} in order to have 5 columns.

4. Replace the bootstrap class:

   with:

   Note: the number of columns differs in different templates thus your template code may contain another bootstrap class.

5. Save the file and check your changes on the site frontend.

We hope the tutorial was useful for you.

Feel free to check the detailed video tutorial below: