Handy's Contact bar combines key details with stylish icons and useful features. This displays along the bottom of the navigation drawer in mobile and as a hover interaction over a selected link on desktop.
Use the theme editor to assign the contact bar to a menu item, add the contact information and business details, and include a map for the contact bar.
Access contact bar settings through the theme editor
Go to the theme editor (Customize), then open Contact bar.
This feature expands the navigation menu in the header. To set up your menu, go to the Navigation portion of the Online Store.
Assign the contact bar to a menu item
Add the name of the menu item to the Parent link name field. The contact bar will appear when customers hover over that item. Clicking the link will direct them to the assigned page.
Add the contact information and business details
Include your Phone number, Email address, Hours/store information, and Street address using the labeled fields.
The Hours/store information and Street address fields allow for Bold and Italic styling, as well as an Insert link feature. Use the link to connect your customers with more resources.
Include a map
To enable a map feature, select Show map. This will display to the left of your contact bar links.
For this feature, you need to (1) gather the Google Maps API key, (2) add the API key to the section settings, and (3) enable the Geocoding API.
Google Maps API key
- Go to the Google Maps Platform to sign in to your Google Cloud Platform account.
- Then go to the Project Selector page.
- Under APIs and Services, select Credentials.
- Select CREATE CREDENTIALS, then API key.
- Copy the full API key from the Your API key field.
Add the API key to the section settings
- Return to the theme editor and paste the Google Maps API key to the labeled field.
- Save.
Enable the Geocoding API
- Go to the APIs Library to search for the Geocoding API.
- Select Geocoding API, then Enable.
Adjust map zoom level and colors
Customize the Map zoom level using the provided slider. Then customize the map colors using the Map foreground color and Map background color swatches.
* NOTE: May not be available on all sections, blocks or templates