Difference between revisions of "How to edit your Store Menus"

From Spiffy Stores Knowledge Base
 
(25 intermediate revisions by 2 users not shown)
Line 1: Line 1:
−
<gallery heights="200px" widths="200px" class="right">
+
You need to link the different store sections that you create, like your collections or your blog, to your navigation menus, or they won’t show up on your website.  
−
Image:Spiffy-store-toolbox-navigation-page.png|Store menus page
 
−
</gallery>
 
  
−
You can create and edit your menus by going to the "Store Menus" tab in the Toolbox.
+
Store menus are edited from your '''Spiffy Stores Toolbox'''.  
  
−
Here you will find a list of your current menus.
+
Log in to your Toolbox and click on the '''Store Menus''' tab to access the four standard menus that Spiffy Stores use - '''Top Menu''', '''Main Menu''', '''Side Menu''' and '''Footer'''.  
  
−
You can add a new menu by clicking on the "add a new menu" button.
+
<html>
 +
<iframe src="https://player.vimeo.com/video/523999241?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1250" height="703" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="simple-theme-mega-menus"></iframe>
 +
</html>
  
−
When you create a new menu, you can use any name you like to describe the new menu. However, it is best to choose a short descriptive name.
+
==== The pre-loaded menus used for each theme are listed below:  ====
  
−
== Standard Menus ==
+
{| width="100%" border="0" class="wikitable"
 +
|-
 +
| '''Theme'''
 +
| '''Default menus'''
 +
|-
 +
| Melbourne*
 +
| Top menu, footer
 +
|-
 +
| Darwin*
 +
| Top menu, footer
 +
|-
 +
| Sydney*
 +
| Top menu, footer
 +
|-
 +
| Vintage*
 +
| Top menu, footer
 +
|-
 +
| Adelaide*
 +
| Top menu, footer
 +
|-
 +
| Simple*
 +
| Top menu, footer
 +
|-
 +
| Bendigo*
 +
| Top menu, side menu, footer
 +
|-
 +
| Georgia*
 +
| Top menu, footer
 +
|-
 +
| Minimal*
 +
| Main menu, footer
 +
|}
  
−
There are three standard menus that you will find that are created for you by default when your store is created.
+
=== How to add an item to a menu  ===
  
−
If a standard menu does not exist, you can create it at any time. However, a standard menu cannot be deleted.
+
#Click the “'''+ Add New Menu Item'''” link under the relevant standard menu section on the left (NOT the orange “add a new menu” button on the right).
 +
#In the box that appears, type a short descriptive title in the '''Name of New Menu Item''' field. This is the title that will appear in your menu.
 +
#Underneath, select the link you want to create from the drop-down box. You have a choice of linking to:
 +
#*'''Store Front Page''' - your store homepage
 +
#*'''Product Collection''' - one of the collections you have created
 +
#*'''Product''' - one of the products you have loaded
 +
#*'''Page''' - any page you have created in the "Pages &amp; Blogs" section
 +
#*'''Blog''' - any blog you have created in the "Pages &amp; Blogs" section
 +
#*'''Search Page''' - access to the search function
 +
#*'''Web Address''' - any internal or external URL. Just enter the web address in the text field. If you want to link to another part of your store, just enter the relative path.
 +
#Select the page you want to link to (if you have selected Product, Collection, Page or Blog).
 +
#If you choose '''Product Collection''', you can also filter the collection by the tags you have added to your products. Click on the grey “'''Click to add filter tags…'''” link and type the specific tags in the box that appears.
 +
#Click the “'''Add item'''” button to finish and save your changes.
  
−
All of the themes in the Theme Gallery use the standard menus, so once you set up a standard menu, you can swap themes without having to make changes to the menu definitions.
+
=== How to re-order your menu items  ===
  
−
Unless you are designing a custom theme, you will probably not need to create any additional menus.
+
*Click on the “(Reorder)” link next to the standard menu title on the left side.
 +
*Click and drag the item up or down by the cross icon to change the order.
 +
*Click on the “(Done reordering)” link at the top to finish and save your changes.
  
−
=== Top Menu ===
+
=== How to make a drop down menu  ===
  
−
This menu would generally be used for some general navigation links at the top of your site. For example, you might find a "Shop Home" link as well as a "View Cart" link.
+
In most of our themes themes, you can add drop-down menus to your store.  
  
−
=== Main Menu ===
+
*Click on the “(Reorder)” link next to the standard menu title on the left side.
 +
*Click and hold on the cross icon next to the item you want in the drop-down.
 +
*Drag the item to the right. It will indent from the left margin to show it’s now a sub-item and will appear as a drop-down menu.
 +
*Click on the “(Done reordering)” link at the top to finish and save your changes.
  
−
This menu is your main navigation menu and will contain links to your product collections, blogs and other pages.
+
=== How to delete a menu item  ===
  
−
A main menu may appear underneath your top banner or perhaps at the side.
+
*Click on the rubbish bin icon on the right-hand side of the menu item line.
−
 
 
−
=== Footer ===
 
−
 
 
−
The footer menu naturally will be placed at the bottom of the page. This usually contains the links to your "Terms and Conditions" and "Privacy" policy pages.
 
−
 
 
−
== Menu Handles ==
 
−
 
 
−
Each menu has a name, such as "Top Menu", "Main Menu" or "Footer".
 
−
 
 
−
In order to refer to these menus in your theme code, you need to use the menu's "handle". This handle is derived from the menu name by removing all special characters, making all letters lowercase and replacing all spaces with a '-' character.
 
−
 
 
−
Therefore, the handle for "Main Menu" is "main-menu".
 
−
 
 
−
Similarly "Top Menu" becomes "top-menu" and "Footer" becomes "footer".
 

Latest revision as of 13:52, 16 September 2022

You need to link the different store sections that you create, like your collections or your blog, to your navigation menus, or they won’t show up on your website.

Store menus are edited from your Spiffy Stores Toolbox.

Log in to your Toolbox and click on the Store Menus tab to access the four standard menus that Spiffy Stores use - Top Menu, Main Menu, Side Menu and Footer.

The pre-loaded menus used for each theme are listed below:

Theme Default menus
Melbourne* Top menu, footer
Darwin* Top menu, footer
Sydney* Top menu, footer
Vintage* Top menu, footer
Adelaide* Top menu, footer
Simple* Top menu, footer
Bendigo* Top menu, side menu, footer
Georgia* Top menu, footer
Minimal* Main menu, footer

How to add an item to a menu

  1. Click the “+ Add New Menu Item” link under the relevant standard menu section on the left (NOT the orange “add a new menu” button on the right).
  2. In the box that appears, type a short descriptive title in the Name of New Menu Item field. This is the title that will appear in your menu.
  3. Underneath, select the link you want to create from the drop-down box. You have a choice of linking to:
    • Store Front Page - your store homepage
    • Product Collection - one of the collections you have created
    • Product - one of the products you have loaded
    • Page - any page you have created in the "Pages & Blogs" section
    • Blog - any blog you have created in the "Pages & Blogs" section
    • Search Page - access to the search function
    • Web Address - any internal or external URL. Just enter the web address in the text field. If you want to link to another part of your store, just enter the relative path.
  4. Select the page you want to link to (if you have selected Product, Collection, Page or Blog).
  5. If you choose Product Collection, you can also filter the collection by the tags you have added to your products. Click on the grey “Click to add filter tags…” link and type the specific tags in the box that appears.
  6. Click the “Add item” button to finish and save your changes.

How to re-order your menu items

  • Click on the “(Reorder)” link next to the standard menu title on the left side.
  • Click and drag the item up or down by the cross icon to change the order.
  • Click on the “(Done reordering)” link at the top to finish and save your changes.

How to make a drop down menu

In most of our themes themes, you can add drop-down menus to your store.

  • Click on the “(Reorder)” link next to the standard menu title on the left side.
  • Click and hold on the cross icon next to the item you want in the drop-down.
  • Drag the item to the right. It will indent from the left margin to show it’s now a sub-item and will appear as a drop-down menu.
  • Click on the “(Done reordering)” link at the top to finish and save your changes.

How to delete a menu item

  • Click on the rubbish bin icon on the right-hand side of the menu item line.
Retrieved from "http://www.spiffystores.com.au/kb/index.php?title=How_to_edit_your_Store_Menus&oldid=9658"