▶️ Use the menu builder

1. Why Use the Menu Builder?

• By default, StoreConnect builds menus based on product categories.

• If you want full control over your website’s menu (e.g. linking to pages like About Us or Contact), use the Menu Builder to create a custom menu structure.

2. Create a New Menu

• In Salesforce, open the StoreConnect app.

• Go to:

  • StoreConnect Navigation → Configuration → Menus → All Menus.

• Click New.

• Configure the menu:

  • Name → e.g. Main Menu.

  • Identifier → a unique internal reference (e.g. main-menu).

  • Assign to your Store.

• Click Save.

3. Create Menu Items

• From the Main Menu Record, go to the Related tab → Menu Items → click New.

• For each menu item:

  • Enter a Name (e.g. Shop, About Us).

  • (Optional) Enter a Display Name → this is what customers will see in the menu.

  • Set the Menu to your Main Menu.

  • Set a Position:

    • Lower numbers appear first (e.g. 10, 20, 30).

  • Under the Target section:

    • Choose where the item links to:

      • Pages (e.g. About Us, Contact).

      • Products, Product Categories, Articles, etc.

• Example:

  • Shop → target the All Products category.

  • About Us → target your About Us Page.

  • Contact → target your Contact Page.

• Click Save and New for each item until all are added.

4. Assign the Menu to Your Store

• Go to:

  • StoreConnect Navigation → Configuration → Stores → Stores List View.

• Open your Store Record.

• Go to the Content tab → Content Management System (CMS).

• Under Header Menu, click Edit.

• Select your newly created Main Menu.

• Click Save.

5. Verify Your New Menu

• Go to your Store’s website.

• Refresh the page.

• You should now see your custom menu (e.g. Shop, About Us, Contact) visible in the header.

6. Create Nested Menus

• To create a submenu:

  • Go to your Main Menu record → find the child item (e.g. Contact).

  • Edit the item → under Parent Menu Item, select its parent (e.g. About Us).

  • Click Save.

• Refresh your website:

  • The Contact link now appears nested under About Us.

7. Style Dropdown Menus with CSS Classes

• To create a dropdown effect:

  • Edit the Parent Menu Item (e.g. About Us).

  • Under Style Class Names, enter:

    • dropdown → this uses StoreConnect's standard dropdown style.

  • Click Save.

• You can also:

  • Add multiple custom classes for more advanced styling.

  • Use your own CSS classes for complete customization.

• Refresh the site:

  • Hovering over About Us now shows a dropdown with Contact inside.