Widget Customization

Store Locator Map: SE provides extensive options for customizing the appearance of the store finder widget. You can adjust the layout, colors, typography, sizing, and responsive behavior to ensure the widget aligns with your brand and integrates smoothly into your Shopify storefront.

Layout Options

The widget supports three layout modes. Select the one that best suits your page design.

Map + List (Default)

Displays the interactive map alongside the results list in a side-by-side split view on desktop. On mobile, the layout stacks vertically with the map on top and the list below.

Map Only

Displays only the interactive map. Location details are accessible through info windows when clicking markers. This layout is ideal for stores with a small number of locations or when embedding the widget in a constrained space.

List Only

Displays only the results list without a map. Each location card includes an address link that opens Google Maps in a new tab. This layout is useful for merchants who prefer a minimal footprint or do not want to use the Google Maps JavaScript API.

Configuring the Layout

1. Open the app and go to Settings > Widget > Layout.
2. Select the desired layout mode: Map + List, Map Only, or List Only.
3. If using Map + List, set the Map / List ratio (e.g., 60/40, 50/50, 70/30) to control how much horizontal space each panel occupies.

Colors

Customize the widget's color scheme to match your brand identity.

Setting	What It Controls
Primary color	Search button, active filter highlights, links, and accent elements.
Background color	The main background of the widget container.
Card background	The background color of individual location cards.
Text color	Primary text (store names, addresses, descriptions).
Secondary text color	Supporting text (distance, hours, labels).
Border color	Borders around cards, input fields, and the widget container.

Applying Colors

1. Go to Settings > Widget > Appearance.
2. Enter hex color codes or use the color picker for each setting.
3. Preview changes in the live preview panel on the right.
4. Click Save.

Typography

The widget can inherit fonts from your Shopify theme or use a custom font family.

Setting	Description
Inherit theme fonts	Uses the font stack defined by your active Shopify theme. Enabled by default.
Custom font family	Specify a Google Fonts family name (e.g., "Inter", "Roboto") or a system font stack.
Base font size	The root font size for the widget (default: 14px). All other text scales relative to this value.
Heading weight	Font weight for store names and section headings (e.g., 600, 700).

Configuring Typography

1. Go to Settings > Widget > Appearance.
2. Toggle Inherit theme fonts off if you want to use a custom font.
3. Enter the font family name and adjust the base font size as needed.
4. Click Save.

Map Sizing

Control the dimensions of the map within the widget.

Setting	Description	Default
Widget height	The total height of the widget container.	600px
Minimum height	The smallest height the widget will shrink to on smaller screens.	400px
Maximum height	The largest height the widget will expand to on larger screens.	800px
Full width	Whether the widget spans the full viewport width or is constrained to the page content area.	Off

Configuring Map Size

1. Go to Settings > Widget > Layout.
2. Adjust the height and width settings.
3. Click Save.

Mobile Responsive Behavior

The widget automatically adapts to smaller screens. You can fine-tune the mobile experience with the following options.

Mobile Layout

On screens narrower than the responsive breakpoint (default: 768px), the widget switches to a stacked layout:

• Map on top, list below (default) -- The map is displayed first, followed by the scrollable results list.
• List on top, map below -- The results list appears first, with the map below.
• Tabbed view -- The customer switches between a "Map" tab and a "List" tab. This conserves vertical space.

Mobile-Specific Settings

Setting	Description	Default
Mobile layout mode	Choose stacked or tabbed layout for mobile.	Map on top, list below
Mobile map height	Height of the map panel on mobile.	300px
Collapse search on load	Minimize the search bar on mobile to show more map area initially.	Off
Responsive breakpoint	The screen width (in pixels) at which the widget switches to mobile layout.	768px

Configuring Mobile Behavior

1. Go to Settings > Widget > Layout.
2. Scroll to the Mobile section.
3. Select the preferred mobile layout and adjust mobile-specific settings.
4. Use the preview panel to toggle between desktop and mobile views.
5. Click Save.

Custom CSS

For advanced styling needs that go beyond the built-in settings, you can inject custom CSS rules.

Adding Custom CSS

1. Go to Settings > Widget > Advanced.
2. Enter your CSS in the Custom CSS text area.
3. Click Save.

CSS Class Reference

The widget exposes the following CSS classes for targeted styling:

Class	Element
.se-store-locator	Root container of the widget.
.se-search-bar	The search input container.
.se-search-input	The text input field.
.se-search-button	The search submit button.
.se-filters	The filter bar container.
.se-results-list	The scrollable results panel.
.se-location-card	An individual location card.
.se-location-card--active	The currently selected/highlighted location card.
.se-map-container	The Google Maps container.
.se-info-window	The info window popup on the map.

Example: Custom Card Styling

.se-location-card {
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 12px;
}

.se-location-card--active {
  border-left: 4px solid #1a73e8;
}

警告

Custom CSS is applied globally to the widget. Test your changes thoroughly across desktop and mobile viewports to ensure no layout issues are introduced.

Live Preview

All appearance settings include a live preview panel within the app dashboard. The preview reflects your configuration changes in real time without affecting your live storefront. Once you are satisfied with the result, click Save to publish the changes.

Next Steps

• Map Styles -- Customize the appearance of the Google Map itself.
• Custom Markers -- Replace default map pins with branded marker icons.
• Info Windows -- Customize the popup that appears when a marker is clicked.