Categories

Featured templates

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

Charlotte Bennett June 15, 2016
Rating: 5.0/5. From 2 votes.
Please wait...

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.

Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_1

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.

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

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_3
  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

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_8

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.

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_9
  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.

    Shopify_How_to_manage_columns_count_in_the_Megamenu_menu_items_10
  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:

    <div class="col-sm-3">

    with:

    <div class="col-sm-2"> 

    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:

Shopify. How to manage columns count in the Megamenu menu items
Best Shopify Themes
This entry was posted in Shopify Tutorials and tagged columns, layout, megamenu, menu, Shopify. Bookmark the permalink.

Submit a ticket

If you are still unable to find a sufficient tutorial regarding your issue please use the following link to submit a request to our technical support team. We'll provide you with our help and assistance within next 24 hours: Submit a ticket