Header Elements widgets

  • Updated

The header in Spire contains both Common Elements widgets and Header Elements widgets. Like Common Elements widgets, Header Elements widgets are available on any page and provide additional functionality for your Configured Commerce website header.

Spire_HeaderElements.png

Address Drawer

Although you can use these widgets in any order you want, this is the most common order:

You must be logged in as a website user to use these widgets.

Address Drawer Container

After using a Header Ship To Address widget, use this widget to allow customers to change their shipping information. This widget opens a container to hold the other Address Drawer elements.

Customer Selector

This widget displays the current customer's information.

Punch Out Address

You must have Punch Out activated to use this widget.

This widget uses the address stored in Punch Out.

Fulfillment Method Selector

This widget allows the customer to select their preferred fulfillment method, such as Ship or Pick up.

Address Drawer Pick Up Location Selector

This widget lets the customer set their preferred pick up location.

Address Drawer Apply Button

Use this widget to add an Apply button for customers to save their preferences.

Other widgets

These are other widgets you can put in the header. They do not require you to be logged in as a user.

Header Link List

Use this widget to edit the links in your header.

Basic

Add –  Add links to your header. Set the Destination and select whether to Open in a New Window, then click Done. Click Add to add another.

Advanced

You can configure custom CSS for your widget. Note that this is only for display CSS and is not intended for script. 

Main Navigation

Use this widget to edit the links in your header.

Basic

Add –  Add links to your header. Choose your Link Type:

  • Link – Set the Destination and Override Title if needed. Select whether to Open in New Window and click Done.
  • Mega Menu – Set the  Destination and Override Title if needed. Select the Number of Columns to display. Click Done.
  • Cascading Menu – Set the Destination and Override Title if needed. Select the Max Depth. Click Done.

Show Quick Order – Select whether to display Quick Order in your header.

Advanced

You can configure custom CSS for your widget. Note that this is only for display CSS and is not intended for script. 

Search Input

Use this widget to configure the Search box.

Custom CSS

You can configure custom CSS for your widget. Note that this is only for display CSS and is not intended for script.