Small Business DiY: Working with SupaDupa's New Sub-Menus

I work with SupaDupa as an e-commerce platform, which recently introduced sub-menus as a site upgrade. A few of the other sellers I know have been working to add sub-menus to their sites and asked me to take a look at it and see if I could add some screenshots for the process.

I'm going to go over my general process for how I did everything. For simplicity, I'm using SD as an abbreviation for SupaDupa throughout this page.

1) Create an Outline
The first thing I did was sit down and write out an outline for how I wanted stuff on my site to be organized. The reason why I started this way is because I wanted to force myself to organize my thoughts for what I the end product will look like. I also wanted something to refer back to if I hit a snag or was unsure of what to do next.

In my case, I did this by hand at first, then transferred it to a word processor. If you look at my outline, you'll see that I have a clear hierarchy to it. This is the sort of outline you want to have ready before you start working with submenus because it should help you see what you need to do.

For the purposes of this blog, I color coded the outline to make it easier to explain my thought process and directions.

Blue = menu-set name. I'm going to have to make these. You'll note that all of these have subordinate points on my outline.
Orange = product collections. Since I am using submenus, I'm going to have to create a few new collections and deactivate or hide some old ones by the time I'm done with everything. Note: I'm choosing not to have collections such as 'all baby items' at this point because I want to reduce the number of duplicate URLs for products on the site for SEO reasons.
Pink = info pages.
Green = URLs. Rather than create yet another collection (and more duplicate URLS for the same product), I'm going to link to a URL showing the result of a search for specific terms. I'm going to take advantage of the site search keywords that you can add to each product to control what shows up when people click on this.

Blue = little menus I need to make. Orange = collections. Pink = information pages. Green = URLs I want to link to.

You may find it easier to color code your own outline. I could have skipped the color coding step, but it does help force you to organize your thoughts, which makes the rest of the process easier.

2) Take a Look at These 3 Screens on the SD Backend
There are going to be 3 pages on the SD backend that you're going to want to know about in order to take advantage of submenus. Two handle content, while one handles links.

Collections Page
Click on the little gift tag icon on the left hand side of the screen to get here.

This is where you are going to organize all of your items or products into collections/categories. If you look at my little outline, I need a collection for everything labelled in orange. This page is all about content (which products belong in which categories). You can control which collections are visible from here - meaning visible in ANY navigation menu. You'll still need to control where they show up on the menu page.

Hint: once you create a collection, you may need to edit the visibility either here or on the menu page under settings.

Pages Page
Click on the little icon that looks like two pieces of paper on the left hand side of the screen to get here.

This is where you create specific information pages. I've covered possible uses for info pages in a previous blog post showing portions of the SD backend. (There's quite a few of them - you can use pages for everything from About Us to email campaign landing pages.) This is essentially a list of every single non-product page on your website. If you look at my outline, I need to have a page for everything labelled in pink. You will control which pages are visible and where elsewhere.

Menus Page
Found under Settings -> Menus. Click on the little gear icon, then the little compass icon on the left hand side of the screen to get here.

Think of this as link-central. It's all about the links/menus/submenus. What links are visible and where. Think of a 'menu set' as the name or title for a submenu group (what I've labelled in blue on my outline).

3) Get Your Content In Order
Depending on whether you need submenus for collections or for info pages (or both), you may need to work on different things.

If you're going to create subcategories for collections, make a collection for each subcategory. You would do this from the collections page.
If you're going to create submenus for informational pages, make a page for each submenu item. (For example, you might want to have a link that says 'Previous Work', then have options that showcase your previous work via date or by project type. You might need pages for work completed in 2008, 2009, 2010, etc.) You would do this on the part of the SD backend called pages.
If you're planning to link up with URLs, have those on hand.

4) Link up

Go to the menu page (under settings) and work on making little menu sets. I'll do a detailed walk through for creating a sub category for one of my product lines later on in the post.

5) Double Check Your Visibility Settings

Remember, if the visibility is set to Visible on the collections page, that now means you can view the collection as a URL. If you want a LINK to that collection to be visible, you'll have to go to the menus page.

Series of ScreenShots Walking Through the Process

I'm going to start with something relatively simple: Bags. At the moment, I already have a collection for each category of bag (tote, messenger, cosmetic case), so I'm just going to group them under a submenu.

1) I'm going to my collections page to make sure I have created all of the collections (product categories) that I need.

Cosmetic cases, Messenger Bags, and Tote Bags are all organized under separate collections.
I am taking note of the spelling for later use.

2) Go to Settings -> Menu. You should see Main Menu. Collections Menu, Pages Menu, and then any other mini-menus you've created to act as submenus to stick to the big three. How do you know if it's one of the big three menus? You can't delete them.

Do you see how Main Menu, Collections Menu, and Pages Menu don't have trash can icons next to them? I'm calling them the big three menus. You can't get rid of them, and all other links need to (somehow) get placed into them.

Submenus need to be created as little mini menus (like Gift Guides) and then inserted into one of the big three. You can see I have a mini-menu called 'Gift Guides', I can delete it if I wish. It still needs to be added to one of my big three menus - I have my choice of where to put it.

3) Click on the 'New menu set' button at the upper right hand of the screen. This will let me create a little mini-menu, which I'm going to call 'Bags'.

Since this is a page where I can edit a menu, the screen allows me to hide options (great for when you are setting up the menus to before you create a new product line or category) or to ask that a clicked link opens in a new tab (good for if you ever decide to create a link to an outside blog, twitter account, facebook page, etc.).

If for some reason, you pick Collection or Page and Link destination options don't automatically pop up, pick URL instead and copy in the URL for the collection or page.

Please note that I'm telling each link to go to a collection. Save it.

This now gives me another mini menu on the main menu page (settings -> menu):

4) Edit the Collections Menu (one of the big 3 menus).

When I open the page, I can see the links for my totes, messenger bags, and cosmetic cases on the list of links under the big collections menu. You'll want to make these not visible. WHATEVER YOU DO, DO NOT CLICK ON THE TRASH BUTTON. I did that by accident, and lost the ability to link to them from any of the main menus. It took me a lot of work to fix it, and it was not fun (good thing there weren't a lot of items in the collection). Just don't delete any of your collections or information pages off of the big three menus, OK? Use the green toggle to make them invisible.

Here are my collections menu. The green visibility toggle appears, which means that the system has the ability to link to them. If you don't want to loose the ability to link to them (say, in a submenu), DO NOT TRASH THEM. Make them invisible once you have the submenu set up.

Now that I'm editing my collections menu (one of the big three), I can add in that Bags sub-menu and move it to where I want it to appear (in this case, I'm arranging stuff alphabetically). I also make sure the tote bags, messenger bags, and cosmetic cases collections are invisible - still there, but invisible.