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

From Spiffy Stores Knowledge Base
 
(19 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".
 
−
 
 
−
== Adding Menu Items ==
 
−
 
 
−
<gallery heights="200px" widths="200px" class="right">
 
−
File:Menu-new-item.jpg|Add new Menu Item
 
−
</gallery>
 
−
 
 
−
You can start to populate your menu by clicking on the "Add Menu Item" link underneath the menu.
 
−
 
 
−
In the form that opens up, enter the name of the new menu item. This is the name that will appear on your menu link. You can enter additional HTML markup if you require some special formatting of the name.
 
−
 
 
−
Beneath the entry field for the name, there is a selection box from which you can select the type of menu link that you want to create.
 
−
 
 
−
The types of items that you can link to are:
 
−
 
 
−
* Store Frontpage
 
−
* Product Collection
 
−
* Product
 
−
* Page
 
−
* Blog
 
−
* Search page
 
−
* Web Address
 
−
 
 
−
=== Store Frontpage ===
 
−
 
 
−
This creates a link to the home page for your store.
 
−
 
 
−
=== Product Collection ===
 
−
 
 
−
When you select a product collection, a second selection box will appear listing all the collections that have been created in your store. Just select the one that you want to create a link for.
 
−
 
 
−
Additionally, there is a link at the end that you can "Click to add filter tags...".
 
−
 
 
−
You can click on this link, to add filter tags to the collection. The tags are entered as words separated by spaces. The filter tags will enable you to display a collection containing only products in that collection that also have matching filter tags.
 
−
 
 
−
For example, if we have a "Cute Dogs" collection, then we can add a filter tag of "brown" to add a link to a collection of "brown" dogs in the "Cute Dogs" collection.
 
−
 
 
−
Remember, that for this to work, you will have to tag all the brown dogs with a "brown" tag when you create the products.
 
−
 
 
−
The product collection selections also include Super Collections, so you can link to a super collection if you want to create more advanced filtered collections.
 
−
 
 
−
=== Product ===
 
−
 
 
−
If you want to directly link to a product, then select this option and then select the desired product from the second selection box.
 
−
 
 
−
=== Page ===
 
−
 
 
−
You can also directly link to a page that you have previously created in the "Pages & Blogs" section.
 
−
 
 
−
Just choose the page you want from the second selection box.
 
−
 
 
−
=== Blog ===
 
−
 
 
−
Create a link to a blog by selecting this option, and then choosing the blog from the second selection box.
 
−
 
 
−
=== Search page ===
 
−
 
 
−
If you want to provide access to the search function from a menu, then select this option.
 
−
 
 
−
=== Web Address ===
 
−
 
 
−
Finally, you can create a link to any URL that you want. Just enter the URL address in the text field.
 
−
 
 
−
You can create links to internal or external addresses.
 
−
 
 
−
If you want to link to some other part of your store, just enter the path.
 
−
 
 
−
For example, if you want to create a link to the cart, enter
 
−
 
 
−
<pre>
 
−
/cart
 
−
</pre>
 
−
 
 
−
If you want to link to an external address, then enter the full URL of the web site. For example, you can link to Google by entering
 
−
 
 
−
<pre>
 
−
http://www.google.com
 
−
</pre>
 

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"