Edit the Shoptimizer secondary menu

This is the secondary menu in Shoptimizer. It appears within the header and there are icons above each menu label.

Go to: Appearance > Menus. You’ll need to first click on Screen Options at the very top and ensure that Description is ticked.

Next, select the Secondary Menu in the dropdown and click Select.

Edit a menu item and we’ll need to add a new SVG icon into the Description field for each and ensure that the CSS Classes field is empty.

Here is what it will look like:

Note that the CSS Classes field is empty.

And all that SVG code, where can you find that? Thankfully, Heroicons and Boxicons makes this very easy. You can search for an icon, hover over it and click Copy SVG.

Then, you can paste it into the Description field.

We’re using the Outline set in the theme demo but feel free to mix this up. Or indeed, use a different icon set entirely.

To make it even easier, this is the SVG code we’re using for each.

My Account:

Customer Help:

Checkout: