Utility Menu

The Utility Menu features bring customization and extension to Commerce7’s user menu, which contains the account login and cart.

General

Visibility

Show or hide the utility menu.

Only one Utility Menu may be active per page.

Set the visibility to hidden to use the Utility Menu block or shortcode. Useful for inserting the Utility Menu inside your header element landmark.

Placement

Top right, top left, bottom right, or bottom left.

Spacing

The spacing around the Utility Menu. Represents the CSS padding property. Example valid values:

  • 20px
  • 10px 20px
  • 10px 20px 10px 20px
  • 1em

Scrolling

Controls how the utility menu will scroll with the page. Represents the CSS position property.

Options include: Absolute, Fixed, Sticky, Static

Icon Size

Options include:

  • Default, 23px
  • Medium, 27px
  • Large, 32px
  • X-large, 40px
  • XX-large, 48px

Icon Stroke Width

Affects the weight of the lines in the SVG icons. Represents the CSS stroke width property. Example valid values:

  • 1px
  • 1.5px
  • 2px
  • .01em

Account

Display

Options include: Text, Icon & Text, Icon

Icon Style

Select from 6 icon options or a custom icon.

Options include: Circle Line, Circle Fill, No Circle Line, No Circle Fill, Head Line, Head Fill, and Custom.

If custom icon is selected, the contents in the field Utility Menu > Advanced > Custom Account Icon SVG will be displayed.

Cart

Visibility

Options include: Show, Hide, Hide if logged out.

Display

Options include: Icon, Icon & Text, Text.

Icon Style

Select from 6 icon options or a custom icon.

Options include: Bag Line, Bag Fill, Cart Line, Cart Fill, Custom.

Count

Affects the cart count total displayed at the right of the Cart link.

Options include: show, hide, hide if zero.

If ‘hide if zero’ is selected, the count will only be hidden if the cart is empty, and displayed if the total products in the cart is 1 or more.

Label

Allows changing the text displayed in the Cart link from the default ‘Cart’.

Advanced

HTML before

Inserted before the Account link. Useful for adding custom menu items to the Utility Menu, like search, shop, or social icons.

This field does not support SVG. Icons can be included as background images.

HTML after

Inserted after Cart link. Useful for adding custom menu items to the Utility Menu, like search, shop, or social icons.

This field does not support SVG. Icons can be included as background images.

Custom Account Icon SVG

Replaces the default icon options with the contents of the field. The Custom icon must be selected under Commerce7 > Utility Menu > Account > Icon Style. May require custom styling

Custom Cart Icon SVG

Replaces the default icon options with the contents of the field. The Custom icon must be selected under Commerce7 > Utility Menu > Cart > Icon Style. May require custom styling