Utility bar

Utility bar:

The primary purpose of the utility bar is to provide quick access to various features, such as the bold button, predictive search, cart icon, or store locations.

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.

Customize section settings:

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.
Store location label	The text displayed on the store location button.
Button Label Locations	Text label for the store locator button.
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	Control sticky behavior: always, on scroll, on scroll up, or disable.
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	Choose a set of colors to apply to this section.
Section spacing	Add space to the top or bottom 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.