Перейти к основному содержимому

Store Finder Widget Overview

The Store Finder Widget is the customer-facing component of Store Locator Map: SE. It provides an interactive, map-based interface that allows your customers to search for and discover your physical store locations directly from your Shopify storefront.

What the Widget Looks Like​

The Store Finder Widget presents a clean, professional layout that integrates seamlessly with your Shopify theme. By default, it renders as a split-panel view with an interactive Google Map on one side and a scrollable list of location results on the other. The widget is fully responsive, adapting its layout for desktop, tablet, and mobile viewports.

Core Components​

The widget is composed of four primary components that work together to deliver a complete store-finding experience.

The search bar sits at the top of the widget and serves as the primary entry point for customers. It accepts free-form text input, including zip codes, city names, street addresses, and region names. An optional Use My Location button allows customers to search based on their current geographic position via browser geolocation.

Interactive Map​

The map panel displays an interactive Google Map with markers representing each store location. Customers can pan, zoom, and click markers to view location details. The map automatically adjusts its viewport to fit the search results, centering on the most relevant area.

Results List​

The results list panel displays matching locations as a scrollable list, ordered by distance from the search point. Each entry in the list shows key information at a glance, including the store name, address, distance, and operating status. Clicking a result in the list highlights the corresponding marker on the map and scrolls it into view.

Location Cards​

Each location in the results list is rendered as a card. Location cards display:

  • Store name and category or tag label
  • Address with a link to get directions
  • Distance from the search point (in miles or kilometers)
  • Phone number (clickable on mobile devices)
  • Business hours with an indication of whether the store is currently open or closed
  • Action buttons such as "Get Directions," "Call," or "Visit Website"

How Customers Interact with the Widget​

A typical customer interaction follows this flow:

  1. Search -- The customer enters a location (e.g., "San Francisco, CA") into the search bar or clicks the "Use My Location" button.
  2. Browse results -- The widget returns a list of nearby stores, sorted by proximity. The map zooms to fit all results.
  3. Refine -- The customer can apply filters (e.g., store type, services offered) or adjust the search radius to narrow or expand results.
  4. Select a location -- Clicking a result card or a map marker opens a detailed info window with the store's full information.
  5. Take action -- The customer can get driving directions (opens in Google Maps or Apple Maps), call the store, or visit the store's website.

Key Characteristics​

FeatureDescription
Responsive designAutomatically adapts layout for desktop, tablet, and mobile screens.
Fast load timesThe widget loads asynchronously to avoid impacting your store's page speed.
Theme-awareInherits base typography and color cues from your Shopify theme for a consistent look.
AccessibleBuilt with semantic HTML and ARIA attributes to support screen readers and keyboard navigation.
Multilingual readySupports localization of labels and interface text.

Next Steps​