Change the order of Mobile menu list

[jaysbar]

Hi

On a mobile, how can I change the order of the categories? For example the menu appears like this:

Home
Specials
Account
Login
Cart
Checkout
Jewellery

But I want it like this:

Jewellery
Specials
Account
Cart
Checkout
Login
Home

Also, is there a better mobile menu/theme? Algozone doesn't have one and I don't think has updated the mobile theme for over a year now.

Thanks

[abantecart]

Standard and mobile views will have save sorting for categories.

Did you try to manage sorting of categories in admin (in grid)? This will reflect order on the storefront.

[jaysbar]

Hi

I tried the following:

Home 10
Specials 11
Womens Fashion 0
Mens Fashion 1
Kids Fashion 2
Account 40
Cart 50
Checkout 60


But on my mobile menu, the order is like this:


Home
Specials
Account
Cart
Checkout
Womens Fashion
Mens Fashion
Kids Fashion

Why won't Account, Cart, Checkout go right to the bottom of the menu??

Thanks

[jaysbar]

Hi All,

Please can someone help me with this issue (see last post)

[digitalt]

Take a look at your parent categories and child categories. Are they the way you want on the desktop display?  If so, just a suggestion, but what I have done to overcome the limitations for now is to create a menu item called "Products". In the link field I put "content/sitemap". Even though it goes to sitemap, it shows all parent and child categories at a glance along with links to everything that is within the menu settings.  Pretty slick.

It's not a real fix for your question, but for mobile, it puts a link in the menu pop-up and directs mobile users to ALL your products, services, contact info, etc....  Make sense?

[jaysbar]

Digitalt,

This has been an awesome tip! I used your idea just to recreate my menu. So instead of using Sitemap, I simply done the following:

Home 10
Women 11
Men 12
Kid 13
Beauty 14
Specials 70
Cart 80
Checkout 90

and so on.... It looks much better now on a mobile! Just gotta wait for a more mobile friendly approach now

THANK YOU!

Jay

[digitalt]

That works too.

The ordering feature is great to sort products within the categories also. If someone for example clicks on Womens category, you can use the order field on the product description page to set that sort so it is the way you want your customers to see your products.

[jaysbar]

Just incase anyone wants to know exactly how this is done...

Edit the way the menu looks on a mobile

When you make these changes, they will re-order the mobile menu and the menu which opens up when you click on HOME on the desktop website

1.   Go to Admin -> Design -> Menu
You can see things like HOME 10, Specials 11, Cart 40, Checkout 50 etc.
The numbers represent the order in which they will appear in the Home menu. The lower the number, the higher that item appears – so Home first, then Specials

2.   Click on the + icon to add a new menu Category

3.   Give the Category an ID and Title such as Women

4.   Give it a sort number (I will use 11 then change Specials to 30)

5.   On your desktop site, go to storefront and Women

6.   Take the last part of the URL and copy it (product/category&path=93). This is the path to the Category called Women

7.   Paste it into your new menu Category under Link

8.   Notice that when you paste it and move the cursor away, the field Link to Category automatically updates to Women

9.   If you wish to add a Fav Icon which will appear in Storefront Home, click on the icon area to add an icon

10.   You have two options, add an image or add resource HTML. Choose the latter for HTML

11.   Add the following line <i class="fa fa-female"></i>

12.   Change the word Female to the icon you wish to use (here are all the icons you can use - http://fontawesome.io/icons/, they are already stored in Abantecart so you only need to edit the word female and your icon will appear)

13.   Save your settings and go to Storefront and refresh the page.

14.   Click on Home and you will see the new Category with the icon you chose

15.   Now check the site on a mobile. The only difference will be that a new Category has been added and the order of Categories may have changed

[digitalt]

Great tutorial jaysbar. I have quite a few categories and sub categories so I will be following your instructions to see if I can get a better mobile menu too.

The one thing with the mobile site that I wish they would fix or rather for now just eliminate is the top right "button" that normally gives a popup menu in most mobile sites/apps. It gets confusing having 2 dropdown menus appear.

[jaysbar]

I found a problem.... Can someone help?

If you add more items to Design -> Menu, it causes a problem with the menu that appears on the right of the desktop storefront logo.

I can no longer see the menu items next to my logo and there is a big gap between the logo and my social icons. But if I only have 7 items in Design -> Menu the items show up fine next to my logo.

It's a shame that adding items to Design -> Menu makes a duplicate menu on the top of Abantecart Storefront.

Please see my attachments for the issue.

What is the fix for this?

[digitalt]

I had the same problem when working with Design>Layouts. A duplicate block was created for menu items for some reason.  Take a look there and remove the duplicate block.

[jaysbar]

I have fixed the issue and managed to keep the menu at the top.

I will create a How To worthy of a Sticky and update in a bit!

Jay