Create a Common Menu
This article will explain how to create a common menu across all of your funnel pages. These menu options can allow you to link a customer to a Collection of products, a product detail page for a specific product, or to any page inside of the funnel.
If you are wanting to create a common menu for different collections of products, please follow this document instead: Collections
The steps below will guide you through creating your Common Menu
Add Common Header to pages in the funnel
Create Menus in Common Page settings
Apply Common Menus to Funnel Pages
Add Common Header to pages in the funnel
Please follow this document or expand the section below to learn how to create a Common page inside the funnel and to create a Common Header which will be present across all the funnel pages that you decide.
Expand to learn how to create a Common HeaderCommon Header and Footer
Inside the Common Page you will only see a single menu option. This is because this single place holder will be replaced with all of the Common Menu options that you have created. Each of the Common Menu options that you create will follow the same styling as the single menu option inside the builder.
Do not duplicate the single menu option as this will cause multiple sets of your Common Menu to appear on the page.
On mobile viewports, the Common Menu will collapse into a hamburger menu.
Create Menus in Common Page settings
On the funnel visualizer, click on your Common Page and then click the settings gear, and then click Main Menu.
This will open a panel called “Main Menu Navigation”. On this panel, click “Add Menu Item” to begin creating your menu.
On the side panel that displays, create a name for the menu option (your customers will see this), choose how the menu should link (choose collection) & the collection that should should display, and also the page that the customers will land on after clicking the menu option.
Link option notes: When you select the Collection option you will then need to choose the Collection of products that you have created as well as the Page in the funnel that the customer will navigate to.
When you select the Product option you will then need to choose the Product that will display on the product detail page as well as the Page in the funnel that the customer will navigate to.
When you select the Page option you will only need to choose which Page in the funnel that the customer will navigate to.
This example below uses the Men’s collection and routes the customers to the Men’s Catalog Page.
You can create as many menu options as needed.
You can reorder the Menu options by clicking and holding the three horizontal lines next to the Menu Title and dragging it to the desired location. Additionally you can also nest menu options under a parent menu option by dragging the menu to the right.
Here is an example of nested menu options under the Men’s and Women’s Collection:
Once you are complete, click the “Save & Return To Funnel” button.
If you have multiple collections but the catalog is the same design for each collection, you can use a single Catalog page and use the {{collectionName}} token to dynamically display the name of the collection.
Apply Common Menus to Funnel Pages
At this point you have now added a Common Page to the funnel with a Common Header, adjusted the rest the applicable funnel pages to use the Common Header, and created your Navigation Menu options.
The last steps now are to edit and save your Common Page, even if all edits are complete. Saving the Common Page will apply the Common Header (and Common Footer) to all of the pages in the funnel which contain a header with the cartCommonHeader Id.
Once the funnel builder saves the Common Page, go back to the funnel visualizer and Publish the funnel.
Any time you edit or add another page to the funnel with cartCommonHeader or cartCommonFooter, you must go back into the Common Page to save.
Any time you save the Common Page, you must publish for those changes to take effect on the live site.