Utility bar

Overview:

The Header Utility Bar section is designed to add a flexible utility area inside the header. It can display a menu, account icon, cart icon, store locator, search, action button, and optional scrolling content depending on the selected utility bar view. It also supports sticky behavior, full width layout, separator option, color scheme, and spacing controls.

This section includes controls for menu selection, account visibility, cart visibility, store locator, action button, scrolling content, search settings, predictive search banner, sticky behavior, utility bar layout, color scheme, and section spacing.

The section also supports blocks for mega menu, menu badge, and store location content.

How to set up Utility bar ?

Go to "Customize Theme."
Click on the top dropdown menu and select the Home page template.
From the side menu, choose "Utility Bar."
Customize the "Utility Bar" in the settings on the right side.

Section Configuration:

Settings	Description
Menu	Select the menu to display in the utility bar.
Show Account	Display a login/account button in the utility bar.
Show cart	Use the checkbox option to display the cart icon on the utility bar.
Show store locator	Controls whether the store locator option is displayed.
Store locator label	Sets the text shown for the store locator button or link.
Button Label	Text label for the call-to-action button.
Button Link	URL the call-to-action button directs to.
Open New Window	Open the button link in a new browser tab.
Button Type	Style variant of the call-to-action button (primary or secondary).
Search	Customize search results with the following settings: Show Search: Select the checkbox to show/hide search icon in the utility bar. Enable predictive search suggestions: Select the checkbox to enable/disable the predictive search suggestions in the search results. Search banner image: Use this to add an image or promotional banner in the predictive search banner. Note: This image displays on screen sizes above 1200px.
Sticky Utility Bar	Controls the sticky behavior of the utility bar. Available options: none, always, on scroll up, or on scroll.
Full Screen Width	Make the utility bar span the full screen width.
Enable Separator	Show a separator line in the utility bar.
Utility Bar View	Choose layout style: View 1(Button,search and action buttons), View 2(Search,menu and action buttons), or View 3(Scrolling text,search and action buttons).
Color scheme	Applies a theme color scheme to the utility bar styling.
Section spacing	Add space to the top padding or bottom padding of the Utility bar. Use the range slider to add between 0px and 100px of space to the top or bottom of your Utility bar. Adjust as needed for a polished look.

How to set up Store locations?

Utilize this option to seamlessly add additional store locations for your various outlets.

Store locations block Settings:

Settings	Description
Heading	Add the title for the store location.
Heading size	Choose the size of the heading text. Extra small Extra extra small
Description	Provide visitors with essential details, such as a description or address/contact information associated with the store location.
Map embed iframe url	Retrieve the src URL from the Google embed code and paste it into this field. Refer to the option below for guidance on obtaining the iframe URL.
Button label	The text that displays on the button.
Button link	The URL the button directs to, whether internal or external.
Image	Enhance your store's visual appeal by uploading an image that's relevant to your store location.

How to get Google map iframe url?

To obtain the embed code for a Google Map, you can follow these steps:

Open Google Maps: Go to Google Maps in your web browser.
Search for a Location: Use the search bar to find the location you want to embed. Once you've located the place, click on it.
Access the Location's Information: In the left panel, click on the name or address of the location. This will open a sidebar with more details.
Click on the "Share" Button: Look for the "Share" button, usually represented by a small icon of a chain or the word "Share." Click on it.
Choose the "Embed a Map" Tab: In the sharing options, select the "Embed a map" tab.
Copy the Embed Code: Once you've configured the map settings (if needed), a code snippet will be generated. Simply click on the "Copy HTML" button or copy the entire code provided.

Scroll content

Setting	Description
Scroll heading	Displays the heading text used in the scrolling content area.
Scroll description	Displays the description text used in the scrolling content area.
Marquee speed	Controls the speed of the scrolling marquee animation.
Marquee direction	Controls the scrolling direction of the marquee. Available options: backward or forward.
Pause on hover	Pauses the marquee animation when hovered, if enabled.